highlight.js 可以幫助我們寫出有高亮的 markdown。
其實已經有寫好的 markdown-it 套件,markdown-it-highlightjs
那爲什麼要自己寫一個呢?
不是因為無聊想練習,是因為 markdown-it-highlightjs 這個套件引入了 highlight.js,
而 highlight.js 預設引入所有語言高亮,而我們常用的卻只有幾種而已。
下面程式碼為 markdown-it-highlightjs 的片段,可以看到引入了 highlight.js:
const hljs = require('highlight.js')
接著讓我們看看 highlight.js 的部分程式碼:
var hljs = require('./highlight');
hljs.registerLanguage('1c', require('./languages/1c'));
hljs.registerLanguage('abnf', require('./languages/abnf'));
hljs.registerLanguage('accesslog', require('./languages/accesslog'));
hljs.registerLanguage('actionscript', require('./languages/actionscript'));
hljs.registerLanguage('ada', require('./languages/ada'));
...
...
...
// 這邊一次引入了所有語言
看到這裡你會發現,其實 hightlight.js 引入了全部的語言(很多連看都沒看過)
,而我們在寫 markdown 時,根本不會用到這麼多。
因此才要自己寫一個只引入我們所需要的,
例如:xml, bash, css, javascript, stylus 等等。
npm i highlight.js
新增檔案:./plugins/markdown-it/hljs.js
這個部分就只有引入個人常用的幾種高亮,未來有別的需求時可再自行擴充。
import hljs from'highlight.js/lib/highlight'
import xml from 'highlight.js/lib/languages/xml'
import bash from 'highlight.js/lib/languages/bash'
import css from 'highlight.js/lib/languages/css'
import javascript from 'highlight.js/lib/languages/javascript'
import stylus from 'highlight.js/lib/languages/stylus'
hljs.registerLanguage('xml', xml)
hljs.registerLanguage('bash', bash)
hljs.registerLanguage('css', css)
hljs.registerLanguage('javascript', javascript)
hljs.registerLanguage('stylus', stylus)
export default hljs
新增檔案:./plugins/markdown-it/markdownItHeighlightjs.js
以下程式碼可以略過,
基本上程式碼和 markdown-it-highlightjs 完全相同,
差別在於第一行,我們改成只引入自己所需要的語言種類,大大的減小 highlight.js 大小。
import hljs from'./hljs.js'
const maybe = f => {
try {
return f()
} catch (e) {
return false
}
}
// Highlight with given language.
const highlight = (code, lang) =>
maybe(() => hljs.highlight(lang, code, true).value) || ''
// Highlight with given language or automatically.
const highlightAuto = (code, lang) =>
lang
? highlight(code, lang)
: maybe(() => hljs.highlightAuto(code).value) || ''
// Wrap a render function to add `hljs` class to code blocks.
const wrap = render =>
function (...args) {
return render.apply(this, args)
.replace('<code class="', '<code class="hljs ')
.replace('<code>', '<code class="hljs">')
}
const highlightjs = (md, opts) => {
opts = Object.assign({}, highlightjs.defaults, opts)
md.options.highlight = opts.auto ? highlightAuto : highlight
md.renderer.rules.fence = wrap(md.renderer.rules.fence)
if (opts.code) {
md.renderer.rules.code_block = wrap(md.renderer.rules.code_block)
}
}
highlightjs.defaults = {
auto: true,
code: true
}
export default highlightjs
修改檔案:./plugins/markdown-it/index.js
加入自行撰寫的 markdownItHighlightjs 套件。
import Vue from 'vue'
import MarkdownIt from 'markdown-it'
import markdownItAttrs from 'markdown-it-attrs'
import markdownItPlayground from 'markdown-it-playground'
import markdownItHighlightjs from './markdownItHighlightjs'
const md = new MarkdownIt({
html: true,
linkify: true,
typographer: true,
langPrefix: 'blog-'
})
md.use(markdownItAttrs)
md.use(markdownItPlayground)
md.use(markdownItHighlightjs)
Vue.use({
install (Vue, options) {
Vue.prototype.$md = md
}
})
目前還只是片斷程式碼,無法看到畫面。
指令:
git clone -b 015-markdown-it-highlight-js --single-branch https://github.com/hunterliu1003/blog.git
cd blog
npm install