feat: improve marked render

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

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',