detect the lang automatically

Author: ravenq

package.json

@@ -1,6 +1,6 @@
 {
   "name": "markdown-it-vue",
-  "version": "1.0.10",
+  "version": "1.0.11",
   "private": false,
   "description": "The vue lib for markdown-it",
   "author": {
@@ -28,17 +28,17 @@
   },
   "main": "dist/markdown-it-vue.umd.min.js",
   "dependencies": {
-    "echarts": "^4.3.0",
-    "flowchart.js": "^1.12.0",
+    "echarts": "^4.5.0",
+    "flowchart.js": "^1.13.0",
     "github-markdown-css": "^3.0.1",
+    "highlight.js": "^9.16.2",
     "markdown-it": "^10.0.0",
     "markdown-it-abbr": "^1.0.4",
     "markdown-it-container": "^2.0.0",
     "markdown-it-deflist": "^2.0.3",
     "markdown-it-emoji": "^1.4.0",
     "markdown-it-footnote": "^3.0.1",
     "markdown-it-github-toc": "^3.2.4",
-    "markdown-it-highlight": "^0.2.0",
     "markdown-it-icons": "^0.4.1",
     "markdown-it-ins": "^3.0.0",
     "markdown-it-katex": "^2.0.3",
@@ -49,15 +49,15 @@
     "markdown-it-sup": "^1.0.0",
     "markdown-it-task-lists": "^2.1.1",
     "markdown-it-toc-and-anchor": "^4.1.2",
-    "mermaid": "^8.3.0",
+    "mermaid": "^8.4.3",
     "vue": "^2.6.6"
   },
   "devDependencies": {
-    "@vue/cli-plugin-babel": "^3.8.0",
-    "@vue/cli-plugin-eslint": "^3.8.0",
-    "@vue/cli-service": "^3.8.0",
+    "@vue/cli-plugin-babel": "^4.1.1",
+    "@vue/cli-plugin-eslint": "^4.1.1",
+    "@vue/cli-service": "^4.1.1",
     "babel-eslint": "^10.0.1",
-    "eslint": "^6.4.0",
+    "eslint": "^6.7.2",
     "eslint-plugin-vue": "^5.0.0",
     "vue-cli-plugin-component-lib": "^0.1.6",
     "vue-template-compiler": "^2.5.21"

src/markdown-it-highlight.js

@@ -0,0 +1,16 @@
+import 'highlight.js/styles/atom-one-light.css'
+
+import hljs from 'highlight.js'
+
+const highlightPlugin = md => {
+  md.renderer.rules.fence = (tokens, idx) => {
+    const token = tokens[idx]
+    const code = token.content.trim()
+    const lang = token.info ? [token.info] : undefined
+    return `<pre><code class="hljs">${
+      hljs.highlightAuto(code, lang).value
+    }</code></pre>`
+  }
+}
+
+export default highlightPlugin

src/markdown-it-vue.vue

@@ -15,7 +15,6 @@ import MarkdownItMark from 'markdown-it-mark'
 import MarkdownItKatex from 'markdown-it-katex'
 import MarkdownItTasklists from 'markdown-it-task-lists'
 import MarkdownItIcons from 'markdown-it-icons'
-import MarkdownItHighlight from 'markdown-it-highlight'
 import MarkdownItLatex from 'markdown-it-latex'
 import MarkdownItContainer from 'markdown-it-container'
 import MarkdownItGithubToc from 'markdown-it-github-toc'
@@ -24,10 +23,10 @@ import MarkdownItLinkAttributes from './markdown-it-link-attributes'
 import MarkdownItEcharts from './markdown-it-plugin-echarts'
 import MarkdownItMermaid from './markdown-it-plugin-mermaid'
 import MarkdownItFlowchart from './markdown-it-plugin-flowchart'
+import MarkdownItHighlight from './markdown-it-highlight'
 import 'github-markdown-css'
 import 'markdown-it-latex/dist/index.css'
 import 'markdown-it-icons/dist/index.css'
-import 'markdown-it-highlight/dist/index.css'
 
 import echarts from 'echarts'
 import mermaid from 'mermaid'