Hexo 使用 Prism 代码高亮

禁用 Highlight.js

修改根目录下的 _config.yml 配置文件。

highlight:
  enable: false
  line_number: false
  auto_detect: false
  tab_replace:

安装 Prism.js

下载 Prism.js

前往 Prism.js 主页,根据需要勾选 Theme 与 Language 和 Plugin,然后下载到 Hexo 主题的 source/prism 目录之中,然后重命名为 prism.jsprism.css

配置 Prism.js

修改 Hexo 主题 layout/_partials 目录中的 head ,引入 Prism.js 文件。

<link rel="stylesheet" href="/prism/prism.css">
<script src="/prism/prism.js" async></script>

修改 Hexo 根目录中的 node_modules/marked/lib/marked.js 文件,搜索定位到 <pre><code class=" 然后修改为:

'<pre><code class="language-'

测试 Prism.js

在站点根目录中执行:

hexo clean
hexo generate
hexo server

重新生成静态页面,然后使用游览器访问 http://localhost:4000 查看 Prism.js 效果是否正确显示。

Prism.js 必须给代码块指定语言,如没有适当的语言可指定,则可以指定为 none 即可。

插件

Clipboard.js

在下载 Prism.js 选择组件的时候如果勾选了 Copy to Clipboard Button ,则还需要下载 Clipboard.js 到 Hexo 主题的 source/prism 目录之中。然后同样需要在主题的 head 文件中引用。

<link rel="stylesheet" href="/prism/prism.css">
<script src="/prism/clipboard.js"></script>
<script src="/prism/prism.js" async></script>

Line Numbers

在下载 Prism.js 选择组件的时候如果勾选了 Line Numbers ,则在编辑 node_modules/marked/lib/marked.js 的时候还需要在加入 line-numbers

'<pre><code class="line-numbers language-'

文章作者: REPL\ acgio
版权声明: 本博客所有文章除特別声明外,均采用 CC BY 4.0 许可协议。转载请注明来源 REPL\ acgio !
 上一篇
Windows 10 LTSC 安装 Microsoft Store Windows 10 LTSC 安装 Microsoft Store
安装使用 Git 克隆 LTSC-Add-MicrosoftStore 项目到本地。然后打开 LTSC-Add-MicrosoftStore 项目文件夹,右键点击 Add-Store.cmd 选择 以管理员身份运行 进行安装。 git c
2019-10-08
下一篇 
Windows 10 LTSC 您的安全设置不允许将此应用程序安装到您的计算机上 Windows 10 LTSC 您的安全设置不允许将此应用程序安装到您的计算机上
配置 ClickOnce 信任提示行为 单击“开始”,然后单击“运行” 。 在中开放框中,键入regedit ,然后单击确定。 找到以下注册表项:\HKEY_LOCAL_MACHINE\SOFTWARE\MICROSOFT\.NETFra
2019-10-08
  目录