Ruby syntax highlighting.

Author: spiralofhope

README.md

@@ -29,13 +29,15 @@ The braces { and } are a kind of container. The button is "in" the app.
 
 We can place a few buttons in a stack.
 
+```ruby
 	Shoes.app {
 	  stack {
 	    button "A bed of clams"
 	    button "A coalition of cheetahs"
 	    button "A gulp of swallows"
 	  }
 	}
+```
 
 Stacks are essential! The most important two elements in Shoes are *stacks and flows*.
 
@@ -46,6 +48,7 @@ Stacks are essential! The most important two elements in Shoes are *stacks and f
 
 Okay, let's give the stack a bit of a margin. Scoot it out from the edge.
 
+```ruby
 	Shoes.app {
 	  background white
 	  stack(:margin => 8) {
@@ -54,6 +57,7 @@ Okay, let's give the stack a bit of a margin. Scoot it out from the edge.
 	    button "A gulp of swallows"
 	  }
 	}
+```
 
 Also painted the background white. Did you see that?
 
@@ -63,10 +67,12 @@ Also painted the background white. Did you see that?
 
 Time for something new. Artwork. Drawing.
 
+```ruby
 	Shoes.app {
 	  oval :left => 10, :top => 10,
 	    :radius => 40
 	}
+```
 
 The Shoes brush always starts out black.
 
@@ -78,24 +84,27 @@ Notice that while buttons just dropped into the window, we drew the circle at a
 
 Now, a rectangle and an arrow.
 
+```ruby
 	Shoes.app {
 	  fill red
 	  rect :left => 10, :top => 10,
 	    :width => 40
 	  arrow :left => 30, :top => 60,
 	    :width => 40
 	}
-
+```
 
 The fill is red on these shapes. And the stroke is black. (Because we didn't change it.) These two pens - stroke and fill - draw every shape.
 
 ----------------------
 
 Of course, you can always design your app with images. Even images from the web!
 
+```ruby
 	Shoes.app {
 	  image "http://shoooes.net/images/nks-kidnap.png"
 	}
+```
 
 ![006.jpg](https://github.com/ashbb/shoes_tutorial_walkthrough/raw/master/imgs/006.jpg)
 
@@ -105,24 +114,27 @@ Shoes even caches images in memory and on disk, like browsers do. Images are loa
 
 Now, a very important element: the para. As in: paragraph. Probably the third most important element (after stacks and flows.)
 
+```ruby
 	Shoes.app {
 	  para strong("Q."), " Are you beginning to grasp hold of Shoes?"
 	}
+```
 
 ![007.jpg](https://github.com/ashbb/shoes_tutorial_walkthrough/raw/master/imgs/007.jpg)
 
 ----------------------
 
 Beyond para, you've got title and subtitle, which are bigger fonts. You can add a bunch of font styles as well. Look for strong and em in this bit.
 
-
+```ruby
 	Shoes.app {
 	  stack(:margin => 6) {
 	    title "A Question"
 	    para strong("Q."), " Are you beginning to grasp hold of Shoes?"
 	    para em(strong("A."), " Quit pestering me, I'm hacking here.")
 	  }
 	}
+```
 
 ![008.jpg](https://github.com/ashbb/shoes_tutorial_walkthrough/raw/master/imgs/008.jpg)
 
@@ -132,17 +144,20 @@ Beyond para, you've got title and subtitle, which are bigger fonts. You can add
 
 Keep track of stuff by naming them as variables.
 
+```ruby
 	Shoes.app {
 	  @push = button "Push me"
 	  @note = para "Nothing pushed so far"
 	}
+```
 
 ----------------------
 
 ![010.jpg](https://github.com/ashbb/shoes_tutorial_walkthrough/raw/master/imgs/010.jpg)
 
 You can then put the variables into action. When the button is clicked, the @node changes to the message shown in the picture.
 
+```ruby
 	Shoes.app {
 	  @push = button "Push me"
 	  @note = para "Nothing pushed so far"
@@ -151,20 +166,23 @@ You can then put the variables into action. When the button is clicked, the @nod
 	    @note.replace "Aha! Click!"
 	  }
 	}
+```
 
 ----------------------
 
 ![011.jpg](https://github.com/ashbb/shoes_tutorial_walkthrough/raw/master/imgs/011.jpg)
 
 See if you can figure out this one. How does the gradient work? How are the letters styled?
 
+```ruby
 	Shoes.app do
 	  background "#F3F".."#F90"
 	  title "Shoooes", :top => 60,
 	    :align => "center",
 	    :font => "Trebuchet MS",
 	    :stroke => white
 	end
+```
 
 In this example, I used do and end rather than the braces. Same meaning.
 
@@ -174,6 +192,7 @@ In this example, I used do and end rather than the braces. Same meaning.
 
 Aha, here's a flow. It keeps the text box and the button side-by-side.
 
+```ruby
 	Shoes.app do
 	  background "#EFC"
 	  border "#BE8", :strokewidth => 6
@@ -185,24 +204,28 @@ Aha, here's a flow. It keeps the text box and the button side-by-side.
 	    end
 	  end
 	end
+```
 
 ----------------------
 
 ![013.jpg](https://github.com/ashbb/shoes_tutorial_walkthrough/raw/master/imgs/013.jpg)
 
 In this one, we make a five-point star. And it follows the mouse around as you move.
 
+```ruby
 	Shoes.app do
 	  @shape = star :points => 5
 	  motion do |left, top|
 	    @shape.move left, top
 	  end
 	end
+```
 
 ----------------------
 
 On to a taste of animation. The Shoes icon moves randomly a bunch of times each second.
 
+```ruby
 	Shoes.app do
 	  @shoes = image "http://shoooes.net/shoes.png",
 	    :top => 100, :left => 100
@@ -211,7 +234,7 @@ On to a taste of animation. The Shoes icon moves randomly a bunch of times each
 	    @shoes.left += (-20..20).rand
 	  end
 	end
-
+```
 
 ![014.jpg](https://github.com/ashbb/shoes_tutorial_walkthrough/raw/master/imgs/014.jpg)
 
@@ -221,6 +244,7 @@ On to a taste of animation. The Shoes icon moves randomly a bunch of times each
 
 Remember a few examples ago when we handled a button click? How about doing the same with a link?
 
+```ruby
 	Shoes.app {
 	  @poem = stack {
 	    para " 
@@ -238,6 +262,7 @@ Remember a few examples ago when we handled a button click? How about doing the
 	  para(link("Clear").
 	    click { @poem.clear })
 	}
+```
 
 So, when the link gets clicked, the stack gets emptied. The poem will disappear.
 
@@ -247,6 +272,7 @@ So, when the link gets clicked, the stack gets emptied. The poem will disappear.
 
 Okay, last one for now. Let's generate a hundred random circles. This example also uses the rgb method to make colors from red, green and blue fractions.
 
+```ruby
 	Shoes.app(:width => 300,
 	  :height => 400) {
 	  fill rgb(0, 0.6, 0.9, 0.1)
@@ -258,6 +284,7 @@ Okay, last one for now. Let's generate a hundred random circles. This example al
 	      :radius => (25..50).rand
 	  }
 	}
+```
 
 Don't worry if you haven't picked up a whole lot reading through these. To get the hang of it, you'll need to alter these yourself. Try fiddling with the numbers and colors. Experiment, you know?