Add vue theme

src/render.js

@@ -1,6 +1,8 @@
 import marked from 'marked'
 import Prism from 'prismjs'
+import genToc from './gen-toc'
 
+const toc = []
 const renderer = new marked.Renderer()
 
 /**
@@ -8,19 +10,24 @@ const renderer = new marked.Renderer()
  * @link https://github.com/chjj/marked#overriding-renderer-methods
  */
 renderer.heading = function (text, level) {
-  const escapedText = text.toLowerCase().replace(/[^\w]+/g, '-')
+  const slug = text.toLowerCase().replace(/[\s\n\t]+/g, '-')
 
-  return '<h' + level + '><a name="' + escapedText + '" class="anchor" href="#' +
-     escapedText + '"><span class="header-link"></span></a>' + text +
-     '</h' + level + '>'
+  toc.push({ level, slug, title: text })
+
+  return `<h${level} id="${slug}"><a href="#${slug}" class="anchor"></a>${text}</h${level}>`
 }
-
 marked.setOptions({
+  renderer,
   highlight (code, lang) {
-    return Prism.highlight(code, Prism.languages[lang])
+    return Prism.highlight(code, Prism.languages[lang] || Prism.languages.markup)
   }
 })
 
 export default function (content) {
-  return marked(content, { renderer })
+  const section = `<section class="content">
+    <article class="markdown-section">${marked(content)}</article>
+  </section>`
+  const sidebar = `<aside class="sidebar">${genToc(toc)}</aside>`
+
+  return `<main>${sidebar}${section}</main>`
 }