Vue-cli實現Markdown解析為Html以及highlight高亮程式碼塊
阿新 • • 發佈:2019-01-11
marked用來幹什麼的?
這裡**marked**作為解析器解析為瀏覽器能夠支援的網頁之後,就可以和正常訪問瀏覽器一樣啦。然後這裡有沒有一個小插曲呢,專案經理說,咦,那程式碼塊裡面的樣式都是清一色的,我可以不可以讓它花裡胡哨起來呢?當然沒有問題啦,這裡我們就介紹下一個主角登場。噔噔噔~~~,那就是我們的**Highlight.js**。
用完之後具體的結果是怎麼樣的?
分享僅作參考,如果又不對的可以多多指出來,謝謝。
- 一個功能齊全的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檔案,寫入和自己胃口的樣式。
用完之後具體的結果是怎麼樣的?
- 做完這些之後,頁面差不多就是下面這個樣子
分享僅作參考,如果又不對的可以多多指出來,謝謝。