如何在 Hexo 博客中插入伪代码
692 字
3 分钟
如何在 Hexo 博客中插入伪代码
在技术博客中,优雅地展示算法伪代码是常见需求。但是 Hexo 本身并不支持 的,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.jsPromise.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/相关文章智能推荐
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 点才到虹桥。好像是第一次这么晚到沪国。



