Shiki 高亮与 Mac 窗口代码预览

文章里的代码有两种样子：普通高亮块，以及套上 Mac 窗口铬的预览。

普通代码块

默认围栏就是普通块：

<script setup lang="ts">
const colorMode = useColorMode()
const isDark = computed(() => colorMode.value === "dark")
</script>

Mac 窗口预览

用 MacWindow 包住围栏，得到红绿灯标题栏：

import { clsx, type ClassValue } from "clsx"
import { twMerge } from "tailwind-merge"

export function cn(...inputs: ClassValue[]) {
  return twMerge(clsx(inputs))
}

主题切换

Shiki 一次输出 light / dark 两套 token。页面根节点带 .dark 时换色，不重新请求。

克制

窗口只用于需要「这是一段可运行源码」的地方。不要给每一段 snippet 都加铬。