syntax highlighting docs

Author: ShMcK

Gemfile

@@ -1,3 +1,4 @@
 gem 'github-pages'
 gem 'jekyll-sitemap'
+gem 'rouge'
 source 'https://rubygems.org'

Gemfile.lock

@@ -126,6 +126,7 @@ PLATFORMS
 DEPENDENCIES
   github-pages
   jekyll-sitemap
+  rouge
 
 BUNDLED WITH
    1.11.2

_config.yml

@@ -15,6 +15,9 @@ using the coderoad-cli and tools developers already know: markdown and unit test
 
 # Build settings
 markdown: kramdown
+highlighter: rouge
+kramdown:
+  input: GFM
 permalink: pretty
 
 gems:

_includes/docs/docs.html

@@ -1,4 +1,5 @@
 <link rel="stylesheet" type="text/css" href="/css/docs.min.css" />
+<link rel="stylesheet" type="text/css" href="/css/dark-syntax.css" />
 
 <section id="docs">
   <div class="container bs-docs-container">

_posts/2016-01-02-development.md

@@ -19,23 +19,24 @@ Running **create** generates:
 * an example `test` directory with a few example tests
 * a `package.json` configuration with some of the following settings:
 
-
-      {
-        "name": "coderoad-$TUTORIAL-NAME$",
-        "version": "0.1.0",
-        "description": "Coderoad tutorial",
-        "author": "Name <email> (site)",
-        "main": "coderoad.json",
-        "keywords": ["coderoad", "tutorial"],
-        "dependencies": {
-            "mocha-coderoad": "^0.3.1"
-        },
-        "coderoad": {
-            "testDir": "test",
-            "testSuffix": ".spec.js",
-            "testRunner": "mocha-coderoad"
-        }
-      }
+```json
+{
+  "name": "coderoad-$TUTORIAL-NAME$",
+  "version": "0.1.0",
+  "description": "Coderoad tutorial",
+  "author": "Name <email> (site)",
+  "main": "coderoad.json",
+  "keywords": ["coderoad", "tutorial"],
+  "dependencies": {
+      "mocha-coderoad": "^0.3.1"
+  },
+  "coderoad": {
+      "testDir": "test",
+      "testSuffix": ".spec.js",
+      "testRunner": "mocha-coderoad"
+  }
+}
+```
 
 We'll learn more about these configurations when it's time to [publish](#publish).
 
@@ -51,9 +52,13 @@ Open a new directory for demoing your tutorial. Setup a new NPM project file.
 
 Add your package name to the `dependencies` in `package.json`:
 
-    "dependencies": {
-        "coderoad-$YOUR-PACKAGE-NAME$": "^0.1.0"
-    }
+```json
+{
+  "dependencies": {
+      "coderoad-$YOUR-PACKAGE-NAME$": "^0.1.0"
+  }
+}
+```
 
 Normally you would use `npm install` to install the package, but your package isn't ready to be published yet. Instead, you need to link your tutorial package to your demo directory.
 

_posts/2016-01-03-tutorial.md

@@ -17,23 +17,25 @@ Each level of header indicates a different section, followed by a description.
 
 As an example:
 
-    # Project Title
-    A description of your project
+```markdown
+# Project Title
+A description of your project
 
-    ## Chapter One Title
-    A description of chapter one
+## Chapter One Title
+A description of chapter one
 
-    ### Page One Title
-    A description of page one
+### Page One Title
+A description of page one
 
-    + A description of task one
++ A description of task one
 
-    + A description of task two
++ A description of task two
 
-    ### Page Two Title
-    A description of page two
+### Page Two Title
+A description of page two
 
-    ## Chapter Two Title
-    etc.
+## Chapter Two Title
+etc.
+```
 
 [Read more](https://help.github.com/articles/working-with-advanced-formatting/) about Github Flavored Markdown, including how to write tables & syntax highlight code blocks.

_posts/2016-01-04-coderoad-api.md

@@ -9,21 +9,27 @@ Of course Markdown couldn't cover all uses necessary for CodeRoad. Instead, ther
 
 For these API features to work, they must be placed at the beginning of a line.
 
-    @import('file')           // ✓
-      @import('file')         // ✗
+```markdown
+@import('file')           // ✓
+  @import('file')         // ✗
+```
 
 Features can be commented out, allowing you to view different files at a time. Be aware the parser matches content from the beginning of a line.
 
-    <!-- @import('file') -->  // ✗
-    <!-- @import('file')      // ✗
-    @import('file2') -->      // ✓
+```markdown
+<!-- @import('file') -->  // ✗
+<!-- @import('file')      // ✗
+@import('file2') -->      // ✓
+```
 
 ### `@import`
 
 *@import* loads other markdown files. Specify a relative path from the root project directory. If no file extension is provided, it will default to *.md*.
 
-    @import('./path/to/file')
-    @import('./path/to/file.md')
+```markdown
+@import('./path/to/file')
+@import('./path/to/file.md')
+```
 
 See an [example](https://github.com/coderoad/coderoad-functional-school/blob/master/tutorial/tutorial.md).
 
@@ -32,15 +38,23 @@ See an [example](https://github.com/coderoad/coderoad-functional-school/blob/mas
 
 Defaults for loading tests are specified in the tutorial *package.json* file.
 
-    "config": {
-      "testDir": "tutorial",     // the directory name tests paths will load from
-      "testSuffix": ".spec.js"   // the test file suffix that will be added
-    }
+```json
+{
+  "config": {
+    "testDir": "tutorial",    
+    "testSuffix": ".spec.js"  
+  }
+}
+```
+
+`testDir` is appended to all @test calls, and `testSuffix` is added to the end.
 
 *@test* loads a test file. It is important that these files are loaded in the correct order. *@test* can take a single test file, or an array of test files.
 
-    @test('path/to/file')
-    @test(['path/to/file', 'path/to/file2'])
+```markdown
+@test('path/to/file')
+@test(['path/to/file', 'path/to/file2'])
+```
 
 The first example would load the file './tutorial/path/to/file.spec.js' in the project root directory.
 
@@ -52,16 +66,19 @@ See an [example](https://github.com/coderoad/coderoad-functional-school/blob/mas
 
 *@hint* loads a string, or array of strings, which can be used to provide hints for the user.
 
-    @hint('A hint for the user')
-    @hint(['The first hint', 'The second hint'])
+```markdown
+@hint('A hint for the user')
+@hint(['The first hint', 'The second hint'])
+```
 
 *@hint* may use code-blocks with syntax highlighting.
 
-
-    @hint(`var a = 42;`)
-    @hint(```js
-      var a = 42;
-    ```)
+```markdown
+@hint(`var a = 42;`)
+@hint(```js
+var a = 42;
+```)
+```
 
 ### `@action`
 
@@ -71,32 +88,38 @@ See an [example](https://github.com/coderoad/coderoad-functional-school/blob/mas
 
 Open a file. The path to the file will be from the users root directory.
 
-    @action(open('file.js'))
-    @action(open('path/to/file.js'))
+```markdown
+@action(open('file.js'))
+@action(open('path/to/file.js'))
+```
 
 #### set
 
 Replace all text in a file.
 
-    @action(set('// hello world'))
-    @action(set(`// hello world`))
-    @action(set(```
-      function sayHello() {
-        return 'hello world';
-      }
-    ```))
+```markdown
+@action(set('// hello world'))
+@action(set(`// hello world`))
+@action(set(```
+  function sayHello() {
+    return 'hello world';
+  }
+```))
+```
 
 #### insert
 
 Add text to the bottom of the active text editor.
 
-    @action(insert('// hello world'))
-    @action(insert(`// hello world`))
-    @action(insert(```
-      function sayHello() {
-        return 'hello world';
-      }
-    ```))
+```markdown
+@action(insert('// hello world'))
+@action(insert(`// hello world`))
+@action(insert(```
+  function sayHello() {
+    return 'hello world';
+  }
+```))
+```
 
 #### What's Next
 

_posts/2016-01-05-tests.md

@@ -14,26 +14,30 @@ Tests are loaded in their order from the tutorial markdown files, and concat tog
 
 Tests should indicate which task they are, in order to quickly determine which task index has failed. For the *mocha-coderoad* test runner, this is as easy as adding the task number to describe block.
 
-    describe('01 first task', function () { ... });
-    describe('04 fourth task', function () { ... });
-
+```js
+describe('01 first task');
+describe('04 fourth task');
+```
 
 ### Test Statements
 
 It makes sense to write test statements using 'should', 'must' or negative statements. Remember, the failing test message will be delivered as feedback to the user.
 
-    it('should be a function')
-    it('must be a function')
-    it('isn\'t a function')
-
+```js
+it('should be a function')
+it('must be a function')
+it('isn\'t a function')
+```
 
 ### Loaders
 
 Use a **loader** to run the user saved file in the context of your file. Think of a loader as a way to place the file your testing inside of your test file. Import your loader and run it on a specific user file.
 
-    var loadJS = require('path/to/loadJS').default;
-    loadJS('user-file.js');
-    // adds file contents here
+```js
+var loadJS = require('path/to/loadJS').default;
+loadJS('user-file.js');
+// adds file contents here
+```
 
 You'll have to roll your own loader to fit your project, but there are example [loaders](#loaders) included later in the docs.
 
@@ -47,14 +51,18 @@ Data can be loaded in the user's file by setting it as a global within the test.
 
 Although bad practice, it can be easiest to set data to the global scope.
 
-    if (!global.data) {
-      global.data = 43;
-    }
+```js
+if (!global.data) {
+    global.data = 43;
+}
 
-    if (!global.data2) {
-      global.data2 = JSON.parse(JSON.stringify(require('./data2.json')));
-    }
+if (!global.data2) {
+    global.data2 = JSON.parse(JSON.stringify(require('./data2.json')));
+}
+```
 
 Users can access global data by name in their file.
 
-    var secret = data - 1;
+```js
+var secret = data - 1;
+```