Fixed syntax and command line formatting

hyde/layouts/doc/content/commandline.html

@@ -24,24 +24,21 @@ hyde create
 hyde [-s </site/path>] [-v] create [-l <layout>] [-f] [-h]
 ~~~~~~~~
 
-* `-s SITEPATH, --sitepath SITEPATH`
-
-    Where the site must be created. If this path is not empty then the `-f`
+`-s SITEPATH, --sitepath SITEPATH`
+:   Where the site must be created. If this path is not empty then the `-f`
     option must be specified to overwrite the site.
 
     *Optional* - defaults to current working directory.
 
-* `-f, --force`
-
-    Specifying this option will overwrite files and folders at the given
+`-f, --force`
+:   Specifying this option will overwrite files and folders at the given
     site path.
 
     *Optional* - If the target directory is not empty, hyde will throw an
     exception unless this is specified.
 
-* `-l LAYOUT, --layout LAYOUT`
-
-    The name of the layout to use for creating the initial site. Hyde currently
+`-l LAYOUT, --layout LAYOUT`
+:   The name of the layout to use for creating the initial site. Hyde currently
     has three layouts: `basic`, `test` and `doc`.
 
     While basic and test are really barebones, doc is the one that generates
@@ -51,20 +48,18 @@ hyde [-s </site/path>] [-v] create [-l <layout>] [-f] [-h]
     Hyde tries to locate the specified layout in the following folders:
 
     1.  In `layouts` folder under the path specified by the `HYDE_DATA`
-        environment variable
+    environment variable
     2.  In `layouts` folder under hyde
 
     *Optional* - defaults to `basic`
 
-* `-v, --verbose`
-
-    Logs detailed messages to the console.
+`-v, --verbose`
+:   Logs detailed messages to the console.
 
     *Optional* - shows only essential messages if this option is omitted.
 
-* `-h`
-
-    Displays the help text for the `create` command.
+`-h`
+:   Displays the help text for the `create` command.
 
 Assuming the `HYDE_DATA` environment variable is empty and the folder
 `~/test` is empty, the following command will create a new hyde site
@@ -84,15 +79,13 @@ hyde gen
 hyde [-s </site/path>] [-v] gen [-d </deploy/path>] [-c <config/path>] [-h]
 ~~~~~~~~
 
-* `-s SITEPATH, --sitepath SITEPATH`
-
-    The path to the site to be generated.
+`-s SITEPATH, --sitepath SITEPATH`
+:   The path to the site to be generated.
 
     *Optional* - defaults to current working directory.
 
-* `-d DEPLOY_PATH, --deploy-path DEPLOY_PATH`
-
-    Location where the site should be generated. This option overrides any
+`-d DEPLOY_PATH, --deploy-path DEPLOY_PATH`
+:   Location where the site should be generated. This option overrides any
     setting specified in the hyde [configuration][]. The path is assumed to
     be relative to the site path unless a preceding path separator is found.
 
@@ -100,9 +93,8 @@ hyde [-s </site/path>] [-v] gen [-d </deploy/path>] [-c <config/path>] [-h]
     in the configuration file is: `deploy` folder under the current site path.
 
 
-* `-c CONFIG, --config-path CONFIG`
-
-    This is used for specifying an alternate configuration file to use for
+`-c CONFIG, --config-path CONFIG`
+:   This is used for specifying an alternate configuration file to use for
     generating the site. This is useful if you have two different configurations
     for you production versus development websites.
 
@@ -111,15 +103,13 @@ hyde [-s </site/path>] [-v] gen [-d </deploy/path>] [-c <config/path>] [-h]
 
     *Optional* - defaults to `site.yaml`
 
-* `-v, --verbose`
-
-    Logs detailed messages to the console.
+`-v, --verbose`
+:   Logs detailed messages to the console.
 
     *Optional* - shows only essential messages if this option is omitted.
 
-* `-h`
-
-    Displays the help text for the `gen` command.
+`-h`
+:   Displays the help text for the `gen` command.
 
 The following command will use `production.yaml` as the configuration file and
 generate the website at `~/test` to `~/production_site` directory.
@@ -140,34 +130,33 @@ hyde serve
 hyde [-s </site/path>] [-v] gen [-d </deploy/path>] [-c <config/path>] [-h]
 ~~~~~~~~
 
-* `-s SITEPATH, --sitepath SITEPATH`
-  `-d DEPLOY_PATH, --deploy-path DEPLOY_PATH`
-  `-c CONFIG, --config-path CONFIG`
+`-s SITEPATH, --sitepath SITEPATH`
+`-d DEPLOY_PATH, --deploy-path DEPLOY_PATH`
+`-c CONFIG, --config-path CONFIG`
 
-  Since the `serve` command auto generates if there is a need, it needs the same
-  parameters as the `gen` command. The above parameters serve the same purpose here
-  as in the `gen` command.
+:   Since the `serve` command auto generates if there is a need, it needs
+    the same parameters as the `gen` command. The above parameters serve
+    the same purpose here as in the `gen` command.
 
-* `-a ADDRESS, --address ADDRESS`
+`-a ADDRESS, --address ADDRESS`
 
-  The address to serve the website.
+:   The address to serve the website.
 
-  *Optional* - defaults to `localhost`
+    *Optional* - defaults to `localhost`
 
-* `-p PORT, --port`
+`-p PORT, --port`
 
-  The port to serve the website.
+:   The port to serve the website.
 
-  *Optional* - default to `8080`
+    *Optional* - default to `8080`
 
-* `-h`
+`-h`
 
-  Displays the help text for the `serve` command.
+:   Displays the help text for the `serve` command.
 
-The following command will serve the website at `http://localhost:8181`
+    The following command will serve the website at `http://localhost:8181`
 
 ~~~sh~~~
 cd ~/test
 hyde serve -p 8181
 ~~~~~~~~
-

hyde/layouts/doc/content/media/css/inc/layout.less

@@ -31,4 +31,12 @@ li {
         padding-top: @gutter;
         padding-bottom:0;
     }
-}
+}
+
+dt {
+    line-height: @gutter * 2;
+}
+
+dd {
+    margin-top: @gutter * 2;
+}

hyde/layouts/doc/content/media/css/inc/text.less

@@ -22,12 +22,21 @@ h1, h2, h3, h4, h5, h6{
 
 code,
 .highlight pre{
-    font-family: menlo, monaco, courier;
+    font-family: "Courier New", courier, monospace;
+    font-size: 80%;
+    line-height: 110%;
 }
 
 code{
     color: @qdark;
-    font-size: 80%;
+}
+
+ul > li {
+    list-style-type: square;
+}
+
+li ul > li {
+    list-style-type: circle;
 }
 
 .amp {

hyde/layouts/doc/content/media/css/site.less

@@ -34,13 +34,13 @@ header.banner {
         .subheading;
         color: @qdark;
         position: absolute;
-        bottom: @gutter;
+        bottom: @gutter - 2;
         font-size: @gutter * 2;
         left: @gutter * 22 + 2;
         margin:0;
         text-shadow: -1px -1px 0px @clear - 90, 1px 1px 0px @clear + 90;
     }
-    margin-bottom: @column;
+    margin-bottom: @column - 2;
 }
 
 article {
@@ -50,7 +50,7 @@ article {
     h1.title {
         color: @dark;
         font-size: @gutter * 3;
-        margin-bottom: @gutter / 2;
+        margin-bottom: @gutter / 2 + 1;
     }
     h3.subtitle{
         color: @shade;
@@ -58,13 +58,15 @@ article {
         font-weight: normal;
         padding-left: 6px;
         border-bottom: 1px solid rgba(0, 0, 0, 0.1);
-        margin-bottom: @gutter * 2 - 3;
+        margin-bottom: @gutter * 2 - 2;
     }
 }
 
 .highlight pre{
-    font-size: @gutter - 1;
+    font-size: @gutter;
     .boxshadow(0, 1px, 3px, @qdark);
-    padding: @gutter * 1.5 @gutter;
+    padding: @gutter + 4 @gutter @gutter;
+    line-height: @gutter * 2;
+    margin-bottom: @gutter / 2 + 2;
 }
 

hyde/layouts/doc/content/media/css/syntax.css

@@ -0,0 +1,62 @@
+.highlight .hll { background-color: #ffffcc }
+.highlight  { background: #f0f3f3; }
+.highlight .c { color: #0099FF; font-style: italic } /* Comment */
+.highlight .err { color: #AA0000; background-color: #FFAAAA } /* Error */
+.highlight .k { color: #006699; font-weight: bold } /* Keyword */
+.highlight .o { color: #555555 } /* Operator */
+.highlight .cm { color: #0099FF; font-style: italic } /* Comment.Multiline */
+.highlight .cp { color: #009999 } /* Comment.Preproc */
+.highlight .c1 { color: #0099FF; font-style: italic } /* Comment.Single */
+.highlight .cs { color: #0099FF; font-weight: bold; font-style: italic } /* Comment.Special */
+.highlight .gd { background-color: #FFCCCC; border: 1px solid #CC0000 } /* Generic.Deleted */
+.highlight .ge { font-style: italic } /* Generic.Emph */
+.highlight .gr { color: #FF0000 } /* Generic.Error */
+.highlight .gh { color: #003300; font-weight: bold } /* Generic.Heading */
+.highlight .gi { background-color: #CCFFCC; border: 1px solid #00CC00 } /* Generic.Inserted */
+.highlight .go { color: #AAAAAA } /* Generic.Output */
+.highlight .gp { color: #000099; font-weight: bold } /* Generic.Prompt */
+.highlight .gs { font-weight: bold } /* Generic.Strong */
+.highlight .gu { color: #003300; font-weight: bold } /* Generic.Subheading */
+.highlight .gt { color: #99CC66 } /* Generic.Traceback */
+.highlight .kc { color: #006699; font-weight: bold } /* Keyword.Constant */
+.highlight .kd { color: #006699; font-weight: bold } /* Keyword.Declaration */
+.highlight .kn { color: #006699; font-weight: bold } /* Keyword.Namespace */
+.highlight .kp { color: #006699 } /* Keyword.Pseudo */
+.highlight .kr { color: #006699; font-weight: bold } /* Keyword.Reserved */
+.highlight .kt { color: #007788; font-weight: bold } /* Keyword.Type */
+.highlight .m { color: #FF6600 } /* Literal.Number */
+.highlight .s { color: #CC3300 } /* Literal.String */
+.highlight .na { color: #330099 } /* Name.Attribute */
+.highlight .nb { color: #336666 } /* Name.Builtin */
+.highlight .nc { color: #00AA88; font-weight: bold } /* Name.Class */
+.highlight .no { color: #336600 } /* Name.Constant */
+.highlight .nd { color: #9999FF } /* Name.Decorator */
+.highlight .ni { color: #999999; font-weight: bold } /* Name.Entity */
+.highlight .ne { color: #CC0000; font-weight: bold } /* Name.Exception */
+.highlight .nf { color: #CC00FF } /* Name.Function */
+.highlight .nl { color: #9999FF } /* Name.Label */
+.highlight .nn { color: #00CCFF; font-weight: bold } /* Name.Namespace */
+.highlight .nt { color: #330099; font-weight: bold } /* Name.Tag */
+.highlight .nv { color: #003333 } /* Name.Variable */
+.highlight .ow { color: #000000; font-weight: bold } /* Operator.Word */
+.highlight .w { color: #bbbbbb } /* Text.Whitespace */
+.highlight .mf { color: #FF6600 } /* Literal.Number.Float */
+.highlight .mh { color: #FF6600 } /* Literal.Number.Hex */
+.highlight .mi { color: #FF6600 } /* Literal.Number.Integer */
+.highlight .mo { color: #FF6600 } /* Literal.Number.Oct */
+.highlight .sb { color: #CC3300 } /* Literal.String.Backtick */
+.highlight .sc { color: #CC3300 } /* Literal.String.Char */
+.highlight .sd { color: #CC3300; font-style: italic } /* Literal.String.Doc */
+.highlight .s2 { color: #CC3300 } /* Literal.String.Double */
+.highlight .se { color: #CC3300; font-weight: bold } /* Literal.String.Escape */
+.highlight .sh { color: #CC3300 } /* Literal.String.Heredoc */
+.highlight .si { color: #AA0000 } /* Literal.String.Interpol */
+.highlight .sx { color: #CC3300 } /* Literal.String.Other */
+.highlight .sr { color: #33AAAA } /* Literal.String.Regex */
+.highlight .s1 { color: #CC3300 } /* Literal.String.Single */
+.highlight .ss { color: #FFCC33 } /* Literal.String.Symbol */
+.highlight .bp { color: #336666 } /* Name.Builtin.Pseudo */
+.highlight .vc { color: #003333 } /* Name.Variable.Class */
+.highlight .vg { color: #003333 } /* Name.Variable.Global */
+.highlight .vi { color: #003333 } /* Name.Variable.Instance */
+.highlight .il { color: #FF6600 } /* Literal.Number.Integer.Long */

hyde/layouts/doc/content/overview.html

@@ -66,7 +66,7 @@ hyde serve
 You can access the website now at `http://localhost:8080`
 
 For all the supported options, read [command line documentation][commandline]
-or run `hyde --h`.
+or run `hyde -h`.
 
 ## Source
 

hyde/layouts/doc/layout/root.j2

@@ -44,6 +44,7 @@
 
   {% block css %}
   <link rel="stylesheet" href="{{ media_url('css/site.css') }}">
+  <link rel="stylesheet" href="{{ media_url('css/syntax.css') }}">
   {% endblock css %}
 
   {% block headjs %}