web前端代码高亮显示工具

2018年09月13日阅读：128 字数：469 阅读时长：1 分钟

在编写文档或者博客的时候，常常需要将代码高亮显示。一般使用两个js库，highlightjs 和 prismjs。

Highlight.js

highlight.js 一个轻量级的代码高亮库。可以在浏览器或者服务端运行，不依赖其他框架的js库。

优点：

自动检测代码语言
轻量化

缺点：

插件不够丰富，比如不支持行号
代码高亮粒度不细

使用CDN静态资源

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>HighlightJS</title>
    <link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/highlight.js/11.5.0/styles/default.min.css">
</head>
<body>
    <pre class="javascript">
        <code>const cdn = "https://www.bootcdn.cn/highlight.js/";</code>
      </pre>
    <script src="https://cdn.bootcdn.net/ajax/libs/highlight.js/11.5.0/highlight.min.js"></script>
    <script>
        hljs.highlightAll()
    </script>
</body>
</html>

Prism.js

prismjs 是一种轻量级的、可扩展的语法高亮器，它是用现代Web标准构建的。相比于highlightjs，prismjs高亮的代码更准确、更加的细粒度。所以，更推荐使用prismjs做代码高亮。

优点：

支持编写插件
代码高亮粒度更细

使用CDN静态资源

Prism.highlight(text, grammar)

将代码text，以grammer指定的语言，高亮处理

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>PrismJS</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/prismjs@1.27.0/themes/prism.min.css">
</head>
<body>
    <pre class="language-javascript">
      <code>var cdn = "https://www.jsdelivr.com/package/npm/prismjs";</code>
    </pre>
    <script src="https://cdn.jsdelivr.net/npm/prismjs@1.27.0/prism.min.js"></script>
    <script>
        Prism.highlightAll()
    </script>
</body>
</html>

使用NPM包

按需引入依赖babel-plugin-prismjs插件

babel配置

module.exports = {
   plugins: [
      [
        'prismjs',
        {
          'languages': ['markup', 'css', 'javascript', 'json', 'less', 'scss', 'shell', 'typescript'], // 语言
          'plugins': ['show-language', 'highlight-keywords', 'toolbar'], // 插件
          'css': 'dark' // 主题
        }
      ]
    ]
}

umi配置

import { defineConfig } from 'umi'

export default defineConfig({
  extraBabelPlugins: [
    [
      require.resolve('babel-plugin-prismjs'),
      {
        "languages": [
          "go"
        ],
        "plugins": [
          "line-numbers", "show-language", "copy-to-clipboard"
        ],
        "theme": "solarizedlight",
        "css": true
      }
    ]
  ]
})

实例化

import Prism from 'prismjs'
import ClipboardJS from 'clipboard'

// 注册复制按钮
Prism.plugins.toolbar.registerButton('copy-to-clipboard', (env) => {
  const copyElement = document.createElement('button')
  copyElement.className = 'toolbar-item-button'
  copyElement.innerText = '复制代码'

  const clipboard = new ClipboardJS(copyElement, {
    'text': () => {
      return env.code
    }
  })
  clipboard.on('success', () => {
    // 复制成功，转载最好带上出处哟
  })
  clipboard.on('error', () => {
   // 复制失败了呢，请使用 Ctrl + V 来复制吧
  })
  return copyElement
})

Prism.highlightAll() // 默认情况下，Prism将尝试高亮显示所有代码元素

评论区 (0)

还没有评论，快来抢第一吧

web前端代码高亮显示工具

Highlight.js

使用CDN静态资源

Prism.js

使用CDN静态资源

使用NPM包

推荐阅读

恰饭区

评论区 (0)