highlight.js 代码高亮个人使用心得

575次阅读
没有评论

共计 1971 个字符,预计需要花费 5 分钟才能阅读完成。

前言

在之前的文章 Pandoc Markdown 转换为 HTML 格式代码块手动指定语言 PHP 修复 中我最后将代码转换为了

<pre><code class="language-html">...</code></pre>

highlightjs 官方指定的标准代码块格式的HTML代码. 但是我依旧发现在我之前一些博文中的代码, 没有被很好的高亮显示. 我发现如明明指定了
<code class="language-conf" , 代码块在经过 highlightjs 高亮转换后 在 pre 的标注中
<pre class="hljs language-css". 我通过在浏览器控制台调用 hljs.listLanguages() . 发现是 highlightjs
并没有注册的我标注的语言导致的.

ps: 实际上并不存在 conf 这个语言… 这只是个后缀…🤣 我给想当然了.

highlight.js 介绍

highlight.js 是一个在 HTML 高亮代码块的由 JavaScript 所编写的脚本插件,拥有 支持192 种语言和 496 个主题, 自动语言检测, 用于任何 HTML 标记, 零依赖等特点

highlight.js 官网 | highlight.js 文档

官方提供了 cdn, 文件引入, 包导入的方式安装. 由于 highlight.js 提供了192种编程语言的代码高亮方式 以及496个主题. 但往往在页面中用不到这么多种编程语言, 也只会用一两个主题. 所以 采用模块化的方式安装.
采用如果是JavaScript应用采用包管理的方式可以动态在代码中导入这些包. 但如果是 php 这种服务器渲染的页面, 只能用cdn, 或是本地资源文件导入. cdn中的 highlight.js 默认支包含了常用编程语言的代码高亮.
更多的我们会想用自定义网站需要提供语言的代码高亮.

highlight.js 官网 官方提供了这个下载界面可以选择自定义需要高亮的语言, 自行勾选. 以下我主要介绍这中安装方法.
以下是从官网选择自定义语言后下载的压缩包解压后的目录结构.

.
├── DIGESTS.md
├── es
│   ├── core.js
│   ├── core.min.js
│   ├── highlight.js
│   ├── highlight.min.js
│   └── package.json
├── highlight.js
├── highlight.min.js
├── languages
│   ├── bash.min.js
│   ├── c.min.js
│   ├── cpp.min.js
│   ├── csharp.min.js
|   ...
├── LICENSE
├── package.json
├── README.md
└── styles
    ├── a11y-dark.css
    ├── a11y-dark.min.css
    ...

其中 目录下 highlight.min.js 即为包含所有选择语言的代码高亮代码. styles 目录下可以选择一款主题的css样式导入, 只需要这两个文件.

主题

highlight.js 主题演示 在这个页面中可以查看 highlight.js 所有主题的常用语言高亮效果.

highlight.js 使用

当选择好主题后, 以下是 highlight.js 常用使用的演示.

<!DOCTYPE html>
  <html>
    <head>
    <!-- ... -->
    <link rel="stylesheet" href="/lib/highlight/theme.min.css">
    </head>
    <body>
      <pre>
        <code class="language-javascript">
          function $initHighlight(block, cls) {
            try {
              if (cls.search(/\bno\-highlight\b/) != -1)
                return process(block, true, 0x0F) +
                      ` class="${cls}"`;
            } catch (e) {
              /* handle exception */
            }
            for (var i = 0 / 2; i < classes.length; i++) {
              if (checkCondition(classes[i]) === undefined)
                console.log('undefined');
            }

            return (
              <div>
                <web-component>{block}</web-component>
              </div>
            )
          }
        </code>
      </pre>
      <script src="/lib/highlight/highlight.min.js"></script>
      <script>
        hljs.highlightAll();
      </script>
    </body>
  </html>

总结

主要是我在导入时不太理解, 不太了解 highlight 的文件导入方式. 以及一大堆主题文件和语言min文件, 试了半天才发现那些都不用管. 只需要 theme.min.csshighlight.min.js 文件.

正文完
 1
太阳
版权声明:本站原创文章,由 太阳 2023-10-28发表,共计1971字。
转载说明:除特殊说明外本站文章皆由CC-4.0协议发布,转载请注明出处。
评论(没有评论)