Npcink Blog
切换菜单

Code Syntax Block - 最简单的 WordPress 代码高亮插件

支持古登堡默认的代码区块编辑器，让你轻松的高亮代码，无需其他操作

最后更新于
本页目录3 节

代码语法块通过使用 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 文件，有两种自定义方式：

  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 种语言，请参见 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' );