Code Syntax Block – 古腾堡代码高亮插件

因为我个人比较喜欢古腾堡编辑器的操作方式,所以也就没有去尝试使用其他类型的文章编辑器,但当我在为文章添加代码段的时候,发现没有高亮显示的代码视觉体验并不好,于是我尝试了各类代码高亮插件,最后发现了这款与古腾堡兼容的支持行号显示的高亮代码插件——Code Syntax Block

  • 最新版本:v1.3.3
  • WordPress要求5.0+,且兼容最新版本
  • PHP版本:5.2.4+

使用效果

配置默认高亮语言

Code Syntax Block 1.1 以上允许我们通过钩子设置默认的语言,如果你的网站主要以少数几种语言为主的话,可以将下代码添加到主题根目录下的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' );

下载权限

查看
  • 免费下载
    评论后下载
    登录后下载

  • {{attr.name}}:
您当前的等级为
您有每天免费下载所有资源次的特权,今日剩余 已取得下载权限

人已赞赏
WordPress插件

WP Mail SMTP - WordPress邮件发送插件

2020-7-30 20:51:41

WordPress插件

付之轻附件管理插件 - WordPress文件下载管理

2020-8-5 11:09:30

⚠️
恩月阁文章由星九进行编写或整理,部分内容来源于互联网,仅供网友学习交流,若您喜欢本文可附上原文链接随意转载。
若无意中侵害到您的权益,请发送邮件至 xingjiu@nuue.cn 或点击右侧 私信:星九 反馈,我们将尽快处理。
0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索