OpenCode使用指南

·13 min
,,

OpenCode是一款AI编程工具，产品是开源的，且提供MiniMax 2.1,GLM 4.7和Grok Code Fast 1等免费模型；

本文主要整理「个人使用OpenCode过程中总结的经验」

2025 博客变化

·5 min
,

2025年对Blog功能和性能上做了优化。本文将回顾这一年来的主要变化（主要为流水账）

PostBuild With ESBuild & Minify-HTML

·13 min
,,

静态站点可在CI增加PostBuild环节，进行图片压缩、CSS/JS 压缩合并等流程,以优化网站性能表现。本文主要记录使用ESBuild & minify-html编写PostBuild脚本，实现以下目标：

  • 构建尽量快
  • 压缩器能识别现代CSS/JS 语法
  • 满足以上前提下，尽可能压缩产物体积
  • 在CSS/JS文件名中添加Hash后缀，避免缓存版本混乱问题

Optimize Shiki's HTML Output With styleToClass Transformer

·6 min
,,,

Shiki提供比 highlight.js 更准确的代码高亮效果；以 console.log("hello") 为例，Shiki 高亮器按语义将其拆分为 6 个 <span> 元素，并为其添加内联样式（e.g. color，font-style and CSS 变量[1]），以实现颜色[2]以及字体[3]的多主题适配

const code = await codeToHtml('console.log("hello")', {  lang: "javascript",  themes: { light: "min-light", dark: "nord" },});
<code>  <span class="line">    <span style="color:#1976D2;--shiki-dark:#D8DEE9">console</span>    <span style="color:#6F42C1;--shiki-dark:#ECEFF4">.</span>    <span style="color:#6F42C1;--shiki-dark:#88C0D0">log</span>    <span style="color:#24292EFF;--shiki-dark:#D8DEE9FF">(</span>    <span style="color:#22863A;--shiki-dark:#ECEFF4">"</span>    <span style="color:#22863A;--shiki-dark:#A3BE8C">hello</span>    <span style="color:#22863A;--shiki-dark:#ECEFF4">"</span>    <span style="color:#24292EFF;--shiki-dark:#D8DEE9FF">)</span>  </span></code>
<code>  <span class="line">    <span class="_sk_p7ztx5">console</span>    <span class="_sk_8gyisu">.</span>    <span class="_sk_18gpmt">log</span>    <span class="_sk_23aifj space">(</span>    <span class="_sk_23aifj">"</span>    <span class="_sk_8gyisu">hello</span>    <span class="_sk_18gpmt">""</span>    <span class="_sk_p7ztx5 space">)</span>  </span></code>

上面的示例输出中，HTML 体积尚可接受，一是代码量很小，此外是仅应用了 min-light 和 nord 两种主题，且这两个主题仅在实例代码中嵌入了 color 属性以及 --shiki-dark 变量；

当这些条件不满足时，输出的 HTML 体积会大幅增加。例如个人博客中包含一些长代码片段，同时应用了 catppuccin-latte, catppuccin-mocha, tokyo-night, nord, tokyo-night 5 种主题，输出的 HTML 就略显臃肿；下文将记录如何使用 styleToClass Transformer 来优化 Shiki 高亮器的输出。

Implement Inline Code Highlighting With Markdown-It & Shiki

·8 min
,,,,,

于25/11/20和25/11/21期间开发了 markdown-it-inline-code 项目，用于高亮行内代码。本文包括效果预览，使用方法，以及部分开发历程。

先展示一下预览效果

- **Plain**: `printf("Hello, World")`- **Python**: `{python} print("Hello, World")`- **JavaScript**: `{javascript} console.log("Hello, World")`- **HTML**: `{html} <h1>Hello, World!</h1>`- **Rust** `{rust} fn main() { println!("Hello, World!"); }`- **Shell**: `{shell} echo "Hello, World!"`
  • Plain: printf("Hello, World")
  • Python: print("Hello, World")
  • JavaScript: console.log("Hello, World")
  • HTML: <h1>Hello, World!</h1>
  • Rust fn main() { println!("Hello, World!"); }
  • Shell: echo "Hello, World!"