整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
亮插件主要可以讓<pre></pre>標簽里面的代碼高亮，就跟編輯器里顯示的一樣，有利于閱讀，有利于用戶體驗，常用的highlight.js ，這里要說的是更加輕量的選擇——Prism.js
為什么選擇 Prism.js ？
極致易用
引用 prism.css 和 prism.js，使用合適的 HTML5 標簽（code.language-xxxx），搞定！
天生伶俐
語言的 CSS 類是可繼承的，所以你只需定義一次就能應用到多個代碼片段。
輕如鴻毛
代碼壓縮后只有 1.6KB。每添加一個語言平均增加 0.3-0.5KB，主題在 1KB 左右。
快如閃電
如果可能，支持通過 Web Workers 實現并行。
輕松擴展
定義新語言或擴展現有語法，或者新增功能都非常簡單。
豐富樣式
所有的樣式通過 CSS 完成，并使用合理的類名如：.comment, .string, .property 等。
有誰在使用？
許多網站都在使用 Prism，如果你是前端開發者，那你一定十分熟悉這些網站：
這些網站在使用 Prism.js
連 JavaScript 之父 Brendan Eich 也在個人博客上使用！
如何使用：
你只需要在頁面上引入prism.css和prism.js文件：
遵循 HTML5 標準，Prism 使用語義化的 <pre> 元素和 <code> 元素來標記代碼區塊：
演示：http://prismjs.com/test.html
下載 http://prismjs.com/download.html
來源：切圖網（qietu.com），前端學習加微信 dingxiangming82
今天要介紹的是一款在Web開發中的輕量級代碼高亮插件——PRISM（中文名：棱鏡），它是一個基于現代Web開發語言標準構建的，在很多網站都使用到了它。例如我們熟知的React官網，就用到了它，下面截圖就可以看到效果。
react
https://prismjs.com/
官網給我們提供了自定義的下載prism的方式，即我們可以分主題，分支持的語言、分擴展插件、以及分開發版和壓縮版，如下圖所示：
主題選擇
prism提供了幾乎所有語言的支持，我們截圖大致看一下它支持的語言：
語言支持
語言支持
語言支持
由于官網的排版問題，部分內容可能沒有截圖完整，下面再看一下它支持的插件
插件支持
我選擇的是壓縮版，然后勾選上了所有插件和所有支持的語言，prism.js和prism.css合在一起大小是370.62k。實際上我們根本用不了這么多，因此我們在用的時候沒有這么大。
基本用法
<pre>
<code class="language-css">p { color: red }</code>
</pre>
顯示的效果如下，這是一個最簡單的實例
實例
我們來嘗試稍微復雜點的，右上角會顯示語言和復制，非常的實用，比如我們搭建自己的博客或者記錄筆記等場景。
實例
我這里分別使用JavaScript、Java、C#和Python語言進行了簡單的測試，使用的是官網提供的Coy主題，效果如下圖，還有太多的語言就不一一測試了。
常見語言
$ npm install prismjs import Prism from 'prismjs';
這個地方可能需要Babel-plugin-prmjs插件來管理你的語言等等配置。
var Prism=require('prismjs');
// 你想使用高亮的代碼片段
var code="var data=1;";
// 返回一個html字符串
var html=Prism.highlight(code, Prism.languages.javascript, 'javascript');
我們這里使用React的一段代碼進行演示，它是支持JSX代碼高亮的
默認主題
Dark主題
funky主題
Okaidia主題
Twilight主題
coy主題
Solarized Light主題
Torrow Night
Prism支持的語言實在是太多了，我這里就不在一一演示，大家感興趣的可以自己去研究研究，官網提供了完整的Demo，還支持各種擴展，例如顯示行號這樣的需求，它都可以實現，代碼高亮的插件有不少，大家可以在評論區留下你自己使用的哪一個，每款插件都只是一種選擇，選擇一個適合自己的或者自己喜歡的就可以了，希望本文對你有所幫助，感謝支持！
過一個階段測試，終于找到兩個 markdown 轉 html 并實現代碼高亮的工具，并以最簡代碼（幾十行）實現了炫酷的展示效果。步驟很少，也很簡單，零基礎也應該一看就會。往下看吧......，需要安裝有Node環境哦！
因為markdown 文檔編輯器具有語法簡單、文件簡潔、標準化、使用廣泛等特點，所以一直習慣采用 markdown 編輯器寫文章，但仍有一些網站不支持 markdown 編輯器，想嘗試將 markdown 轉成 html 再發布，采用 Javascript 來實現，尤其想達到 CSDN 博客、簡書這樣的展示效果。
圖1 CSDN 博客 markdown 文章及代碼塊高亮效果
圖2 簡書 markdown 文章及代碼高亮效果
比較常用的 M2H 插件有：
從網上獲得的 markdown-it 和 marked 的比較，主要表現在：在性能、使用簡單程度、正則解析（中文支持）方面，marked 比較好；在擴展性上，markdown-it 表現則更好一些。 由于 markdown 應用比較成熟，而且一般使用也不會太復雜，所以選擇性能好、中文支持好的 marked，至于 marked 的擴展性，也嘗試了一下，滿足常見的應用是沒問題的。
代碼塊高亮插件有：
對 heiglightjs 和 prismjs 分別做了簡單測試，發現 prismjs 使用非常簡單，易于上手，且代碼精簡，效率高，而 heiglightjs 相對比較復雜，使用起來不習慣，也許是各人喜好不同吧。所以選擇使用 prismjs 插件。
M2H 一般有兩種應用模式：一種是前端渲染，如在 vue 中使用；另一種是在后端生成 html 文件，在瀏覽器展示，如在 node 中使用。 此處我選擇在 node 中生產靜態 html 文件的應用模式，用戶可以在電腦端當作 markdown 轉 node 的工具使用； 至于前端渲染，vue 頁面打包時總會包含一個 chunk-vendors.js 文件，會引起頁面加載變慢，有很多辦法壓縮該文件，但這已經超出了 M2H 的范疇了，在此不再贅述。
圖3 最終實現的markdown 轉化及代碼塊渲染效果
創建目錄：marked-prismjs，使用 vsCode 打開該目錄。
在 vsCode 里的終端輸入相關命令進行插件安裝 1）安裝 marked 插件
npm install marked --save2）安裝 prismjs
npm install prismjs --save訪問官網下載頁：https://prismjs.com/download.html
圖4 themes 選項
圖5 編程語言包選項
圖6 插件選項
# 這是H1標簽
## 下面是 javascript 代碼：
```javascript let a=1; console.log(a); ```
創建 m2h.js 文件，內容為：
const { marked }=require('marked') // 引入 marked 模塊
const prism=require('prismjs') // 引入 prism 模塊
const fs=require('fs') // 引入文件處理模塊
const mdContent=fs.readFileSync('test.md', 'utf-8') // 讀取 markdown 文件內容
// 下面是 marked 擴展功能，當節點（token）類型是代碼（code）時，自定義渲染節點功能，及使用自定義的 renderer 函數來代替默認 renderer 函數，達到改寫當前節點生成的 html 代碼的樣式
marked.use({
extensions: [{
name: 'code',
renderer(token) {
if (token.type==='code') {
let codeHtml=`<pre class="language- round"><code class="language-`+token.lang+` line-numbers">`
codeHtml+=Prism.highlight(token.text, Prism.languages.javascript, 'javascript')
codeHtml+=`</code></pre>`
return codeHtml
}
}
}]
})
// 定義 html 文件頭部代碼
var htmlContent=`
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="prism.css">
<script src="prism.js"></script>
</head>
<style>
.round {
box-shadow: 10px 10px 5px #888888;
border-radius: 10px;
}
</style>
<body>
`
htmlContent +=marked.parse(mdContent) // 疊加上 marked 生成的 html 代碼
htmlContent+=`</body> // 疊加底部代碼（補齊）
</html>`
fs.writeFileSync('test.html', htmlContent) // 將最終的 html 內容寫入到文件 test.html測試運行：
node m2h.js每運行一次，就會重新生成新的 test.html 文件。
在 vsCode 里鼠標右鍵點擊 test.html 文件，選擇“Open with Live Server”，
圖7 Open with LiveServer
會在瀏覽器里打開 test.html 頁面，test.md 已經成功生成了 test.html，實現了代碼塊高亮、語言顯示及拷貝按鈕及行號。得到的最終結果如下圖：
圖8 效果展示
達到了當初計劃實現的功能需求。
以上通過簡單的幾十行代碼就實現了如此炫酷的功能展示，體現了插件的強大功能，同時通過自定義擴展節點渲染函數，也展現了插件的靈活性和可擴展性。此次測試僅僅是個引子，后續會繼續進行研究和測試，感興趣請收藏、關注，方便共同學習、進步。
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
