1. 程式人生 > >Vue-cli實現Markdown解析為Html以及highlight高亮程式碼塊

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檔案,寫入和自己胃口的樣式。

 用完之後具體的結果是怎麼樣的?


  • 做完這些之後,頁面差不多就是下面這個樣子




分享僅作參考,如果又不對的可以多多指出來,謝謝。