dors 代码块组件的构建

dors 代码块组件的构建

代码块样式优化,参考https://gemini.vercel.ai/https://github.com/vercel-labs/gemini-chatbot/blob/main/component...

花野猫

花野猫

更新于 2024-07-28

478

代码块样式优化,参考

经过一段时间的折腾,dors 终于有了能看好用的代码块,具备了以下功能:

  • 语法高亮
  • 复制到剪贴板
  • 语种显示
  • 行高亮 实际搭建方法并不复杂,主要用到了这样一些依赖:
typescript
type AddFunction = (a: number, b: number) => number;
const add: AddFunction = (a, b) => {
return a + b;
};

需注意实现行高亮还需添加 css 样式 https://www.npmjs.com/package/remark-shiki-twoslash

参考

nextra

nextra 的代码块
nextra 的代码块

使用说明 https://nextra.site/docs/guide/syntax-highlighting

docusaraus

docusaraus 的代码块
docusaraus 的代码块

https://docusaurus.io/docs/markdown-features/code-blocks

kimi

kimi 的代码块
kimi 的代码块