Add example of how to override the Markdown loader

css/markdown-styles.css

@@ -0,0 +1,9 @@
+.warning {
+  color: #9F6000;
+  background-color: #FEEFB3;
+  padding: 18px;
+}
+.warning:before {
+  content:'\26A0';
+  margin-right: 9px;
+}

loaders/markdown-loader/index.js

@@ -0,0 +1,43 @@
+import frontMatter from 'front-matter'
+import markdownIt from 'markdown-it'
+import hljs from 'highlight.js'
+import objectAssign from 'object-assign'
+
+const highlight = (str, lang) => {
+  if ((lang !== null) && hljs.getLanguage(lang)) {
+    try {
+      return hljs.highlight(lang, str).value
+    } catch (_error) {
+      console.error(_error)
+    }
+  }
+  try {
+    return hljs.highlightAuto(str).value
+  } catch (_error) {
+    console.error(_error)
+  }
+  return ''
+}
+
+const md = markdownIt({
+  html: true,
+  linkify: true,
+  typographer: true,
+  highlight,
+})
+  .use(require('markdown-it-sub'))
+  .use(require('markdown-it-footnote'))
+  .use(require('markdown-it-deflist'))
+  .use(require('markdown-it-abbr'))
+  .use(require('markdown-it-attrs'))
+
+module.exports = function (content) {
+  this.cacheable()
+  const meta = frontMatter(content)
+  const body = md.render(meta.body)
+  const result = objectAssign({}, meta.attributes, {
+    body,
+  })
+  this.value = result
+  return `module.exports = ${JSON.stringify(result)}`
+}

package.json

@@ -13,6 +13,15 @@
   "author": "Kyle Mathews <[email protected]>",
   "license": "MIT",
   "dependencies": {
+    "front-matter": "^2.0.6",
+    "highlight.js": "^9.2.0",
+    "markdown-it": "^6.0.0",
+    "markdown-it-abbr": "^1.0.3",
+    "markdown-it-attrs": "^0.1.8",
+    "markdown-it-deflist": "^2.0.1",
+    "markdown-it-footnote": "^2.0.0",
+    "markdown-it-sub": "^1.0.0",
+    "object-assign": "^4.0.1",
     "react": "^0.14.7",
     "react-document-title": "^2.0.1",
     "react-dom": "^0.14.7",

pages/markdown.md

@@ -24,6 +24,41 @@ And **lots** of other *fun* stuff.
 > They can span multiple paragraphs,
 > if you like.
 
+## Enable additional syntax with Markdown-it plugins
+
+You can add additional Markdown-it plugins with
+a custom markdown loader.
+
+### Subscript
+H~2~0
+
+### Footnote
+Here is an inline note.^[Inlines notes are easier to write, since
+you don't have to pick an identifier and move down to type the
+note.]
+
+### Definition lists
+Term 1
+
+:   Definition 1
+
+Term 2 with *inline markup*
+
+:   Definition 2
+
+        { some code, part of Definition 2 }
+
+    Third paragraph of definition 2.
+
+### Abbriviation
+*[HTML]: Hyper Text Markup Language
+*[W3C]:  World Wide Web Consortium
+The HTML specification
+is maintained by the W3C.
+
+### Add a class or other attributes to content.
+here be dragons {.warning}
+
 ## Some code
 
 Javascript

wrappers/md.js

@@ -1,4 +1,5 @@
 import React from 'react'
+import 'css/markdown-styles.css'
 
 module.exports = React.createClass({
   propTypes () {