插件篇
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/
使用
一、添加古腾堡“代码”格式
二、在古腾堡-区块,可以进行一些设置
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文件,有两种自定义方式:
- 插件将检查文件的当前主题:
assets/prism/prism.css
并使用该文件(如果存在)。将自定义项添加到该位置的文件中,它将被使用。 - 如果您不喜欢该文件位置,则可以使用过滤器
mkaz_prism_css_path
并指定相对于要使用的主题的路径。 - 如果您希望指定完整的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/