使用 Prism 支持 WordPress 代码高亮

140次阅读
没有评论

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

WordPress 原生不支持代码高亮,之前用 SyntaxHighlighter Evolved 插件。现改用 Prism,不依赖插件,体积小,加载速度快,最重要的是颜值高。

安装方法简单:

  1. 到 官网 勾选主题和支持的语言,下载 CSS 文件和 JS 文件。
  2. 将下载的文件传到主题的 CSS 文件夹和 JS 文件夹下。
  3. 在页眉或者页脚引入。
<link rel="stylesheet" href="<?php echo get_template_directory_uri();?>/build/css/prism.css">
<script src="<?php echo get_template_directory_uri();?>/build/js/prism.js"></script>

HTML

使用方法:

将代码片段用<pre><code language-html></pre></code>包起来,language 根据实际情况填写。

<p>hello world!</p>

HTML

如果平时用 Markdown 写作,可以直接在代码片段中标记语言,导出来的 html 与 Prism 代码标记格式一致。

正文完
 
admin
版权声明:本站原创文章,由 admin 2019-12-25发表,共计474字。
转载说明:除特殊说明外本站文章皆由CC-4.0协议发布,转载请注明出处。
评论(没有评论)
验证码