WordPress如何实现代码高亮

插件篇

Enlighter（不推荐）

地址：https://wordpress.org/plugins/enlighter/

Syntax-highlighting Code Block（不推荐）

这个插件不支持添加行号

高亮的效果也不太理想

插件：WP Code Highlight.js

在插件中心搜索并安装 WP Code Highlight.js，启用插件后，文章中的代码便会自动进行高亮展示啦。

插件：SyntaxHighlighter -通用代码高亮插件

插件：Syntaxhighlighter-通用代码高亮插件

插件（推荐）：Code Syntax Block-兼容古腾堡的代码高亮插件

很多代码插件都是添加了自己的区块的，但是如果哪天禁用掉插件后，可能会导致已发布的文章出现问题，所以，如果是支持默认的【代码】区块，即使以后删除了插件，已发布的代码也不会出现问题。

Code Syntax Block使用

特点

1、完全兼容古腾堡的【代码】区块，让你轻松的高亮代码，无需其他操作

2、最简单的WordPress代码高亮插件

3、Code Syntax Block 采用的是 Prism 这个代码高亮库实现的

4、支持添加行号

【地址】：https://wordpress.org/plugins/code-syntax-block/

【参考】prism：一个轻量，健壮，优雅的语法高亮库

使用

一、添加古腾堡“代码”格式

二、在古腾堡-区块，可以进行一些设置

1）选择语言：

2）设置是否显示行号

3）设置：Title for Code Block

4）设置整体颜色方案（Global Color Scheme）

注意：所有站点都起作用（Color scheme applies to all code blocks across the site.）

三、设置默认语言

如果不选择语言，html如下：

<pre class="wp-block-code"><code>代码高亮</code></pre>

这样显示的内容和主题提供的样式一样，相当于没有代码高亮没有起作用

选择任何一个语言，则前端出现效果遵守主题的样式，

html代码：

<pre class="wp-block-code"><code lang="php" class="language-php">代码高亮</code></pre>

所以，一般情况下，建议设置默认语言。

//设置默认的语言为PHP
function wpkj_code_syntax_default_lang(){
	return 'php'; //将php修改为其他语言
}
add_filter( 'mkaz_code_syntax_default_lang', 'wpkj_code_syntax_default_lang' );

自定义颜色方案

默认的颜色主题是在一个漆黑的基础断Atom的一个黑暗的主题。如果要更改这款wordpress插件的默认高亮颜色，可以从Prism主题存储库下载新主题或创建自己的主题。

颜色主题是单个CSS文件，有两种自定义方式：

1. 插件将检查文件的当前主题：assets/prism/prism.css并使用该文件（如果存在）。将自定义项添加到该位置的文件中，它将被使用。
2. 如果您不喜欢该文件位置，则可以使用过滤器mkaz_prism_css_path并指定相对于要使用的主题的路径。
3. 如果您希望指定完整的URL，则可以使用过滤器mkaz_prism_css_url并为要使用的样式表指定完整的URL。

添加过滤器以更改URL的示例，将以下内容添加到主题的function.php中

add_filter( 'mkaz_prism_css_url', function() {
    return 'https://raw.githubusercontent.com/PrismJS/prism-themes/master/themes/prism-hopscotch.css';
});

注意：如果您使用标题/文件名功能并自定义CSS，则需要针对棱镜-标题名类应用自己的样式。

自定义语言列表

使用过滤器mkaz_code_syntax_language_list来自定义要在编辑器中显示的语言列表。默认情况下，代码语法块显示较短的流行语言列表，但Prism支持近200种语言

使用此过滤器可以扩展以支持所需的语言。另外，您可以使用过滤器将列表缩短为仅使用的语言，以便于选择。

这是一个将列表缩短到较小集合的示例：

add_filter( 'mkaz_code_syntax_language_list', function() {
    return array(
        "bash" => "Bash",
        "go" => "Go",
        "html" => "HTML",
        "javascript" => "JavaScript",
        "json" => "JSON",
        "markdown" => "Markdown",
        "php" => "PHP",
        "python" => "Python",
        "jsx" => "React JSX",
        "sass" => "Sass",
        "sql" => "SQL",
        "svg" => "SVG",
        "toml" => "TOML",
        "vim" => "vim",
        "xml" => "XML",
        "yaml" => "YAML",
    );
} );

---

【参考阅读】：https://www.npc.ink/2793.html

参考

兼容古腾堡的代码高亮插件

插件：SyntaxHighlighter -通用代码高亮插件

wordpress插件：Enlighter – WordPress代码高亮插件

Code Snippets
https://wordpress.org/plugins/code-snippets/

WordPress代码高亮插件CodeColorer正确使用方法
http://blog.csdn.net/razyliang/article/details/49406849

5款WordPress代码高亮插件
http://blog.csdn.net/liuxuekai/article/details/52099931

WordPress 代码高亮插件：Pure-Highlightjs（支持可视化下插入代码）
https://www.wpdaxue.com/pure-highlightjs.html

12款最佳的 WordPress 语法高亮插件推荐
https://www.cnblogs.com/lhb25/p/12-best-wordpress-syntax-highlighter-plugins.html

14 Best WordPress Theme Frameworks 2017
https://athemes.com/collections/best-wordpress-theme-frameworks/