应原插件作者的要求, 本插件已下架.

下架

前言

Handsome从 v7.3.1 开始支持 Vditor 这一 Markdown 解析器,但 CodePrettify 插件作者一直没有给出与 Vditor 兼容的方法,我之前魔改过一些地方使得两者能够共存,参见

但仍然存在一些小的问题,于是萌生了自己做一个代码语法高亮插件的想法,便有了 MacHighlight

简介

从插件的名字可以看出来,本插件主要是 Mac 风格的高亮样式,如果您有其他需求,可以自行定制 (其实直接将 CodePrettify 的 css 样式拷贝过来就能用,但为了减少兼容工作量,我这里就仅对三个 Mac 风格做兼容工作了)

MacHighlight 是一款基于 prismjs 的代码语法高亮插件,支持众多常见的代码语言高亮显示,共提供3种代码高亮风格自由切换,支持显示代码语言类型、行号,以及支持复制代码到剪切板功能,需魔改 Handsome 以使得与 Vditor 兼容。

使用方法

  1. 前往Releases 下载最新版本插件
  2. 解压后重命名文件夹为 MacHighlight ,再上传至网站的 /usr/plugins/ 目录下
  3. 启用插件,选择喜欢的样式
  4. 替换 /usr/themes/handsome/assets/css/handsome.min.css/usr/themes/handsome/assets/js/core.min.js文件,相关文件在下方给出。
  5. 刷新 CDN 缓存,清除浏览器缓存,或者点击 Handsome 插件中的更新离线缓存按钮。

下载

仅针对 Handsome v7.3.1 版本进行了测试,如您遇到样式问题,请留言反馈,并附加演示地址。(评论区未启用 Markdown 解析,直接填写网站链接或截图链接即可)

此处内容需要评论回复后(审核通过)方可阅读。

举例

绿色提示

php 代码正常高亮:

\```php(语言类型必填)
<?php echo 'hello jrotty!'; ?>
\```
删除上边代码中的\

流程图正常渲染:

sequenceDiagram
participant Sender
participant Receiver
Receiver ->> Receiver: start, create files
Sender ->> Sender: start
loop send message
Sender ->> Sender: read char, visit int(char) files
Sender ->> Receiver: send the char(char)
Receiver ->> Receiver: count visited files 
end
Sender ->> Sender: end
Receiver ->> Receiver: end

致谢

本插件样式代码来自 @Xcnte 大佬的 CodePrettify 插件,在此表示感谢🙏

其他

如您遇到样式问题或其他问题,均可在下方留言给出,记得附带演示地址哦~

最后修改:2021 年 03 月 11 日
如果觉得我的文章对你有用,请随意赞赏