Merge pull request #196 from dgeb/coderay-handlebars

Custom handlebars syntax highlighter for coderay

Author: wagenet

Gemfile

@@ -4,7 +4,7 @@ gem "redcarpet"
 gem "activesupport"
 gem "highline"
 gem "rake"
-gem "coderay"
+gem "coderay", :git => "git://github.com/dgeb/coderay.git", :branch => "handlebars"
 gem "middleman", '~> 3.0'
 gem "middleman-blog", "~> 3.0"
 gem "thin"

Gemfile.lock

@@ -1,3 +1,10 @@
+GIT
+  remote: git://github.com/dgeb/coderay.git
+  revision: 73767aa80301ef5de74f625d597dde5cd940e74d
+  branch: handlebars
+  specs:
+    coderay (1.0.8.rc1)
+
 GEM
   remote: http://rubygems.org/
   specs:
@@ -6,7 +13,6 @@ GEM
       multi_json (~> 1.0)
     builder (3.1.3)
     chunky_png (1.2.5)
-    coderay (1.0.7)
     coffee-script (2.2.0)
       coffee-script-source
       execjs
@@ -119,7 +125,7 @@ PLATFORMS
 DEPENDENCIES
   activesupport
   builder
-  coderay
+  coderay!
   highline
   listen
   middleman (~> 3.0)

lib/highlighter.rb

@@ -11,10 +11,7 @@ def registered(app)
 
   module Helpers
     def _highlight(string, language, class_name=nil)
-      language_class = language
-      language = 'html' if language == 'handlebars'
-
-      result = %Q{<div class="highlight #{language_class} #{class_name}">}
+      result = %Q{<div class="highlight #{language} #{class_name}">}
       result += '<div class="ribbon"></div>'
       code = string.gsub(/^\n+/, '').rstrip
       code = CodeRay.scan(code, language)
@@ -23,7 +20,7 @@ def _highlight(string, language, class_name=nil)
                       line_number_anchors: false
 
       result += %Q{</div>}
-      result 
+      result
     end
 
     def highlight(language, class_name, &block)

source/about.html.erb

@@ -71,21 +71,18 @@ App.Person = DS.Model.extend({
 
 App.peopleController = Em.ArrayController.create({
   content: App.Person.findAll()
-});<% end %>
+});
+<% end %>
 
-  <% highlight :html, :right do %>
+<% highlight :handlebars, :right do %>
 <h1>People</h1>
 
 <ul>
 {{#each peopleController}}
   <li>Hello, <b>{{fullName}}</b>!</li>
 {{/each}}
 </ul>
-
-
-
-
- <% end %>
+<% end %>
 
 </div>
 

source/docs/handlebars.md

@@ -667,42 +667,42 @@ Ember comes pre-packaged with a set of views for building a few basic controls l
 They are:
 
 ####Ember.Checkbox
-	
+
 ```handlebars
-    <label>
-      {{view Ember.Checkbox checkedBinding="content.isDone"}}
-      {{content.title}}
-    </label>
+<label>
+  {{view Ember.Checkbox checkedBinding="content.isDone"}}
+  {{content.title}}
+</label>
 ```
-	
+
 ####Ember.TextField
-	
+
 ```javascript
-	App.MyText = Ember.TextField.extend({
-	    formBlurredBinding: 'App.adminController.formBlurred',
-	    change: function(evt) {
-	      this.set('formBlurred', true);
-	    }
-	  });
+App.MyText = Ember.TextField.extend({
+    formBlurredBinding: 'App.adminController.formBlurred',
+    change: function(evt) {
+      this.set('formBlurred', true);
+    }
+  });
 ```
-	
+
 ####Ember.Select
-	
+
 ```handlebars
-	{{view Ember.Select viewName="select"
-                          contentBinding="App.peopleController"
-                          optionLabelPath="content.fullName"
-                          optionValuePath="content.id"
-                          prompt="Pick a person:"
-                          selectionBinding="App.selectedPersonController.person"}}
+{{view Ember.Select viewName="select"
+                    contentBinding="App.peopleController"
+                    optionLabelPath="content.fullName"
+                    optionValuePath="content.id"
+                    prompt="Pick a person:"
+                    selectionBinding="App.selectedPersonController.person"}}
 ```
-	
+
 ####Ember.TextArea
-	
+
 ```javascript
-	var textArea = Ember.TextArea.create({
-      		valueBinding: 'TestObject.value'
-    		});
+var textArea = Ember.TextArea.create({
+  valueBinding: 'TestObject.value'
+});
 ```
 
 
@@ -714,29 +714,26 @@ Example:
 
 ```javascript
 App.MyText = Ember.TextField.extend({
-    formBlurredBinding: 'App.adminController.formBlurred',
-    change: function(evt) {
-      this.set('formBlurred', true);
-    }
-  });
+  formBlurredBinding: 'App.adminController.formBlurred',
+  change: function(evt) {
+    this.set('formBlurred', true);
+  }
+});
 ```
 
-You can then use this view as a sub view and capture the events.  In the following example, a change to the Name input would blurr the form and cause the save button to appear.
-
-```handlebars
-<script id="formDetail" data-template-name='formDetail' type="text/x-handlebars">
-    <form>
-        <fieldset>
-           <legend>Info:</legend>                 
-           
-                   {{view App.MyText name="Name" id="Name"  valueBinding="myObj.Name"}} 
-	               <label for="Name">Name</label><br/>
-                   
-                   {{#if formBlurred}}
-                    <a href="#" {{action "syncData" on="click"}}>Save</a>
-                    {{/if}}
-               
-        </fieldset>
-    </form>
-</script>
+You can then use this view as a sub view and capture the events.  In the following example, a change to the Name input would blur the form and cause the save button to appear.
+
+```handlebars
+<form>
+  <fieldset>
+    <legend>Info:</legend>
+
+    {{view App.MyText name="Name" id="Name"  valueBinding="myObj.Name"}}
+    <label for="Name">Name</label><br/>
+
+    {{#if formBlurred}}
+      <a href="#" {{action "syncData" on="click"}}>Save</a>
+    {{/if}}
+  </fieldset>
+</form>
 ```

source/stylesheets/highlight.css.scss

@@ -22,13 +22,16 @@ $border-radius: 5px;
 		height: 20px;
 	}
 
-	&.javascript .ribbon {
-		background-image: url(/images/js-ribbon.png);
-	}
-
-	&.html .ribbon {
-		background-image: url(/images/html-ribbon.png);
-	}
+    &.javascript .ribbon {
+      background-image: url(/images/js-ribbon.png);
+    }
+    &.html .ribbon {
+      background-image: url(/images/html-ribbon.png);
+    }
+    /* TODO - create custom handlebars-ribbon.png */
+    &.handlebars .ribbon {
+      background-image: url(/images/html-ribbon.png);
+    }
 }
 
 .CodeRay {
@@ -53,7 +56,7 @@ $border-radius: 5px;
 
 /* HTML */
 .CodeRay {
-	.tag {
+	.tag, .error {
 		color: red;
 	}