GnixAij-Blog

2025-12-02Dev/FrontEnd约263字

在本地开发与调试npm library时，可使用bun link^[1]可以简化流程，允许你在一个项目中实时使用另一个本地开发的库，无需在npm registry发布~~N个alpha/beta版本~~进行测试。

2025-11-30Dev/FrontEnd约1155字

Shiki 作为比较流行的代码高亮工具，提供比 highlight.js更准确的代码高亮效果；以 console.log("hello")为例，Shiki 高亮器按照代码语义将其拆分为 6 部分；其被 <span>标签包裹，标签的内联样式中可能有 color,font-style等属性以及一些 CSS 变量^[1]，用于实现颜色^[2]以及字体^[3]的多主题适配

markdown
html_output
with_styleToClass

const code = await codeToHtml('console.log("hello")', {  lang: "javascript",  themes: { light: "min-light", dark: "nord" },});

HTML

<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>

HTML

<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 高亮器的输出。

2025-11-21Dev/FrontEnd约1457字

使用Shiki高亮行内代码

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

先展示一下预览效果

MarkDown
HTML

- **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!"

2025-11-18Dev/FrontEnd约1663字

网站Dark Mode&多配色主题开发

Catppuccin配色已看腻，今日开发了博客主题&Shiki主题切换功能，支持多种主题；本文简单记录实现思路。

🖥️ System • 🌿 Catppuccin • 🌃 Tokyo Night • 🦭 Nord

2025-11-17Dev/FrontEnd约396字

Blog页内跳转体验优化

最近写markdown比较爱用footnote^[1]，点击后可在网页中使用跳转。

Here's a simple footnote,[^1] and here's a longer one.[^bignote][^1]: This is the first footnote.[^bignote]: Here's one with multiple paragraphs and code.    Indent paragraphs to include them in the footnote.    `{ my code }`    Add as many paragraphs as you like.