推荐一款 wordpress 代码高亮插件 Code Syntax Block

夏日阳光
178
文章
22
评论
2020年1月6日23:35:31 评论 194

代码高亮是大部分站长经常会用到的功能之一,尤其以技术类网站为主,今天为大家另一个代码高亮插件 Code Syntax Block。Code Syntax Block 是一个 wordpress 代码高亮插件,兼容古腾堡编辑器。之前介绍过一些其它的代码高亮插件,大家如果感兴趣的话,可以在本站搜索 “代码高亮” 查看相应的文章。

推荐一款 wordpress 代码高亮插件 Code Syntax Block

安装插件

首先进入Wordpress后台,选择插件— 安装插件 — 搜索 Code Syntax Block,然后点击安装即可。

推荐一款 wordpress 代码高亮插件 Code Syntax Block

或者从 WordPress 插件官网下载,将下载的文件解压缩,然后将上传至 /wp-content/plugins/ 目录,在插件后台启用即可。

使用方法

在文章发布界面,插入一个【代码】区块,默认在 “格式” 下面。

推荐一款 wordpress 代码高亮插件 Code Syntax Block

添加代码后选中该区块,就可以在右边看到设置选项。可以设置 “Language” 和 “Show line numbers” 等信息。

推荐一款 wordpress 代码高亮插件 Code Syntax Block

效果预览

插件效果预览图如下:

推荐一款 wordpress 代码高亮插件 Code Syntax Block

结束语

Code Syntax Block 采用的是 Prism 这个代码高亮库实现的,非常小巧,支持的语言很多,兼容主流的浏览器,如果你使用的是古腾堡编辑器,那么这个插件将是一个不错的选择。大家如果感兴趣的话,不妨尝试一下。

相关文章:

1、代码高亮插件code-prettify
2、使用 Prism.js 实现代码语法高亮
3、代码高亮插件Crayon Syntax Highlighter

weinxin
关于本站
本站是一个分享建站经验、网站优化以及互联网技巧的个人博客。
  • 版权声明: 发表于 2020年1月6日23:35:31
  • 转载注明:https://www.pieruo.com/18185.html
匿名

发表评论

匿名网友 填写信息

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: