前端html頁面使用marked點亮你的代碼

一、markdown代碼解析

如果后台給你的數據是markdown數據，你需要使用marked.js先把數據解析成通用格式。目前的marked的最新版本是0.81，最新版請自行查看，可以去bootcsn.cn中搜索使用。
這里只介紹最簡單的引用方式。

• 頭部引用

<script src="https://cdn.bootcss.com/marked/0.8.1/marked.min.js"></script>

• 腳本引用

<script>
    let markdown = document.getElementById('simplemde');
    markdown.innerHTML = marked(markdown.innerHTML);
</script>

這個時候，數據就變成了html格式了。但是沒有語法高亮，如果要語法高亮，請往下看

二、語法高亮工具

highlight.js
官網地址

使用方法

1.獲取highlight.js
# Getting highlight.js
現在最新版本是9.18.1，下面是官方給我的cdn的使用方法，樣式使用的default的顯示方式。

<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.18.1/styles/default.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.18.1/highlight.min.js"></script>

但是我並喜歡他的這種默認的顯示方式， 我這里使用bootcdn的引用方法，使用monokai-sublime的樣式

<link href="https://cdn.bootcss.com/highlight.js/9.18.1/styles/monokai-sublime.min.css" rel="stylesheet">
<script src="https://cdn.bootcss.com/highlight.js/9.18.1/highlight.min.js"></script>

當然這幾種樣式，也許都沒有你喜歡的，你還可以去官網的首頁選擇，你可以選好之后，再去下載就行了。
下面是所有的樣式列表，你還可以在這里選擇並獲取你喜歡的樣式

demo地址：highlight.js demo

2.如何使用
引入了以上的js之后，還需要在加載時調用init突出顯示代碼，如下

<script>hljs.initHighlightingOnLoad();</script>

之后，你網頁中的代碼高亮，就會顯示了。類似於這樣的

三、可能遇到的問題

1. 一開始把代碼放在頁面中，使用js獲取代碼之后，再轉成markdown的代碼之后，某些符號比如">"會被轉成"&gt"的問題。
   該問題，經過多種嘗試，還未解決。如果你有好辦法，樂意的話，可以告知我。
   我的解決方法，就是換成異步獲取代碼的方式。
2. 使用ajax獲取的代碼，在異步改變文檔內容后，代碼不高亮。
   可以使用下面的代碼代替init突出顯示代碼

hljs.initHighlighting();