Vue-cli實現Markdown解析爲Html以及highlight高亮代碼塊

marked用來幹什麼的？

• 一個功能齊全的markdown解析器和編譯器，用JavaScript編寫。速度建成。

marked該怎麼使用？

• 安裝

npm install -g marked       //全局安裝

• 使用

<template>
    <div v-html="compiledMarkdown"></div>
</template>

<script>
    let marked = require('marked');
    let hljs = require('highlight.js');
    import 'highlight.js/styles/default.css';

    marked.setOptions({
    renderer: new marked.Renderer(),
    gfm: true,
    tables: true,
    breaks: false,
    pedantic: false,
    sanitize: false,
    smartLists: true,
    smartypants: false,
    highlight: function (code, lang) {
          if (lang && hljs.getLanguage(lang)) {    
            return hljs.highlight(lang, code, true).value;
          } else {
            return hljs.highlightAuto(code).value;
          }
      }
  });

   export default{
     name: 'test', 
    computed: {
        compiledMarkdown() {
        let detail = '當馬孔多在《聖經》所載那種龍捲風的怒號中化做可怕的瓦礫與塵埃漩渦時，奧雷里亞諾爲避免在熟知的事情上浪費時間又跳過十一頁 `test` 預言他正在破解羊皮卷的最後一頁，宛如他正在會言語的鏡中照影。他再次跳讀去尋索本身死亡的日期和情形，但沒等看到最後一行便已明白本身不會再走出這房間，由於能夠預料這座鏡子之城——或蜃景之城——將在奧雷里亞諾·巴比倫所有譯出羊皮卷之時被颶風抹去 `test`、`test` 兩大應用系統，讓開發者更好、更快、更方便開發移動應用。\n\n';
        return marked(detail || '', {
          sanitize: true
        });
      }
    }
   }
</script>

這裏marked做爲解析器解析爲瀏覽器可以支持的網頁以後，就能夠和正常訪問瀏覽器同樣啦。而後這裏有沒有一個小插曲呢，項目經理說，咦，那代碼塊裏面的樣式都是清一色的，我能夠不能夠讓它花裏胡哨起來呢？固然沒有問題啦，這裏咱們就介紹下一個主角登場。噔噔噔~~~，那就是咱們的Highlight.js。

• Highlight是一款可以輸出html高亮代碼的軟件。支持159種程序語言，具體請看：http://www.andre-simon.de/doku/highlight/en/langs.html 內置多種高亮主題，總有一款樣式是你喜歡的。
• 若是以上樣式還有不知足我的項目需求的，能夠本身動手新建一個css文件，寫入和本身胃口的樣式。

用完以後具體的結果是怎麼樣的？

• 作完這些以後，頁面差很少就是下面這個樣子

分享僅做參考，若是又不對的能夠多多指出來，謝謝。