前端代碼高亮顯示解決方案: prism

目錄

• 1. 場景描述
• 2. React Prism
  • 2.1 prismjs 庫
  • 2.2 babel-plugin-prismjs 插件
• 3. demo
• 4. 注意點
• 5. 參考連接

1. 場景描述

在博客, 文檔, 論壇這些性質的網站常常存在着須要顯示代碼的需求; 對於這種要求要求, 咱們能夠直接使用textarea 標籤顯示:

可是這種顯示方案很是不美觀, 不但沒有高亮代碼, 並且也沒有顯示行號, 這對於代碼的閱讀是很是不友好的;

而通常的網站, 對於代碼的顯示都會作高亮處理, 如antd Design 文檔:

這種方案的原理是先設計一套CSS 顯示方案, 例如規定好關鍵字, 符號, 屬性等內容的顯示方案; 而後寫一套CSS parser, 將代碼解析成爲特定的字段, 而後將這些字段處理成特定的元素(這些元素爲class 帶上css 解決方案); 該原理和json parser 很相似
Json Parser 原理: Json Parser 原理

不過在業務場景, 並不推薦本身寫一套解析器, 雖然我的感受實現一套特定規則的代碼高亮方案並不會很難, 可是實用性並不強, 所以咱們使用現有的解決方案;

而這裏介紹的解決方案爲 prosmjs, 因爲網上論壇(CSDN, 博客園, 掘金) 並無找到關於React 應用demo, 因此這裏記錄的是React 使用Prism Demo

2. React Prism

若是你須要在React 應用中使用Prismjs, 那麼你須要使用到以下內容:

2.1 prismjs 庫

prism 庫, 裏面包含着prism 的基本內容, 包括js 文件, css文件, 插件, 主題等內容

yarn add prismjs

2.2 babel-plugin-prismjs 插件

webpack 對於prism 打包須要使用到的插件
安裝:

yarn add babel-plugin-prismjs

.babelrc 配置:

"plugins": [
    ["prismjs", {
      "languages": ["javascript", "css", "markup"],
      "plugins": ["line-numbers"],
      "theme": "okaidia",
      "css": true
    }]
  ]

3. demo

項目地址: PrismReactDemo

import React from 'react'
import Prism from 'prismjs';

const log = console.log.bind(console)

class PrismjsDemo extends React.Component{
    constructor(props) {
        super(props)
        this.state = {}
    }

    render() {
        const code = `const listMaxValue = (list) => {
let max = list[0]
for(let i = 1, len = list.length; i < len; i++) {
    if(max > list[i]) {
        max = list[i]
    }
}
return max
}`

        log(Prism)

        let codeHtml = {
            // Prism.highlight(text, grammar, language)
            // text: 須要格式化的代碼
            // grammar: 須要格式化代碼的語法
            // language: 須要格式化代碼表示的語言
            __html: Prism.highlight(code, Prism.languages.javascript, 'javascript')
        }

        return (
            <>
                <pre className="language-javascript line-numbers">
                    <code dangerouslySetInnerHTML={codeHtml}></code>
                </pre>
            </>
        )
    }
}

export default PrismjsDemo

運行結果:

4. 注意點

• 在React 框架匯中, 使用Prism 的格式爲: 必須存在pre code 標籤, 若是不按照這個格式, 那麼代碼將不會換行

<pre className="language-javascript line-numbers">
    <code dangerouslySetInnerHTML={codeHtml}></code>
</pre>

• 若是須要顯示主體, 須要顯示行號, 必須添加相關的css 類名

<>
    {/* 若是不添加language-, 將不會顯示主體('language-' + 語言名稱) */}
    {/*若是不添加line-numbers, 將不會顯示行號*/}
    <pre className="language-javascript line-numbers">
        <code dangerouslySetInnerHTML={codeHtml}></code>
    </pre>
</>

- 在我的項目中, 顯示行號的插件失效了, 具體緣由暫時未知(使用antd design UI 框架, 不知道是否是這個緣由)

5. 參考連接

1. prism 官方文檔
2. babel-plugin-prismjs 文檔
3. prism 在Vue 框架中的demo
4. prism HTML+js Demo
5. prism 中文介紹