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 安裝

npm i highlight.js

新增 markdown-it 的 highlight.js 套件

hljs.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

markdonwItHighlightjs.js

新增檔案：./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
  }
})

程式碼放在以下 branch：

目前還只是片斷程式碼，無法看到畫面。

015-markdown-it-highlight-js

指令：

git clone -b 015-markdown-it-highlight-js --single-branch https://github.com/hunterliu1003/blog.git
cd blog
npm install