代码块样式优化,参考
- https://gemini.vercel.ai/
- https://github.com/vercel-labs/gemini-chatbot/blob/main/components/ui/codeblock.tsx
经过一段时间的折腾,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
使用说明 https://nextra.site/docs/guide/syntax-highlighting
docusaraus
https://docusaurus.io/docs/markdown-features/code-blocks