如何在 Hexo 博客中插入伪代码

692 字
3 分钟
如何在 Hexo 博客中插入伪代码

在技术博客中,优雅地展示算法伪代码是常见需求。但是 Hexo 本身并不支持 LaTeX\LaTeX 的,Hexo 默认只支持常规代码高亮,无法直接渲染算法伪代码。当然,Hexo 提供丰富的插件,但是我搜索后并没有找到相关的(如果是我遗漏了,可以在评论区指出)。

所以,自行摸索后,找到以下的替代方法:

pseudocode.js 是一个 JavaScript 库,可将伪代码精美地排版为 HTML,轻量且兼容多种浏览器。以下是具体的配置步骤,由于我使用的是 Fluid 主题模板,支持直接在主题配置文件中引入自定义的 css 和 js 文件,不同主题可能存在区别,但原理类似。

1. 具体步骤#

步骤一:引入依赖#

1. 引入 CSS#

在 source/css/custom.css 末尾添加:

@import url('https://cdn.jsdelivr.net/npm/pseudocode@2.4.1/build/pseudocode.min.css');

2. 动态引入 JS#

编辑 source/js/custom.js,添加如下内容:

// 动态加载 JS 文件
function loadScript(url) {
return new Promise((resolve, reject) => {
const script = document.createElement('script');
script.src = url;
script.onload = resolve;
script.onerror = reject;
document.head.appendChild(script);
});
}
// 加载 KaTeX 和 Pseudocode.js
Promise.all([
loadScript('https://cdn.jsdelivr.net/npm/katex@0.16.2/dist/katex.min.js'),
loadScript('https://cdn.jsdelivr.net/npm/pseudocode@2.4.1/build/pseudocode.min.js')
]).then(() => {
if (typeof pseudocode === 'undefined') {
console.error('Pseudocode.js not loaded');
return;
}
// 匹配 Hexo 渲染后的伪代码块
const pseudocodes = document.querySelectorAll('figure.highlight table tr td.code pre code.hljs.pseudocode');
// 渲染每个伪代码块
const options = {
lineNumber: true,
lineNumberPunc: ':',
noEnd: false,
titlePrefix: 'Algorithm'
};
pseudocodes.forEach((codeBlock) => {
try {
const code = codeBlock.textContent;
const container = codeBlock.closest('figure.highlight');
const newContainer = document.createElement('div');
newContainer.className = 'pseudocode-container';
pseudocode.render(code, newContainer, options);
container.parentNode.replaceChild(newContainer, container);
} catch (error) {
console.error('Error rendering pseudocode:', error);
}
});
}).catch(error => {
console.error('Error loading required scripts:', error);
});

这里主要是查找原页面 HTML 中的伪代码并渲染。具体可以参考 pseudocode官方文档;

步骤二:美化伪代码样式#

我在使用默认配置渲染时,会出现行号和标点换行的问题,如果出现这一问题,则在 source/css/custom.css 末尾添加如下样式,保证行号悬挂、缩进美观:

.pseudocode-container .ps-line {
position: relative;
padding-left: 2.5em !important;
text-indent: 0 !important;
}
.pseudocode-container .ps-linenum {
position: absolute !important;
/* 不强制 left: 0,保留 JS 计算的 left,兼容多层嵌套 */
min-width: 2em;
text-align: right;
white-space: nowrap;
color: #607080;
font-variant-numeric: tabular-nums;
line-height: inherit;
}

步骤三:在 Markdown 中书写伪代码#

直接在 Markdown 文件中使用如下格式:

\begin{algorithm}
\caption{Quicksort}
\begin{algorithmic}
\PROCEDURE{Quicksort}{$A, p, r$}
\IF{$p < r$}
\STATE $q = $ \CALL{Partition}{$A, p, r$}
\STATE \CALL{Quicksort}{$A, p, q - 1$}
\STATE \CALL{Quicksort}{$A, q + 1, r$}
\ENDIF
\ENDPROCEDURE
\PROCEDURE{Partition}{$A, p, r$}
\STATE $x = A[r]$
\STATE $i = p - 1$
\FOR{$j = p$ \TO $r - 1$}
\IF{$A[j] < x$}
\STATE $i = i + 1$
\STATE exchange $A[i]$ with $A[j]$
\ENDIF
\ENDFOR
\STATE exchange $A[i+1]$ with $A[r]$
\ENDPROCEDURE
\end{algorithmic}
\end{algorithm}

2. 常见问题与解决#

  • 行号换行/错位:请务必添加上文的 CSS,保证 .ps-linenum 不换行且悬挂。
  • 嵌套算法块行号对齐:推荐保留 Pseudocode.js 的 left 机制,CSS 不要强制 left: 0,以兼容多层嵌套。

如有疑问,欢迎留言交流!

文章分享

如果这篇文章对你有帮助,欢迎分享给更多人!

如何在 Hexo 博客中插入伪代码
https://blog.yokumi.cn/posts/how-to-insert-pseudocode-in-hexo-blog/
作者
Yokumi
发布于
2025-05-19
许可协议
CC BY-NC-SA 4.0
相关文章智能推荐
1
博客美化记录
开发心得众所周知, 一个好的前端/排版是继续做下去的动力(bushi) 。 难得有空,继续来建设一下博客,简单美化一下前端。 引入自定义的 JS/CSS/HTML 是继续下列美化操作的条件,可以通过以下主题配置(楼主使用的是 Fluid 主题,不同主题之间可能存在一些差异)。你可以在配置文件中找到:
2
使用 Cloudflare R2 + WebP Cloud + PicGo 搭建你的图床
开发心得一开始使用了 jsDelivr 加速 Github 图床,但是实际使用中发现有时国内到 jsDelivr 的网络质量仍不稳定,或是存在 DNS 污染,并且使用 Github 作为图床容易污染 commit 记录。于是打算放弃这种依赖纯 CDN 的方式,转向 OSS ,加上刚好有优化博客访问的需求,以及赛博活菩萨 Cl…
3
使用jsDelivr加速Github图床
开发心得对于个人博客,图片如果保存在本地,迁移时总是不太方便。一种比较好的方式就是使用图床,无需再担心迁移时的麻烦。像腾讯云、阿里云和七牛云等厂商都提供稳定但收费的 OSS 对象存储服务,国内免费的图床也有,不过多数有上传限制,或存在不稳定的因素(毕竟公益运营,存在跑路可能性),并且有些会对图片内容的合规性进行检测(比如二维…
4
第一台 VPS 折腾小记
开发心得在使用本项目/教程/脚本之前,请务必仔细阅读以下声明。一旦您开始使用、复制或修改相关内容,即视为您已完全接受并同意本免责声明的所有条款。 请谨记:使用技术时请务必遵守您所在国家和地区的法律法规。 使用 IPv6-only VPS 低成本独享家宽,解锁 ChatGPT 不风控
5
2026.5 Live Repo
生活杂谈翻了翻相册才发现上一次已经是去年 9 月的羊文学了,哎gszm坏事做尽。 这回的出行方式是经典京沪高铁二等座,去年锅贴得意之作绿皮 D9 真给我坐麻了,这次果断 G 系列。不过被课表背刺,本来还可以买早一班(),结果就是快 0 点才到虹桥。好像是第一次这么晚到沪国。

评论区

文章目录