Add syntax highlighting

zspencer · zspencer · commit 894698807b75 · 2014-03-01T13:50:07.000-08:00
Closes #62
diff --git a/Gemfile b/Gemfile
@@ -1,3 +1,4 @@
 source 'https://rubygems.org'
 
 gem 'jekyll', '1.4.3'
+gem 'rouge', '1.3.2'
diff --git a/Gemfile.lock b/Gemfile.lock
@@ -39,6 +39,7 @@ GEM
     rb-kqueue (0.2.0)
       ffi (>= 0.5.0)
     redcarpet (2.3.0)
+    rouge (1.3.2)
     safe_yaml (0.9.7)
     toml (0.1.0)
       parslet (~> 1.5.0)
@@ -49,3 +50,4 @@ PLATFORMS
 
 DEPENDENCIES
   jekyll (= 1.4.3)
+  rouge (= 1.3.2)
diff --git a/content/lessons/_config.yml b/content/lessons/_config.yml
@@ -0,0 +1 @@
+highlighter: rouge
diff --git a/content/lessons/_layouts/default.html b/content/lessons/_layouts/default.html
@@ -1,16 +1,10 @@
 <!DOCTYPE html>
 <head>
-  <style>
-    #chunk-game {
-      background-color: black;
-      display: block;
-      margin-left: auto;
-      margin-right: auto;
-    }
-  </style>
+  <link rel="stylesheet" type="text/css" href="/css/syntax.css" />
 </head>
 <body>
 <h1>{{ page.title }}</h1>
+
 {{ content }}
 
 <div id="footer">
diff --git a/content/lessons/css/syntax.css b/content/lessons/css/syntax.css
@@ -0,0 +1,73 @@
+#chunk-game {
+  background-color: black;
+  display: block;
+  margin-left: auto;
+  margin-right: auto;
+}
+
+/***********************/
+/* SYNTAX HIGHLIGHTING */
+/***********************/
+
+.lineno { background: #AFAFAF; }
+.highlight { background: #ffffff; }
+.highlight .c { color: #999988; font-style: italic } /* Comment */
+.highlight .err { color: #a61717; background-color: #e3d2d2 } /* Error */
+.highlight .k { font-weight: bold } /* Keyword */
+.highlight .o { font-weight: bold } /* Operator */
+.highlight .cm { color: #999988; font-style: italic } /* Comment.Multiline */
+.highlight .cp { color: #999999; font-weight: bold } /* Comment.Preproc */
+.highlight .c1 { color: #999988; font-style: italic } /* Comment.Single */
+.highlight .cs { color: #999999; font-weight: bold; font-style: italic } /* Comment.Special */
+.highlight .gd { color: #000000; background-color: #ffdddd } /* Generic.Deleted */
+.highlight .gd .x { color: #000000; background-color: #ffaaaa } /* Generic.Deleted.Specific */
+.highlight .ge { font-style: italic } /* Generic.Emph */
+.highlight .gr { color: #aa0000 } /* Generic.Error */
+.highlight .gh { color: #999999 } /* Generic.Heading */
+.highlight .gi { color: #000000; background-color: #ddffdd } /* Generic.Inserted */
+.highlight .gi .x { color: #000000; background-color: #aaffaa } /* Generic.Inserted.Specific */
+.highlight .go { color: #888888 } /* Generic.Output */
+.highlight .gp { color: #555555 } /* Generic.Prompt */
+.highlight .gs { font-weight: bold } /* Generic.Strong */
+.highlight .gu { color: #aaaaaa } /* Generic.Subheading */
+.highlight .gt { color: #aa0000 } /* Generic.Traceback */
+.highlight .kc { font-weight: bold } /* Keyword.Constant */
+.highlight .kd { font-weight: bold } /* Keyword.Declaration */
+.highlight .kp { font-weight: bold } /* Keyword.Pseudo */
+.highlight .kr { font-weight: bold } /* Keyword.Reserved */
+.highlight .kt { color: #445588; font-weight: bold } /* Keyword.Type */
+.highlight .m { color: #009999 } /* Literal.Number */
+.highlight .s { color: #d14 } /* Literal.String */
+.highlight .na { color: #008080 } /* Name.Attribute */
+.highlight .nb { color: #0086B3 } /* Name.Builtin */
+.highlight .nc { color: #445588; font-weight: bold } /* Name.Class */
+.highlight .no { color: #008080 } /* Name.Constant */
+.highlight .ni { color: #800080 } /* Name.Entity */
+.highlight .ne { color: #990000; font-weight: bold } /* Name.Exception */
+.highlight .nf { color: #990000; font-weight: bold } /* Name.Function */
+.highlight .nn { color: #555555 } /* Name.Namespace */
+.highlight .nt { color: #000080 } /* Name.Tag */
+.highlight .nv { color: #008080 } /* Name.Variable */
+.highlight .ow { font-weight: bold } /* Operator.Word */
+.highlight .w { color: #bbbbbb } /* Text.Whitespace */
+.highlight .mf { color: #009999 } /* Literal.Number.Float */
+.highlight .mh { color: #009999 } /* Literal.Number.Hex */
+.highlight .mi { color: #009999 } /* Literal.Number.Integer */
+.highlight .mo { color: #009999 } /* Literal.Number.Oct */
+.highlight .sb { color: #d14 } /* Literal.String.Backtick */
+.highlight .sc { color: #d14 } /* Literal.String.Char */
+.highlight .sd { color: #d14 } /* Literal.String.Doc */
+.highlight .s2 { color: #d14 } /* Literal.String.Double */
+.highlight .se { color: #d14 } /* Literal.String.Escape */
+.highlight .sh { color: #d14 } /* Literal.String.Heredoc */
+.highlight .si { color: #d14 } /* Literal.String.Interpol */
+.highlight .sx { color: #d14 } /* Literal.String.Other */
+.highlight .sr { color: #009926 } /* Literal.String.Regex */
+.highlight .s1 { color: #d14 } /* Literal.String.Single */
+.highlight .ss { color: #990073 } /* Literal.String.Symbol */
+.highlight .bp { color: #999999 } /* Name.Builtin.Pseudo */
+.highlight .vc { color: #008080 } /* Name.Variable.Class */
+.highlight .vg { color: #008080 } /* Name.Variable.Global */
+.highlight .vi { color: #008080 } /* Name.Variable.Instance */
+.highlight .il { color: #009999 } /* Literal.Number.Integer.Long */
+
diff --git a/content/lessons/index.html b/content/lessons/index.html
@@ -29,8 +29,8 @@ <h3>Launch your programming environment</h3>
   <li>Open game/snake.js in your text editor</li>
   <li>Open game/index.html in your browser</li>
   <li>Open your browsers javascript console</li>
-  <li>type <pre>alert("hello world");</pre> in your browsers javascript console
-  and dismiss the window that pops up<br />
+  <li>type `alert("hello world");` in your browsers javascript console and
+  dismiss the window that pops up<br />
   <img src='images/helloworld.png'
   height="300" width="600"></li>
 </ul>
diff --git a/content/lessons/lesson-10/index.html b/content/lessons/lesson-10/index.html
@@ -11,53 +11,53 @@
 segment index and a snake and returns the segment closer to the head. Let's
 start with:</p>
 
-<pre>
+{% highlight js %}
 var segmentFurtherForwardThan = function(index, snake) {
   return snake[index - 1]
 }
-</pre>
+{% endhighlight %}
 
 While this <em>seems</em> OK, in reality it has a nefarious bug! Open your console and type:
 
-<pre>
+{% highlight js %}
   segmentFurtherForwardThan(1, snake);
-</pre>
+{% endhighlight %}
 
 <p>This returns a segment object, which looks great! But what happens if we try
 a index of 0?</p>
 
-<pre>
+{% highlight js %}
   segmentFurtherForwardThan(0, snake);
-</pre>
+{% endhighlight %}
 
 <p>Instead of a segment, we get `undefined`! This means we can't get a
 direction! Let's use an `if` statement to return the segment at the index if
 there isn't a segment further forward. Change `segmentFurtherForwardThan` to:
 </p>
 
-<pre>
+{% highlight js %}
 var segmentFurtherForwardThan = function(index, snake) {
   if (snake[index - 1] === undefined) {
     return snake[index];
   } else {
     return snake[index - 1];
   }
 }
-</pre>
+{% endhighlight %}
 
 <p>Now when you run `segmentFurtherForwardThan(0, snake)` it will return the
 snakes head instead of undefined. Excellent! Now we get to change moveSnake to
 use `segmentFurtherForwardThan` when it assigns the segments direction. Change `moveSnake` to:</p>
 
-<pre>
+{% highlight js %}
 var moveSnake = function(snake) {
   return snake.map(function(oldSegment, segmentIndex) {
     var newSegment = moveSegment(oldSegment);
     newSegment.direction = segmentFurtherForwardThan(segmentIndex, snake).direction;
     return newSegment;
   });
 }
-</pre>
+{% endhighlight %}
 
 <p>Great! Now each segment will follow the segment ahead of it!</p>
 
@@ -70,4 +70,3 @@ <h3>Syntax Breakdown</h3>
 <h3>Play Time!</h3>
 
 <h3><a href="../lesson-11">Move on to Lesson 11</a></h3>
-
diff --git a/content/lessons/lesson-11/index.html b/content/lessons/lesson-11/index.html
@@ -5,21 +5,21 @@
 ---
 <p>Let's make it so an apple appears on the screen!</p>
 
-<pre>
+{% highlight js %}
 var draw = function(snakeToDraw, apple) {
   var drawableSnake = { color: "green", pixels: snakeToDraw };
   var drawableApple = { color: "red", pixels: [apple] };
   var drawableObjects = [drawableSnake, drawableApple];
   CHUNK.draw(drawableObjects);
 }
-</pre>
+{% endhighlight %}
 
 <p>We renamed the `drawSnake` function and let it take multiple arguments so it 
 can draw an apple.</p>
 
 <p>Next, let's make sure we pass the `apple` to the `draw` function, when we call it!</p>
 
-<pre>
+{% highlight js %}
 var advanceGame = function() {
   snake = moveSnake(snake);
   if (CHUNK.detectCollisionBetween(snake, CHUNK.gameBoundaries())) {
@@ -28,13 +28,13 @@
   }
   draw(snake, apple);
 }
-</pre>
+{% endhighlight %}
 
 <p>Finally, let's create an apple to be drawn!</p>
 
-<pre>
+{% highlight js %}
 var apple = { top: 8, left: 10 };
-</pre>
+{% endhighlight %}
 
 {% include expected-results.html %}
 
diff --git a/content/lessons/lesson-12/index.html b/content/lessons/lesson-12/index.html
@@ -11,20 +11,20 @@
 the snake moves next the copied segment will stay in place, causing it to
 "grow" on the screen.</p>
 
-<pre>
+{% highlight js %}
 var growSnake = function(snake) {
   var indexOfLastSegment = snake.length - 1;
   var lastSegment = snake[snake.length - 1];
   snake.push({ top: lastSegment.top, left: lastSegment.left });
   return snake;
 }
-</pre>
+{% endhighlight %}
 
 <p>Now that we have a function to grow the snake, let's check for a collision
 between the apple and the snake whenever the game advances. Let's change the
 `advanceGame` function so it looks like this:</p>
 
-<pre>
+{% highlight js %}
 var advanceGame = function() {
   snake = moveSnake(snake);
   if (CHUNK.detectCollisionBetween([apple], snake)) {
@@ -37,7 +37,7 @@
   }
   draw(snake, apple);
 }
-</pre>
+{% endhighlight %}
 
 {% include expected-results.html %}
 
diff --git a/content/lessons/lesson-13/index.html b/content/lessons/lesson-13/index.html
@@ -5,18 +5,18 @@
 ---
 <p>The last thing we need to do is check to see if the snake ran into itself.</p>
 
-<pre>
+{% highlight js %}
 var ate = function(snake, otherThing) {
   var head = snake[0];
   return CHUNK.detectCollisionBetween([head], otherThing);
 }
-</pre>
+{% endhighlight %}
 
 <p>We've created an `ate` function that accepts a snake and the previous version of the snake. We can also think about passing the `ate` function other things, which we'll get into in a bit. In `ate` we also reuse the `detectCollisionBetween` to find out if there's a collision.</p>
 
 <p>Now we just have to check if the `newSnake` ate it's previous self to see if there was a collision! We do this by calling the `ate` function inside of `advanceGame`.</p>
 
-<pre>
+{% highlight js %}
 var advanceGame = function() {
   var newSnake = moveSnake(snake);
 
@@ -38,7 +38,7 @@
   snake = newSnake;
   draw(snake, apple);
 }
-</pre>
+{% endhighlight %}
 
 <p>Notice, we've abstracted out the `ate` function by resuing it. It can now determine if the snake ate itself, an apple or the wall.</p>
 
diff --git a/content/lessons/lesson-4/index.html b/content/lessons/lesson-4/index.html
@@ -18,25 +18,25 @@
 <p>By making these assumptions it keeps the code clear and makes it easy to
 take small steps. Add the following code to your snake.js file: </p>
 
-<pre>
+{% highlight js %}
 var moveSnake = function(snake) {
   var oldSegment = snake[0];
   var newSegment = { top: oldSegment.top + 1, left: oldSegment.left };
   var newSnake = [newSegment];
   return newSnake;
 }
-</pre>
+{% endhighlight %}
 
 <p>Once we have this `moveSnake` function, we can call it and it will give us a
 snake whose segment's location has changed. We can then call `drawSnake` with
 that snake and see it move across the screen!</p>
 
 <p>Type the following lines into your javascript console a few times:</p>
 
-<pre>
+{% highlight js %}
   snake = moveSnake(snake);
   drawSnake(snake);
-</pre>
+{% endhighlight %}
 
 <h3>How the computer is interpreting this code:</h3>
 
diff --git a/content/lessons/lesson-5/index.html b/content/lessons/lesson-5/index.html
@@ -10,18 +10,18 @@
 
 <p>We'll start with an `advanceGame` function</p>
 
-<pre>
+{% highlight js %}
 var advanceGame = function() {
   snake = moveSnake(snake);
   drawSnake(snake);
 }
-</pre>
+{% endhighlight %}
 
 <p>To get this function running we'll use our CHUNK game engine to CALL the `executeNTimesPerSecond` function. It does exactly that, to do this `executeNTimesPerSecond` takes in two arguments. The first arugement advances the game, and the second tells it how many times to move per-second.</p>
 
-<pre>
+{% highlight js %}
 CHUNK.executeNTimesPerSecond(advanceGame, 1);
-</pre>
+{% endhighlight %}
 
 <p>Bam! Now the snake moves down until it runs off the game screen.</p>
 
diff --git a/content/lessons/lesson-6/index.html b/content/lessons/lesson-6/index.html
@@ -10,7 +10,7 @@
 <p>First, we'll create a function that moves the segment based upon it's
 direction (down, up, right, left):</p>
 
-<pre>
+{% highlight js %}
 var moveSegment = function(segment) {
   if (segment.direction === "down") {
     return { top: segment.top + 1, left: segment.left }
@@ -23,7 +23,7 @@
   }
   return segment;
 }
-</pre>
+{% endhighlight %}
 
 <p>The `if` statement allows us to make choices about what code to execute
 based upon values. Here we use a series of `if` and `else if`s to create a
@@ -35,15 +35,15 @@
 Otherwise the snake will just stop moving! This means we'll updating our 
 `moveSnake` function.</p>
 
-<pre>
+{% highlight js %}
 var moveSnake = function(snake) {
   var oldSegment = snake[0];
   var newSegment = moveSegment(oldSegment);
   newSegment.direction = oldSegment.direction;
   var newSnake = [newSegment];
   return newSnake;
 }
-</pre>
+{% endhighlight %}
 
 <p>Now it's time to add a direction to the starting snake's segments so it knows where to go.</p>
 
diff --git a/content/lessons/lesson-8/index.html b/content/lessons/lesson-8/index.html
diff --git a/content/lessons/lesson-9/index.html b/content/lessons/lesson-9/index.html

Original file line number	Diff line number	Diff line change
`@@ -1,3 +1,4 @@`
`1`	`1`	`source 'https://rubygems.org'`
`2`	`2`
`3`	`3`	`gem 'jekyll', '1.4.3'`
	`4`	`+gem 'rouge', '1.3.2'`