Highlight markdown syntax in .md files using Redcarpet+CodeRay

Currently, there are something like three ways we do syntax highlighting in this app: In .step files, you can have a 'source_code' step that specifies a language parameter. This makes a <pre class='code'> tag that contains the language name as ':::ruby', to be scooped out by Rack::Codehighlighter. In .deck.md files, you can use Github-flavored "```ruby" style 'fenced code blocks', which get parsed by redcarpet into <pre><code> blocks, which inexplicably and briefly have an '@@@ ruby' directive that is picked up by the Rack::Codehighlighter middleware. In .md files (as of this diff) you can do Github-flavored fenced code blocks, which are parsed in the original render time into <pre class='CodeRay'> blocks that have the real syntax highlighting. 'Fenced code blocks' produced in Markdown-aware erector functions (like 'message') don't seem to produce highlighted code. Will probably improve on this in a subsequent diff.
btelles · Jan 30, 2013 · 93322f7 · 93322f7
1 parent 7960229
commit 93322f7
Show file tree

Hide file tree

Showing 9 changed files with 141 additions and 73 deletions.
diff --git a/Gemfile b/Gemfile
@@ -10,6 +10,7 @@ gem 'rack-codehighlighter'
 gem 'coderay'
 gem "deckrb", ">=0.3.0"
 gem "sass"
+gem "redcarpet"
 
 group :development do
   gem "wrong", ">=0.6.2"

diff --git a/Gemfile.lock b/Gemfile.lock
@@ -9,7 +9,7 @@ GEM
     ZenTest (4.7.0)
     bourbon (1.4.0)
       sass (>= 3.1)
-    coderay (1.0.5)
+    coderay (1.0.8)
     daemons (1.1.8)
     deckrb (0.3.0)
       coderay
@@ -29,11 +29,11 @@ GEM
       tins (~> 0.3)
     files (0.3.0)
     json (1.6.6)
-    nokogiri (1.5.2)
-    nokogiri (1.5.2-x86-mingw32)
+    nokogiri (1.5.6)
+    nokogiri (1.5.6-x86-mingw32)
     polyglot (0.3.3)
     predicated (0.2.6)
-    rack (1.4.1)
+    rack (1.5.1)
     rack-codehighlighter (0.5.0)
       nokogiri (>= 1.4.1)
       rack (>= 1.0.0)
@@ -105,6 +105,7 @@ DEPENDENCIES
   rack-test
   rake
   rdiscount
+  redcarpet
   rerun
   rspec
   sass

diff --git a/config.ru b/config.ru
@@ -1,9 +1,6 @@
 require 'rack/codehighlighter'
 require 'coderay'
 
-# Fix Rack bug https://github.com/rack/rack/issues/301
-require './lib/rack_static_patch'
-
 use Rack::ShowExceptions
 use Rack::ShowStatus
 use Rack::Static, :urls => ["/css", "/img"], :root => "public"
@@ -13,7 +10,6 @@ use Rack::Codehighlighter, :coderay,
   :markdown => true,
   :pattern => /\A[:@]{3}\s?(\w+)\s*(\n|&#x000A;)/i
 
-
 # require 'thin/logging'
 # Thin::Logging.debug = true
 

diff --git a/lib/markdown_page.rb b/lib/markdown_page.rb
@@ -1,8 +1,27 @@
 require 'erector'
 require 'doc_page'
+require 'redcarpet'
+require 'coderay'
+
+class HTMLwithCodeRay < Redcarpet::Render::HTML
+  def block_code(code, language)
+    if language
+      "<pre class='CodeRay'>#{CodeRay.scan(code, language).html}</pre>"
+    else
+      "<pre class='CodeRay'>#{CodeRay.scan(code, :text).html}</pre>"
+    end
+  end
+end
+
+MarkdownRenderer = Redcarpet::Markdown.new(
+    HTMLwithCodeRay,
+    :autolink => true,
+    :space_after_headers => true,
+    :fenced_code_blocks => true
+)
 
 class MarkdownPage < DocPage
   def doc_content
-    rawtext md2html(src)
+    rawtext MarkdownRenderer.render(src)
   end
 end
diff --git a/lib/rack_static_patch.rb b/lib/rack_static_patch.rb
diff --git a/sites/frontend/html_quick_reference.md b/sites/frontend/html_quick_reference.md
@@ -1,75 +1,94 @@
 ## HTML Skeleton
-    <!DOCTYPE html>
-    <html>
-      <head>
-        <meta charset="utf-8">
-        <title>Title</title>
-      </head>
-      <body>
-
-      </body>
-    </html>
+
+```html
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>Title</title>
+  </head>
+  <body>
+
+  </body>
+</html>
+```
 
 ## Headers
-    <h1>Header</h1>
-    <h2>Header</h2>
-    <h2>Header</h2>
-    <h4>Header</h4>
-    <h5>Header</h5>
-    <h6>Header</h6>
+```html
+<h1>Header</h1>
+<h2>Header</h2>
+<h2>Header</h2>
+<h4>Header</h4>
+<h5>Header</h5>
+<h6>Header</h6>
+```
 
 ## Paragraphs and more
-    <p>Paragraph content.</p>
-    <em>emphasized content, styled italic by default</em>
-    <strong>strong content, styled bold by default</strong>
+```html
+<p>Paragraph content.</p>
+<em>emphasized content, styled italic by default</em>
+<strong>strong content, styled bold by default</strong>
+```
 
 ## Images
-    <img src="name-of-my-image.png">
-    <img src="http://www.othersite.com/image-name.jpg">
+```html
+<img src="name-of-my-image.png">
+<img src="http://www.othersite.com/image-name.jpg">
+```
 
 ## Links
-    <a href="#anchor">Scroll to element on the current page with id "anchor"</a>
-    <a href="my-other-page.html">Go to a page on my site</a>
-    <a href="my-other-page.html" target="_blank">Open a new window for a page on my site</a>
-    <a href="http://www.othersite.com/">Go to a page on some other site</a>
-    <a href="http://www.othersite.com/" target="_blank">Open a new window for a page on some other site</a>
+```html
+<a href="#anchor">Scroll to element on the current page with id "anchor"</a>
+<a href="my-other-page.html">Go to a page on my site</a>
+<a href="my-other-page.html" target="_blank">Open a new window for a page on my site</a>
+<a href="http://www.othersite.com/">Go to a page on some other site</a>
+<a href="http://www.othersite.com/" target="_blank">Open a new window for a page on some other site</a>
+```
 
 ## Lists
 
 Lists can be ordered (styled with numbers by default) or unordered (styled with bullets by default). Both contain list items with the actual content of the list.
 
-    <ol>
-      <li>First list item</li>
-      <li>Second list item</li>
-    </ol>
+```html
+<ol>
+  <li>First list item</li>
+  <li>Second list item</li>
+</ol>
 
-    <ul>
-      <li>One list item</li>
-      <li>Another list item</li>
-    </ul>
+<ul>
+  <li>One list item</li>
+  <li>Another list item</li>
+</ul>
+```
 
 Lists can be nested.
 
+```html
+<ul>
+  <li>One list item
     <ul>
-      <li>One list item
-        <ul>
-          <li>A list item nested under "One list item"</li>
-          <li>Another nest list item</li>
-        </ul>
-      </li>
-      <li>Another list item</li>
+      <li>A list item nested under "One list item"</li>
+      <li>Another nest list item</li>
     </ul>
+  </li>
+  <li>Another list item</li>
+</ul>
+```
 
 ## Containers
 
 Divs and spans are generic containers used to organize HTML. Often, they are given ids and classes so that they can be given specific styling.
 
-    <div>The content in the div</div>
-    <span>span content</span>
+```html
+<div>The content in the div</div>
+<span>span content</span>
+```
 
 ## Ids and Classes
 
-Ids and classes provide a way to use CSS to target specific element(s). Many tags can have the same class. Only one tag can have a particular id. Any tag can be gi
-an id and classes.</p>
-    <tagname id="a-name-uniquely-identifying-this-element">content</tagname>
-    <tagname class="one-class another-class">content</tagname>
+Ids and classes provide a way to use CSS to target specific element(s). Many tags can have the same class. Only one tag can have a particular id. Any tag can be given an id and classes.
+
+```html
+<tagname id="a-name-uniquely-identifying-this-element">content</tagname>
+<tagname class="one-class another-class">content</tagname>
+```
diff --git a/spec/markdown_spec.rb b/spec/markdown_spec.rb
@@ -0,0 +1,45 @@
+here = File.expand_path File.dirname(__FILE__)
+require "#{here}/spec_helper"
+
+require "markdown_page"
+
+describe MarkdownPage do
+
+  it "renders markdown into html" do
+    src = <<MARKDOWN
+# This is a heading
+
+## This is a subheading
+    <h2>This text is preformatted and escaped</h2>
+
+```html
+This text is preformatted and ready to be <strong>syntax highlighted</strong> as HTML source.
+```
+MARKDOWN
+
+    page = MarkdownPage.new(
+        src: src,
+        site_name: "greetings",
+        page_name: 'hello',
+        doc_title: "Hello",
+        doc_path: "/tmp/hello.step"
+    )
+    html_doc = Nokogiri.parse(page.to_html)
+    main_html = html_doc.css(".main").first.serialize(:save_with => 0).chomp
+
+    expected = <<HTML
+<div class="main">
+  <h1 class="doc_title">Hello</h1>
+  <div class="doc">
+    <h1>This is a heading</h1>
+    <h2>This is a subheading</h2>
+    <pre class="CodeRay">&lt;h2&gt;This text is preformatted and escaped&lt;/h2&gt;\n</pre>
+    <pre class="CodeRay">This text is preformatted and ready to be <span class="tag">&lt;strong&gt;</span>syntax highlighted<span class="tag">&lt;/strong&gt;</span> as HTML source.</pre>
+  </div>
+</div>
+HTML
+
+    assert_loosely_equal(main_html, expected)
+  end
+end
+
diff --git a/spec/spec_helper.rb b/spec/spec_helper.rb
@@ -6,6 +6,10 @@
 require "wrong/adapters/rspec"
 require "nokogiri"
 
+def assert_loosely_equal lhs, rhs
+  assert { lhs.gsub(/\n\s*/, '') == rhs.gsub(/\n\s*/, '') }
+end
+
 require "files"
 include Files   # todo: include this in an RSpec config block instead
 
diff --git a/spec/step_spec.rb b/spec/step_spec.rb
@@ -3,10 +3,6 @@
 
 require "step_page"
 
-def assert_loosely_equal lhs, rhs
-  assert { lhs.gsub(/\n\s*/, '') == rhs.gsub(/\n\s*/, '') }
-end
-
 describe Step do
 
   def to_html nokogiri_node