代码语法块通过使用Prism语法突出显示器向核心代码块添加语法突出显示支持来扩展WordPress的块编辑器。
Prism语法荧光笔运行在前端加载的JavaScript来解析代码块并应用语法标记。CSS文件指定要应用于该标记的颜色和样式。
默认语言(推荐)
如果你的网站主要以少数几种语言为主的话,可以将下代码添加到主题根目录下的functions.php
文件的<?php
下面:
//设置默认的语言为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种语言,请参见list。
使用此过滤器可以扩展以支持所需的语言。另外,您可以使用过滤器将列表缩短为仅使用的语言,以便于选择。
这是一个将列表缩短到较小集合的示例:
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",
);
} );
我可以覆盖条件加载,以便资产始终加载吗?
是的,请使用过滤器mkaz_code_syntax_force_loading
强制始终加载资产,否则请使用has_block进行检查。
例:
add_filter( 'mkaz_code_syntax_force_loading', '__return_true' );
相关推荐
如果您正在使用传统的经典编辑器,那么您应该试试这款代码高亮wordpress插件:
如果您不满足这简单的功能,可以用这款功能更强大的高亮插件,无论是传统的经典编辑器还是先进的古登堡区块编辑器,他都能搞定,丰富的功能设置项,让您充分自定义您的代码高亮外观: