WPJAM「代码高亮」:一键实现 WordPress 页面代码高亮显示

对于一个技术博客来说,实现代码高亮是页面上最常见的操作,现在大部分代码高亮的功能都是使用 prism 这个代码高亮 JS 库来实现的,很多主题也集成该 JS 库,所以我就整理成一个插件,并且支持换配色主题,并且还支持开启代码行号功能,这样我们之后发布的主题,加上这个插件就自动带有代码高亮功能。

设置「代码高亮」插件

WPJAM「代码高亮」的插件只有一个文件,按照 WordPress 插件常规安装之后,在后台「WPJAM」的「页面设置」子菜单的「代码高亮」标签页中就可以进行简单的设置了:

整个插件只有两个选项,第一个是选择代码的配色主题,第二个是代码行号的设置。

先说配色,目前 Prism 提供了以下这些配色,我本来想把它们翻译成中文,但是除了 Dark 是暗黑配色,然后其他几个不知道怎么翻译,并且看了其他几个貌似也有暗黑的感觉,就保留英文吧。

英文好的,可能一看就知道啥意思,英文不好,就当个标记,和我一样一个一个去试试就知道了,首先默认配色是这样的:

Coy:

Dark:

Funky:

Funky 比较特殊,会和古腾堡编辑器的样式冲突,可能需要在主题中加入这样样式代码:.wp-block-code code{display:inline;}

Okaidia:

Solarizedlight:

Tomorrow:

Twilight:

第二个设置是行号,它有三个选项,默认是关闭,然后开启,和全局开启,开启和全局开启有什么区别呢?

「开启」是要给代码块添加line-numbers class 才会显示行号。而「全局开启」默认所有代码块都显示行号,而可以通过 no-line-numbers class 关闭某个代码块的行号。

截个图显示一下加了行号代码块的效果:

使用「代码高亮」插件

安装之后,代码块还是不会高亮显示的,还需要一点点操作,非常简单,首先根据你使用不同编辑器略用不同。

如果你使用古腾堡编辑器的话,先点击选择创建一个代码块:

然后输入代码,选择该该区块:

图片

点击右侧区块属性框,在额外的CSS类中输入:language-php,如果你的代码是 JS 则,输入 language-javascript,CSS 则输入 language-css,HTML:language-markup,其他语言尝试一下:language-语言的英文名

另外上面说的行号的 class,也是在这里输入。

如果是经典编辑器,则切换到代码模式,然后把代码放到:<pre class="language-php"><code> 和 </code></pre> 之间即可,如下图所示:

pre 标签的 class 定义就是语言,如何设置,和上面古腾堡的设置方式是一样的,自己灵活处理一下,个人感觉还是古腾堡编辑器方便一点。

获取 WPJAM「代码高亮」插件

WPJAM「代码高亮」插件是 WordPress 果酱知识星球福利插件,加入「WordPress果酱」知识星球(长按下图二维码)即可下载。


「WordPress果酱」知识星球福利插件基于 WPJAM Basic 开发,加入「WordPress果酱」知识星球,即可下载:

插件 简介
抓取公众号图文

支持一键同步微信公众号文章到 WordPress 博客,并支持一键将文章中所有图片都下载到 WordPress 媒体库。

搜索优化

WordPress 最强的搜索优化插件,支持限制每个 IP 每分钟搜索次数,达到上限之后屏蔽搜索时长,还可以限制搜索关键词的长度,搜索结果页面限制只显示「搜索结果」,还有以下搜索功能增强:

1. 只搜索文章标题,不搜索文章内容和摘要。
2. 当搜索关键词为空时重定向到首页,只有一篇文章时重定向到文章
3. 后台文章列表支持搜索ID。
4. 支持搜索自定义字段。

编辑器优化

一键增强 WordPress 经典 TinyMCE 编辑器:

1. 增加下划线,背景颜色,两端对齐,字体和大小设置,以及内容分页按钮。
2. 新增插入表格功能。
3. 直接插入屏幕截图。

标题设置

一键设置 WordPress 所有页面的页面标题,通过规则方式让博主可以自定义 WordPres 首页,分类,文章类型,文章详情都所有页面的页面标题。

登录优化

一键优化 WordPress 登录注册界面,并支持第三方账号登录和绑定,目前已经支持微信公众号(所有类型),微信小程序,手机号码第三方平台。

内容模板

实现在内容中插入一段共用的内容模板,通过短代码(shortcode)的方式来实现的,支持统一修改,目前支持普通的内容模板,表格内容模板和卡片内容模板三种类型。

用户管理

最强 WordPress 一键用户管理插件,一键实现以下12个功能:

1. 屏蔽个性化设置
2. 屏蔽姓氏和名字设置
3. 取消显示名称设置
4. 开启别名设置
5. 隐藏用户登录名
6. 开启登录次数限制
7. 用户最后登录时间
8. 按注册时间排序
9. 以此身份登陆
10. 生成密码重置链接
11. 自定义用户头像
12. 默认用户头像

分类管理

这是一个全能的 WordPress 分类管理插件:

1. 层式管理分类
2. 限制分类层级
3. 分类拖动排序
4. 使用数字固定链接
5. 首页文章支持分类过滤
6. 后台文章列表支持分类筛选过滤
7. 后台文章列表支持分类多重筛选

评论增强

这是一个 WordPress 评论增强插件,支持评论置顶,评论点赞和按照点赞数排序。

图片集

1. 给媒体创建个分类「图片集 | collection」
2. 图片分类限制为二级
3. 取消图片编辑入口
4. 附件页面直接图片链接。

配置器

全自动 WordPress 配置器,不用一行代码就可以开发。
支持自定义文章类型,自定义字段,自定义分类,分类选项,全局选项。

Script Loader

通过恢复 WordPress 联合加载方式来优化 WordPress 后台脚本加载。

外部链接

将文章或评论中的外部链接加上安全提示的中间页。
让用户确认之后再跳转,并还支持添加 nofollow rel 属性。

话题标签

文章中插入 #话题标签#。
如果是内部链接,直接跳转,
标签或者分类,则自动转换成标签或分类链接,
否则跳转到搜索链接。

格式文章

在 WordPress 实现真正的文章格式

草稿分享

一键生成草稿临时分享链接
并可设置分享链接的有效期

文章专题

设置文章专题,并在文章末尾显示一个文章专题列表。

文章隐藏

设置文章在列表⻚不显示,并且可以根据不同平台进行设置

Meta Data

可视化管理 WordPress Meta 数据,支持所有内置的 Meta 数据:
Post Meta,Term Meta,User Meta 和 Comment Meta。

站点选项

查看和管理所有非 WordPress 系统自动生成的站点选项。
如果你觉得某个选项无用,可以直接删除它。

后台论坛

WordPress 后台论坛,支持创建帖子,分组,消息。

微信小程序

微信小程序 WordPress 基础插件,包含基础类库和管理。

微信群二维码

轮询显示微信群二维码,突破微信群100人限制。

文章置顶

支持置顶文章排序和分类文章置顶的 WordPress 插件

静态文件

一键合并 WordPress 插件和主题的 JS 和 CSS 文件,加快页面加载速度

Debug

一键检测 WordPress 运行效率。


©我爱水煮鱼,本站推荐使用的主机:阿里云,国外主机建议使用BlueHost

本站长期承接 WordPress 优化建站业务,请联系微信:「chenduopapa」。