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

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

所以，自行摸索后，找到以下的替代方法：

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

1. 具体步骤

步骤一：引入依赖

1. 引入 CSS

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

@import url('https://cdn.jsdelivr.net/npm/[email protected]/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/[email protected]/dist/katex.min.js'),
    loadScript('https://cdn.jsdelivr.net/npm/[email protected]/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，以兼容多层嵌套。

---

如有疑问，欢迎留言交流！