CodePrettify for Typecho - 代码高亮插件

## 想说的话

对于博客来说，最重要的就是页面 **可读性**。清爽大方的页面会让人有一种眼前一亮的感觉，这也是我使用handsome主题的原因。

在技术博客的文章中，难免会出现大量的代码，默认的样式加上大段的代码会引起眼睛疲劳。

这里有一款插件可以解决这个问题。通过使用该插件，读者可以更轻松地区分关键字、注释和其他代码元素，提高了阅读代码的效率。使用这款插件不仅可以提升代码的可读性，还能够为读者带来更愉悦的阅读体验。

本文章采用傻瓜式教程，每一步骤都配有 **演示例图**，对于萌新更友好😉。

## 重要说明

[scode type="yellow" size=""]**该插件仅适用于handsome主题，其他主题会有样式冲突**[/scode]

**handsome主题也内置了一些Mac风格的代码高亮，如果您更喜欢该插件的样式，不妨试一下**

作者已经跑路，插件暂停更新。最新更新时间：[font color="#FF0000"]**2020-08-15**[/font]

该插件基于 **Prismjs** 的代码语法高亮，提供 **9** 种代码高亮风格自由切换，支持显示 **代码语言类型** 、 **行号** ，以及支持 **复制代码** 到剪切板功能

博主在该环境下使用插件完全正常

[scode type="share" size="small"]Typecho版本：1.2.1
Theme：Handsome 9.2.1
PHP版本：8.2[/scode]

## 效果预览

[scode type="blue"]该插件与handsome主题内置的Mac代码高亮不同的是：点击显示代码语言类型和复制按钮，支持Grey的Mac高亮样式，行号样式有所调整[/scode]

```php
/** PHP is the best language for web programming */
<?php echo "Hello World !"; ?>
```

```cpp
#include <iostream>
using namespace std;
 
int main() 
{
    cout << "Hello, World!";
    return 0;
}
```

[scode type="share"]博主使用的代码字体：[Fira Code](https://github.com/tonsky/FiraCode/tree/master)[/scode]

## 实现方法

### First

前往Github仓库下载插件：[button color="black" icon="github" url="https://github.com/Xcnte/Code-Prettify-for-typecho" type=""]CodePrettify[/button]

进入到页面后，点击 [font color="#216e39"]**绿色**[/font] 的 <span class="label label-success">Code</span> 按钮，在弹出小窗口中点击 **Download ZIP** 按钮

[collapse status="false" title="演示例图"]
![Github-CodePrettify»Code](https://www.isajuna.com/usr/uploads/2024/02/3407607085.webp)
![Github-CodePrettify»Download](https://www.isajuna.com/usr/uploads/2024/02/3862184940.webp)
[/collapse]

[scode type="blue" size=""]如果您是用的是 **宝塔面板** ，建议使用远程下载这一功能，省去下载插件到本地再上传到服务器这一中间环节[/scode]

### Next

把下载的压缩包解压到 **Typecho** 程序目录的 **/usr/plugins** 中，将文件夹名称改为 **CodePrettify**

### Then

在Typecho控制台 **插件管理** 中启用 **CodePrettify** 插件
[collapse status="false" title="演示例图"]
![控制台»插件管理](https://www.isajuna.com/usr/uploads/2024/02/1050457263.webp)
![启用CodePrettify插件](https://www.isajuna.com/usr/uploads/2024/02/2282392057.webp)

[/collapse]

[scode type="share" size=""]在 **CodePrettify** 插件设置中，有9种高亮样式可以选择，推荐使用 **GreyMac** 和 **BlackMac** 样式[/scode]

### Last

到 **Then** 这一步，插件已经安装成功了，但是在页面中还会出现一些样式冲突，所以我们需要进一步修改

依次打开 **Typecho控制台** >> **更改外观** >> **设置外观** >> **主题增强功能**

找到主题内置的代码高亮这一项，把它关闭掉

[collapse status="false" title="演示例图"]
![控制台»更改外观](https://www.isajuna.com/usr/uploads/2024/02/782212607.webp)
![外观设置»设置外观](https://www.isajuna.com/usr/uploads/2024/02/837851729.webp)
![内置代码高亮](https://www.isajuna.com/usr/uploads/2024/02/2628711080.webp)
[/collapse]

同样的，在这个页面找到 **开发者设置** >> **自定义CSS**

添加以下CSS代码即可

```Css
#post-content pre code {
    display:block;
    overflow-x:auto;
    position:relative;
    margin:0;
    padding-left:50px;
}

pre code {
    position:relative;
    display:block;
    overflow-x:auto;
    padding:0;
    max-height:500px;
    padding-left:3.5em !important;
}
```

[collapse status="false" title="演示例图"]
![自定义CSS](https://www.isajuna.com/usr/uploads/2024/02/3224927733.webp)
[/collapse]

[scode type="yellow" size=""]注意！如果您的博客开启了 **PJAX**[/scode]
那么请把以下代码添加到 **PJAX** >> **PJAX回调函数**

```JavaScript
if (typeof Prism !== 'undefined') {
var pres = document.getElementsByTagName('pre');
                for (var i = 0; i < pres.length; i++){
                    if (pres[i].getElementsByTagName('code').length > 0)
                        pres[i].className  = 'line-numbers';}
Prism.highlightAll(true,null);}
```

若插件里设置不显示行号，**PJAX函数** 要改为

```JavaScript
if (typeof Prism !== 'undefined') {
Prism.highlightAll(true,null);}
```

[collapse status="false" title="演示例图"]
![PJAX回调函数](https://www.isajuna.com/usr/uploads/2024/02/1461645198.webp)
[/collapse]

## 插件用法

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

[scode type="share" size=""]`C#`代码与 `C++`代码使用 `csharp` 与 `cpp`进行标记声明[/scode]

## 常见问题

Q：无法启用插件或者是启动插件报错500
A：请检查插件文件夹 **名称**

Q：行号错位
A：如果您是handome主题，请检查 **自定义CSS** 设置；其他主题暂未适配

Q：代码高亮样式有时会失效
A：请检查 **PJAX回调函数** 设置

Q：代码高亮样式异常
A：检查前台Markdown解析方式是否为 **Markdown解析**，插件暂未适配 **vditor.js解析**，强行使用会出现样式冲突

[scode type="share" size=""]有问题也欢迎留言；反馈问题请给出演示地址[/scode]

想说的话

对于博客来说，最重要的就是页面 可读性。清爽大方的页面会让人有一种眼前一亮的感觉，这也是我使用handsome主题的原因。

在技术博客的文章中，难免会出现大量的代码，默认的样式加上大段的代码会引起眼睛疲劳。

本文章采用傻瓜式教程，每一步骤都配有 演示例图，对于萌新更友好😉。

重要说明

该插件仅适用于handsome主题，其他主题会有样式冲突

handsome主题也内置了一些Mac风格的代码高亮，如果您更喜欢该插件的样式，不妨试一下

作者已经跑路，插件暂停更新。最新更新时间：2020-08-15

该插件基于 Prismjs 的代码语法高亮，提供 9 种代码高亮风格自由切换，支持显示 代码语言类型 、行号，以及支持 复制代码 到剪切板功能

博主在该环境下使用插件完全正常

效果预览

该插件与handsome主题内置的Mac代码高亮不同的是：点击显示代码语言类型和复制按钮，支持Grey的Mac高亮样式，行号样式有所调整

/** PHP is the best language for web programming */
<?php echo "Hello World !"; ?>

#include <iostream>
using namespace std;
 
int main() 
{
    cout << "Hello, World!";
    return 0;
}

实现方法

First

前往Github仓库下载插件：

进入到页面后，点击绿色的 Code 按钮，在弹出小窗口中点击 Download ZIP 按钮

演示例图

如果您是用的是 宝塔面板 ，建议使用远程下载这一功能，省去下载插件到本地再上传到服务器这一中间环节

把下载的压缩包解压到 Typecho 程序目录的 /usr/plugins 中，将文件夹名称改为 CodePrettify

Then

在Typecho控制台 插件管理 中启用 CodePrettify 插件

演示例图

Last

到 Then 这一步，插件已经安装成功了，但是在页面中还会出现一些样式冲突，所以我们需要进一步修改

依次打开 Typecho控制台 >> 更改外观 >> 设置外观 >> 主题增强功能

找到主题内置的代码高亮这一项，把它关闭掉

演示例图

同样的，在这个页面找到 开发者设置 >> 自定义CSS

添加以下CSS代码即可

#post-content pre code {
    display:block;
    overflow-x:auto;
    position:relative;
    margin:0;
    padding-left:50px;
}

pre code {
    position:relative;
    display:block;
    overflow-x:auto;
    padding:0;
    max-height:500px;
    padding-left:3.5em !important;
}

演示例图

注意！如果您的博客开启了 PJAX

那么请把以下代码添加到 PJAX >> PJAX回调函数

if (typeof Prism !== 'undefined') {
var pres = document.getElementsByTagName('pre');
                for (var i = 0; i < pres.length; i++){
                    if (pres[i].getElementsByTagName('code').length > 0)
                        pres[i].className  = 'line-numbers';}
Prism.highlightAll(true,null);}

若插件里设置不显示行号，PJAX函数 要改为

if (typeof Prism !== 'undefined') {
Prism.highlightAll(true,null);}

演示例图

插件用法

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

C#代码与 C++代码使用 csharp 与 cpp进行标记声明

常见问题

Q：无法启用插件或者是启动插件报错500
A：请检查插件文件夹名称

Q：行号错位
A：如果您是handome主题，请检查 自定义CSS 设置；其他主题暂未适配

Q：代码高亮样式有时会失效
A：请检查 PJAX回调函数 设置

Q：代码高亮样式异常
A：检查前台Markdown解析方式是否为 Markdown解析，插件暂未适配 vditor.js解析，强行使用会出现样式冲突

最后修改：2024 年 10 月 02 日

CodePrettify for Typecho - 代码高亮插件

https://www.isajuna.com/archives/206/

作者

朱茱

发布时间

2024-02-19

许可协议

 CC BY-NC-SA 4.0

5 条评论

北辰
November 26th, 2024 at 09:54 pm

博主有没有兴趣出一个如何单独设置代码字体的教程呀OωO

回复
1. 朱茱
  November 26th, 2024 at 10:03 pm
  
  @北辰
  
  这是具体的实现方法
  /** Fira Code 代码字体 */ @font-face { font-family: 'Fira Code'; src: url('#') } pre,code { font-family: 'Fira Code' !important }
  
  回复
  1. 北辰
    November 26th, 2024 at 10:44 pm
    
    @朱茱
    
    回复
爆胎
May 20th, 2024 at 02:03 pm

我来康康(๑•̀ㅁ•́ฅ)

回复
1. 朱茱
  May 27th, 2024 at 02:27 am
  
  @爆胎
  
  回复