如何在终端高亮输出代码 - shiki

如果是高亮输出文件可以直接 bunx @shiki/cli somefile.xyz --lang=ts --theme='dark-plus'。见 shiki.style/packages/cl… 。

theme 见 shiki.style/themes 。

如果想 console.log 也能输出高亮代码，文档并未给出答案，需要自行研究下 @shiki/cli 是如何做到高亮的。先给出答案，大家可以抄作业：

import { codeToANSI } from '@shikijs/cli';

const code = `
function greet(name: string): void {
  console.log('Hello \${name} 🚀!')
}

greet("Legend80s")
`;
const pretty = await codeToANSI(code, 'typescript', 'dark-plus');

console.log(pretty);

效果：

浅析

codeToANSI 底层是用 codeToTokensBase 转成 token 然后利用 chalk 这个包来着色。

import c from 'chalk'
import { codeToTokensBase } from 'shiki'

for (const line of lines) {
    for (const token of line) {
      let text = token.content
      const color = token.color || themeReg.fg
      if (color)
        text = c.hex(hexApplyAlpha(color, themeReg.type))(text)
      if (token.fontStyle === FontStyle.Bold)
        text = c.bold(text)
      if (token.fontStyle === FontStyle.Italic)
        text = c.italic(text)
      output += text
    }
    output += '\n'
}

代码：

提个 PR

要是能支持 echo 'const a = 1' | bunx @shiki/cli 管道方式高亮就好了，我们尝试提一个 PR。