From ae0397d40d2a72af888a6b1701dacc7ba4e0a2f1 Mon Sep 17 00:00:00 2001
From: viko16 <16viko@gmail.com>
Date: Sun, 27 Nov 2016 21:23:21 +0800
Subject: [PATCH] feat: improve marked render

---
 src/utils/render.js | 37 +++++++++++++++++++++++++++++++++++++
 src/views/Post.vue  | 13 +------------
 2 files changed, 38 insertions(+), 12 deletions(-)
 create mode 100644 src/utils/render.js

diff --git a/src/utils/render.js b/src/utils/render.js
new file mode 100644
index 0000000..0b45e8a
--- /dev/null
+++ b/src/utils/render.js
@@ -0,0 +1,37 @@
+import marked from 'marked'
+import Prism from 'prismjs'
+
+// https://github.com/chjj/marked#overriding-renderer-methods
+const renderer = new marked.Renderer()
+
+/**
+ * modify anchor tag for Non-English languages
+ *
+ * @override
+ * @param {any} text
+ * @param {any} level
+ * @returns
+ */
+renderer.heading = (text, level) => {
+  const slug = text.replace(/<(?:.|\n)*?>/gm, '').toLowerCase().replace(/[\s\n\t]+/g, '-')
+  return `<h${level} id="${slug}">${text}</h${level}>`
+}
+/**
+ * highlight my code
+ *
+ * @override
+ * @param {any} code
+ * @param {any} lang
+ * @returns
+ */
+renderer.code = (code, lang) => {
+  const highlight = Prism.highlight(code, Prism.languages[lang] || Prism.languages.javascript)
+  return `<pre><code class="lang-${escape(lang, true)}">${highlight}</code></pre>`
+}
+marked.setOptions({
+  renderer,
+  breaks: true,
+  gfm: true
+})
+
+export default marked
diff --git a/src/views/Post.vue b/src/views/Post.vue
index a112437..9d1610a 100644
--- a/src/views/Post.vue
+++ b/src/views/Post.vue
@@ -13,19 +13,8 @@
   import Vue from 'vue'
   import api from '../api'
   import conf from '../conf.json'
-  import marked from 'marked'
-  import Prism from 'prismjs'
   import fm from 'front-matter'
-
-  // https://github.com/chjj/marked#options-1
-  marked.setOptions({
-    highlight (code, lang) {
-      // http://prismjs.com/extending.html#api
-      return Prism.highlight(code, Prism.languages[lang] || Prism.languages.javascript)
-    },
-    breaks: true,
-    gfm: true
-  })
+  import marked from '../utils/render.js'
 
   export default {
     name: 'postView',