在 Sanity 博客中集成代码块和语法高亮
内容提要
本文介绍了如何在Sanity博客中集成代码输入和语法高亮功能。首先安装相应的包，然后添加插件和更新Schema。接下来，更新RenderBodyContent组件以渲染代码片段。最后，可以根据需要更改主题。通过本教程，成功将代码块和语法高亮集成到Sanity博客中。
延伸解读
为什么需要手动集成代码块
Sanity 默认的 Block Content 并不包含代码输入类型，因此即使博客其他部分已完成，代码片段也无法直接插入。文章通过安装 @sanity/code-input 插件并更新 blockContent schema，为编辑器添加了代码块选项。这提醒我们，Sanity 的灵活性意味着许多功能需要按需扩展，而不是开箱即用。
前后端配合的两个关键步骤
集成过程分为 Studio 端和前端渲染两部分。Studio 端通过插件和 schema 让编辑者能输入代码并选择语言；前端则需要更新 RenderBodyContent 组件，使用 react-syntax-highlighter 将代码数据渲染为高亮块。两者缺一不可，只做其中一步会导致代码无法显示或没有高亮效果。
主题更换与语言支持
文章展示了如何通过更换 react-syntax-highlighter 的样式对象来改变高亮主题，例如从 dracula 换成 dark。同时，schema 中的 languageAlternatives 允许预设可选语言，如 JavaScript、HTML、CSS 等。这意味着你可以根据博客风格和读者需求，灵活调整外观与支持的代码类型。
Q&A
如何在Sanity博客中集成代码输入功能？
首先安装sanity/code-input包，然后在sanity.config.ts文件中添加该插件。
如何更新BlockContent Schema以支持代码块？
在blockContent.ts文件中添加代码块的Schema定义，包括语言选项。
如何在博客文章中添加代码片段？
点击代码块按钮，输入代码并从下拉菜单中选择语言，然后关闭模态框保存代码片段。
如何更新RenderBodyContent组件以渲染代码片段？
导入SyntaxHighlighter和所需的样式，然后创建Code组件并在components中更新。
如何更改语法高亮的主题？
导入所需的主题样式并在Code组件中更新style属性即可更改主题。
集成代码块和语法高亮的最终结果是什么？
成功将代码块和语法高亮集成到Sanity博客中，提升了代码展示效果。
