Perform syntax highlighting

Author: rstacruz

lib/fix_html.js

@@ -0,0 +1,49 @@
+'use strict'
+
+const cheerio = require('cheerio')
+const hljs = require('highlight.js')
+
+/**
+ * Performs syntax highlighting and stuff.
+ */
+
+module.exports = function fixHtml (html) {
+  const $ = cheerio.load(html)
+  syntaxHighlight($)
+  return $.html()
+}
+
+/**
+ * Performs syntax highlighting via highlight.js. Given parameter `$` is a
+ * cheerio object that it will modify in place.
+ */
+
+function syntaxHighlight ($) {
+  $('pre > code[class]').each(function () {
+    const $this = $(this)
+    const langs = $this.attr('class').split(' ').filter((c) => /^lang-/.test(c))
+    const lang = langs && langs[0].substr(5) // 'lang-js' => 'js'
+
+    // Mappings of marked-to-github classes.
+    const dict = {
+      'hljs-string': 'pl-s',
+      'hljs-comment': 'pl-c',
+      'hljs-keyword': 'pl-k',
+      'hljs-attribute': 'pl-e',
+      'hljs-built_in': 'pl-c1',
+      'hljs-title': 'pl-ent',
+      'hljs-value': 'pl-s',
+      'hljs-literal': 'pl-c1'
+    }
+
+    let html = $this.text()
+    html = hljs.highlight(lang, html).value
+    $this.html(html)
+
+    $this.find('[class^="hljs-"]').each(function () {
+      let $$this = $(this)
+      var synonym = dict[$$this.attr('class')]
+      if (synonym) $$this.attr('class', synonym)
+    })
+  })
+}

lib/index.js

@@ -1,9 +1,12 @@
+'use strict'
+
 const ware = require('ware')
 const each = require('lodash/collection/each')
 const marked = require('marked')
 
 const tocify = require('./tocify')
 const indexify = require('./indexify')
+const fixHtml = require('./fix_html')
 
 module.exports = function (options) {
   var app = ware()
@@ -75,9 +78,11 @@ function renderMarkdown (files, ms, done) {
   // render each page
   each(pages, (page, fname) => {
     const file = files[page.source]
+    const html = marked(file.contents.toString(), { gfm: true, tables: true })
+
     file._processed = true
     file.markdown = file.contents
-    file.html = marked(file.markdown.toString(), { gfm: true, tables: true })
+    file.html = fixHtml(html)
     file.title = page.title
     file.source = page.source
     file.slug = page.slug

package.json

@@ -7,6 +7,7 @@
     "url": "https://github.com/docpress/docpress-core/issues"
   },
   "dependencies": {
+    "cheerio": "0.19.0",
     "lodash": "3.10.1",
     "marked": "0.3.5",
     "metalsmith": "2.1.0",

test/index/pre_test.js

@@ -0,0 +1,31 @@
+const compile = require('../../index')()
+
+describe('index/pre:', function () {
+  beforeEach(function (done) {
+    var ms = {
+      metadata () { return { docs: 'docs' } }
+    }
+
+    this.files = {
+      'docs/README.md': {
+        contents: '* [Readme](/README.md)\n'
+      },
+      'README.md': {
+        contents: '```js\nwindow.alert()\n```'
+      }
+    }
+
+    compile(this.files, ms, (err) => {
+      if (err) throw err
+      done()
+    })
+  })
+
+  it('renders index.html with syntax highlighting', function () {
+    const idx = this.files['index.html']
+    expect(idx.contents).toEqual(
+      '<pre><code class="lang-js">' +
+      '<span class="pl-c1">window</span>.alert()\n' +
+      '</code></pre>\n')
+  })
+})

test/index/pre_with_quotes_test.js

@@ -0,0 +1,31 @@
+const compile = require('../../index')()
+
+describe('index/pre with quotes:', function () {
+  beforeEach(function (done) {
+    var ms = {
+      metadata () { return { docs: 'docs' } }
+    }
+
+    this.files = {
+      'docs/README.md': {
+        contents: '* [Readme](/README.md)\n'
+      },
+      'README.md': {
+        contents: '```js\nalert(\'hi\')\n```'
+      }
+    }
+
+    compile(this.files, ms, (err) => {
+      if (err) throw err
+      done()
+    })
+  })
+
+  it('renders index.html with syntax highlighting', function () {
+    const idx = this.files['index.html']
+    expect(idx.contents).toEqual(
+      '<pre><code class="lang-js">' +
+      'alert(<span class="pl-s">&apos;hi&apos;</span>)\n' +
+      '</code></pre>\n')
+  })
+})

test/todo_test.js

@@ -23,7 +23,7 @@ describe('to do', function () {
 
   describe('transforming html', function () {
     it('transforming links in document')
-    it('highlight it already')
+    it('syntax highlighting', done)
   })
 })