Typecho 插件——MacHighlight 代码语法高亮插件

博主： Rainshaw
发布时间：2020 年 12 月 05 日
9204 次浏览
48 条评论
2059字数
分类： PHP 折腾分享

应原插件作者的要求, 本插件已下架.
</div>

## 前言
[Handsome](https://www.ihewro.com/archives/489/)从 v7.3.1 开始支持 Vditor 这一 Markdown 解析器，但 [CodePrettify](https://www.xcnte.com/archives/523/) 插件作者一直没有给出与 Vditor 兼容的方法，我之前魔改过一些地方使得两者能够共存，参见
<div class="preview">
<div class="post-inser post box-shadow-wrap-normal">
<a href="http://blog.ruixiaolu.com/archives/85/" target="_blank" class="post_inser_a no-external-link no-underline-link">
<div class="inner-image bg" style="background-image: url(http://blog.ruixiaolu.com/usr/themes/handsome/assets/img/sj/5.jpg);background-size: cover;"></div>

<div class="inner-content" >
<p class="inser-title">Handsome 主题解决 CodePrettify 代码高亮插件与 Vditor 兼容问题</p>
<div class="inster-summary text-muted">
前言CodePrettify 是一款基于prismjs的代码语法高亮typecho插件，支持众多常见的代码语言高亮...
</div>
</div>
</a>

</div>

</div>

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

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

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

## 使用方法

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

## 下载
<div class="tip inlineBlock warning">

仅针对 Handsome v7.3.1 版本进行了测试，如您遇到样式问题，请留言反馈，并附加演示地址。（评论区未启用 Markdown 解析，直接填写网站链接或截图链接即可）
</div>
<div class="hideContent">此处内容需要评论回复后（审核通过）方可阅读。</div>

## 举例
<div class="tip inlineBlock success">

绿色提示
</div>

php 代码正常高亮：
```php
\```php(语言类型必填)
<?php echo 'hello jrotty!'; ?>
\```
删除上边代码中的\
```
流程图正常渲染：
```mermaid
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](https://www.xcnte.com/archives/523/) 插件，在此表示感谢🙏

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

最后修改：2021 年 03 月 11 日

如果觉得我的文章对你有用，请随意赞赏

发表评论取消回复

评论 *

私密评论

名称 *

🎲

邮箱 *

地址

48 条评论

superzhaoyang Google Chrome 87.0.4280.66 Windows 10 中国天津
January 30th, 2021 at 11:56 am

你好

回复
顾思维 Google Chrome 78.0.3904.108 Windows 7 中国辽宁葫芦岛
January 30th, 2021 at 10:37 am

大佬，我又有问题了，替换了handsome.min.css 文件后，插入高亮引用样式里的红色和绿色出现了一个显示乱码的错误，出现如图情况https://imgchr.com/i/yFUJUJ，要怎么解决啊！这是不是个bug啊！虽然无伤大雅，但是强迫症很难受啊！！！向大佬求助！！！

回复
1. Rainshaw Edge 88.0.705.53 Windows 10 中国北京
  January 30th, 2021 at 03:03 pm
  
  @顾思维
  
  额，新文件已修复，但可能存在cdn缓存
  你可以到CodePrettify作者那里下载handsome.min.css文件，目前这两个插件的这个文件都是相同的
  
  回复
顾思维 Google Chrome 80.0.3987.163 Windows 10 中国辽宁葫芦岛
January 29th, 2021 at 06:45 pm

大佬啊，首页标题都居中了怎么办啊，用完之后

回复
1. Rainshaw Edge 88.0.705.53 Windows 10 美国
  January 29th, 2021 at 06:51 pm
  
  @顾思维
  
  额，这是正常的，不需要的话，你可以自己改一下css文件 |´・ω・)ノ
  
  回复
  1. 顾思维 Google Chrome 80.0.3987.163 Windows 10 中国辽宁葫芦岛
    January 29th, 2021 at 06:52 pm
    
    @Rainshaw
    
    大佬，我自己不会改，小白一个，求教怎么改呀
    
    回复
    
    Rainshaw Edge 88.0.705.53 Windows 10 美国
    January 29th, 2021 at 06:57 pm
    
    @顾思维
    
    下载的handsome.min.css 里搜索 .index-post-title{font-size:22px;padding-bottom:1px;text-align:center}
    然后把 ;text-align:center 删了就行了
    
    回复
    
    顾思维 Google Chrome 80.0.3987.163 Windows 10 中国辽宁葫芦岛
    January 29th, 2021 at 07:26 pm
    
    @Rainshaw
    
    感恩感恩，谢谢大佬！！！
    
    回复
顾思维 Google Chrome 80.0.3987.163 Windows 10 中国辽宁葫芦岛
January 29th, 2021 at 06:25 pm

感谢博主

回复
漠子荀 Google Chrome 87.0.4280.88 Windows 10 中国吉林通化
January 29th, 2021 at 09:55 am

感谢分享

回复
N次元 Google Chrome 88.0.4324.104 Windows 10 中国陕西渭南
January 27th, 2021 at 10:07 am

多谢

回复
Hsinyan Edge 87.0.664.75 Windows 10 日本
January 20th, 2021 at 02:59 am

谢谢博主

回复
marccy Edge 87.0.664.75 Windows 10 中国广东惠州
January 17th, 2021 at 08:26 pm

博主nb

回复
酸菜鱼 Edge 87.0.664.75 Windows 10 中国江苏苏州
January 17th, 2021 at 06:12 pm

nb

回复
加两份虾滑 Edge 87.0.664.75 Windows 10 中国湖北黄冈
January 16th, 2021 at 04:14 pm

谢谢博主！！！

回复