Add syntax highlighting for markdown content

Gemfile

@@ -93,13 +93,14 @@ gem "js-routes",                                        "1.0.0"
 source "https://rails-assets.org" do
   gem "rails-assets-jquery",                              "1.11.2" # Should be kept in sync with jquery-rails
 
-  gem "rails-assets-markdown-it",                         "4.2.0"
+  gem "rails-assets-markdown-it",                         "4.2.1"
   gem "rails-assets-markdown-it-hashtag",                 "0.3.0"
   gem "rails-assets-markdown-it-diaspora-mention",        "0.3.0"
   gem "rails-assets-markdown-it-sanitizer",               "0.3.0"
   gem "rails-assets-markdown-it--markdown-it-for-inline", "0.1.0"
   gem "rails-assets-markdown-it-sub",                     "1.0.0"
   gem "rails-assets-markdown-it-sup",                     "1.0.0"
+  gem "rails-assets-highlightjs",                         "8.5.0"
 
   # jQuery plugins
 

Gemfile.lock

@@ -489,6 +489,7 @@ GEM
       rails-assets-jquery-fullscreen (~> 1.1.4)
       rails-assets-jquery-ui (~> 1.10.4)
       rails-assets-jquery.slimscroll (~> 1.3.3)
+    rails-assets-highlightjs (8.5.0)
     rails-assets-jakobmattsson--jquery-elastic (1.6.11)
       rails-assets-jquery (>= 1.2.6)
     rails-assets-jasmine (2.3.0)
@@ -513,7 +514,7 @@ GEM
     rails-assets-jquery.slimscroll (1.3.3)
       rails-assets-jquery (>= 1.7)
     rails-assets-markdown-it--markdown-it-for-inline (0.1.0)
-    rails-assets-markdown-it (4.2.0)
+    rails-assets-markdown-it (4.2.1)
     rails-assets-markdown-it-diaspora-mention (0.3.0)
     rails-assets-markdown-it-hashtag (0.3.0)
     rails-assets-markdown-it-sanitizer (0.3.0)
@@ -774,6 +775,7 @@ DEPENDENCIES
   rack-ssl (= 1.4.1)
   rails (= 4.2.1)
   rails-assets-diaspora_jsxc (~> 0.1.1)!
+  rails-assets-highlightjs (= 8.5.0)!
   rails-assets-jakobmattsson--jquery-elastic (= 1.6.11)!
   rails-assets-jasmine-ajax (= 3.1.0)!
   rails-assets-jeresig--jquery.hotkeys (= 0.2.0)!
@@ -783,7 +785,7 @@ DEPENDENCIES
   rails-assets-jquery-simulate (= 1.0.1)!
   rails-assets-jquery-simulate-ext (= 1.3.0)!
   rails-assets-jquery-textchange (= 0.2.3)!
-  rails-assets-markdown-it (= 4.2.0)!
+  rails-assets-markdown-it (= 4.2.1)!
   rails-assets-markdown-it--markdown-it-for-inline (= 0.1.0)!
   rails-assets-markdown-it-diaspora-mention (= 0.3.0)!
   rails-assets-markdown-it-hashtag (= 0.3.0)!

app/assets/javascripts/app/helpers/text_formatter.js

@@ -8,7 +8,8 @@
       breaks:      true,
       html:        true,
       linkify:     true,
-      typographer: true
+      typographer: true,
+      langPrefix:  ""
     });
 
     var inlinePlugin = window.markdownitForInline;
@@ -50,6 +51,23 @@
     var sanitizerPlugin = window.markdownitSanitizer;
     md.use(sanitizerPlugin);
 
+    var hljs = window.hljs;
+    md.set({
+      highlight: function(str, lang) {
+        if (lang && hljs.getLanguage(lang)) {
+          try {
+            return hljs.highlight(lang, str).value;
+          } catch (__) {}
+        }
+
+        try {
+          return hljs.highlightAuto(str).value;
+        } catch (__) {}
+
+        return "";
+      }
+    });
+
     // xmpp: should behave like mailto:
     md.linkify.add("xmpp:","mailto:");
     // mumble:// should behave like http://:

app/assets/javascripts/main.js

@@ -35,6 +35,7 @@
 //= require markdown-it-sanitizer
 //= require markdown-it-sub
 //= require markdown-it-sup
+//= require highlightjs
 //= require clear-form
 //= require app/app
 //= require diaspora

app/assets/stylesheets/application.scss

@@ -92,6 +92,7 @@
 
 /* code */
 @import 'new_styles/code';
+@import 'highlightjs/github';
 
 /* statistics */
 @import 'new_styles/statistics';

spec/javascripts/app/helpers/text_formatter_spec.js

@@ -88,6 +88,26 @@ describe("app.helpers.textFormatter", function(){
     });
   });
 
+  context("highlight", function(){
+    it("works with javascript code", function(){
+      var code = "```js\nfunction test() { return; } //test\n```";
+      expect(this.formatter(code)).toContain("<span class=\"hljs-function\">");
+      expect(this.formatter(code)).toContain("<span class=\"hljs-comment\">");
+    });
+
+    it("works with markdown", function(){
+      var code = "```markdown\n# header\n**strong**\n```";
+      expect(this.formatter(code)).toContain("<span class=\"hljs-header\">");
+      expect(this.formatter(code)).toContain("<span class=\"hljs-strong\">");
+    });
+
+    it("works with ruby code", function(){
+      var code = "```ruby\n# comment\nmodule test\nend\n```";
+      expect(this.formatter(code)).toContain("<span class=\"hljs-comment\">");
+      expect(this.formatter(code)).toContain("<span class=\"hljs-class\">");
+    });
+  });
+
   context("markdown", function(){
     it("autolinks", function(){
       var links = [