第4页 - Handsome 主题解决 CodePrettify 代码高亮插件与 Vditor 兼容问题

Handsome 主题解决 CodePrettify 代码高亮插件与 Vditor 兼容问题

2020 年 11 月 21 日

7646 次浏览

1343字数

本文内容可能已经过期，或存在部分bug，新方法参见
</div>
<div class="preview">
<div class="post-inser post box-shadow-wrap-normal">
<a href="https://blog.ruixiaolu.com/archives/89/" target="_blank" class="post_inser_a no-external-link no-underline-link">
<div class="inner-image bg" style="background-image: url(https://blog.ruixiaolu.com/usr/themes/handsome/assets/img/sj/5.jpg);background-size: cover;"></div>

<div class="inner-content" >
<p class="inser-title">Typecho 插件——MacHighlight 代码语法高亮插件</p>
<div class="inster-summary text-muted">

</div>
</div>
</a>

</div>

</div>

## 前言

[CodePrettify](https://www.xcnte.com/archives/523/) 是一款基于prismjs的代码语法高亮typecho插件，支持众多常见的代码语言高亮显示，共提供11种代码高亮风格自由切换，支持显示代码语言类型、行号，以及支持复制代码到剪切板功能。

[Handsome](https://www.ihewro.com/archives/489/) 是友人C为 typecho开发的一款主题，Handsome最新版本引入了Vditor这一Markdown解析器，支持了许多新的语法。

而据 CodePrettify 作者 Xcnte 的[描述](https://www.xcnte.com/archives/523/comment-page-2#comment-2816)，近期内他不考虑做 Vditor.js的兼容，如果要用 CodePrettify 这一插件的话，就要使用 typecho 自带的 markdown 解析器。这样也就无法使用新解析器带来的诸多特性了。这对我来说简直无法忍受，于是花费了一些时间，做了下兼容工作。

## 兼容方法

1. 启用 CodePrettify 插件，并进行相应配置（一定要设置成显示行号！）。
2. 删除原作者让您添加到主题插件中的 Pjax 回调函数。
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>

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

最后修改：2020 年 12 月 05 日