From 0cffa00004cb495d4d4acdd8792254a51cbe457b Mon Sep 17 00:00:00 2001 From: Steffen van Bergerem Date: Sat, 2 May 2015 16:36:18 +0200 Subject: [PATCH] Add syntax highlighting for markdown content --- Gemfile | 3 ++- Gemfile.lock | 6 ++++-- .../javascripts/app/helpers/text_formatter.js | 20 ++++++++++++++++++- app/assets/javascripts/main.js | 1 + app/assets/stylesheets/application.scss | 1 + .../app/helpers/text_formatter_spec.js | 20 +++++++++++++++++++ 6 files changed, 47 insertions(+), 4 deletions(-) diff --git a/Gemfile b/Gemfile index ca874f6c5..56eaad7fb 100644 --- a/Gemfile +++ b/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 diff --git a/Gemfile.lock b/Gemfile.lock index 06e3e877c..81c12beb8 100644 --- a/Gemfile.lock +++ b/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)! diff --git a/app/assets/javascripts/app/helpers/text_formatter.js b/app/assets/javascripts/app/helpers/text_formatter.js index 5bdfd5830..163f938ed 100644 --- a/app/assets/javascripts/app/helpers/text_formatter.js +++ b/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://: diff --git a/app/assets/javascripts/main.js b/app/assets/javascripts/main.js index 452235f9b..7114600e6 100644 --- a/app/assets/javascripts/main.js +++ b/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 diff --git a/app/assets/stylesheets/application.scss b/app/assets/stylesheets/application.scss index 4d3bd3df3..a4f8ce423 100644 --- a/app/assets/stylesheets/application.scss +++ b/app/assets/stylesheets/application.scss @@ -92,6 +92,7 @@ /* code */ @import 'new_styles/code'; +@import 'highlightjs/github'; /* statistics */ @import 'new_styles/statistics'; diff --git a/spec/javascripts/app/helpers/text_formatter_spec.js b/spec/javascripts/app/helpers/text_formatter_spec.js index ff9dafaf0..04c18a9f4 100644 --- a/spec/javascripts/app/helpers/text_formatter_spec.js +++ b/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(""); + expect(this.formatter(code)).toContain(""); + }); + + it("works with markdown", function(){ + var code = "```markdown\n# header\n**strong**\n```"; + expect(this.formatter(code)).toContain(""); + expect(this.formatter(code)).toContain(""); + }); + + it("works with ruby code", function(){ + var code = "```ruby\n# comment\nmodule test\nend\n```"; + expect(this.formatter(code)).toContain(""); + expect(this.formatter(code)).toContain(""); + }); + }); + context("markdown", function(){ it("autolinks", function(){ var links = [