Use Bun Link for Package Development
在本地开发与调试npm library时,可使用bun link[1]可以简化流程,允许你在一个项目中实时使用另一个本地开发的库,无需在npm registry发布N个alpha/beta版本进行测试。
Use Bun Link for Package Development
在本地开发与调试npm library时,可使用bun link[1]可以简化流程,允许你在一个项目中实时使用另一个本地开发的库,无需在npm registry发布N个alpha/beta版本进行测试。
Use Shiki StyleToClass Transformer
Shiki 作为比较流行的代码高亮工具,提供比 highlight.js更准确的代码高亮效果;以 console.log("hello")为例,Shiki 高亮器按照代码语义将其拆分为 6 部分;其被 <span>标签包裹,标签的内联样式中可能有 color,font-style等属性以及一些 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 高亮器的输出。
于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!"`printf("Hello, World")print("Hello, World")console.log("Hello, World")<h1>Hello, World!</h1>fn main() { println!("Hello, World!"); }echo "Hello, World!"Catppuccin配色已看腻,今日开发了博客主题&Shiki主题切换功能,支持多种主题;本文简单记录实现思路。
🖥️ System • 🌿 Catppuccin • 🌃 Tokyo Night • 🦭 Nord
最近写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.但默认行为并不友好。跳转后内容经常被博客顶部的固定导航栏遮挡住,无法看到跳转后的内容。本文记录优化方案
Lua LS添加类型提示 - 以Sketchybar Module为例
在 macOS 上使用 Sketchybar 进行状态栏自定义时,可以使用 FelixKratz/SbarLua 提供的API与SketchyBar进行交互:
local wifi = SBAR.add("wifi", "item")wifi:set({ label = "My Wife" })但该模块由 C 编写,编译后是二进制文件 sketchybar.so,Lua 语言服务器(Lua LS) 无法像读取Lua文件那样对其分析,因此无法其提供的API进行补全,类型提示
本文记录如何让IDE支持识别 Sketchybar 模块的类型,适用于 VSCode,Neovim,JetBrains IDEs
FOSS Music Player: MPD, MPC, and RMPC