SvelteKit 中使用 Rehype Pretty Code：提升文档代码展示体验

SvelteKit 中使用 Rehype Pretty Code：提升文档代码展示体验

【免费下载链接】rehype-pretty-code Beautiful code blocks for Markdown or MDX. 项目地址: https://gitcode.com/gh_mirrors/re/rehype-pretty-code

Rehype Pretty Code 是一款强大的代码块美化工具，专为 Markdown 或 MDX 文档设计。在 SvelteKit 项目中集成 Rehype Pretty Code 可以让你的代码展示更加美观、专业，提升读者的阅读体验。本文将详细介绍如何在 SvelteKit 项目中配置和使用 Rehype Pretty Code，让你的代码块焕发新的生命力。

为什么选择 Rehype Pretty Code？

在技术文档中，代码展示的清晰度和美观度直接影响读者的理解效率。Rehype Pretty Code 提供了丰富的功能，包括语法高亮、行号显示、代码块标题、行高亮等，能够满足各种文档展示需求。与其他代码美化工具相比，Rehype Pretty Code 具有配置灵活、性能优秀、兼容性好等优点，特别适合 SvelteKit 这类现代前端框架。

Rehype Pretty Code 渲染的代码块示例，展示了语法高亮和行高亮功能

快速安装与基础配置

安装依赖

首先，在你的 SvelteKit 项目中安装 Rehype Pretty Code 及其相关依赖：

npm install rehype-pretty-code shiki

配置 SvelteKit 中的 Markdown 处理器

SvelteKit 通常使用 @sveltejs/kit/markdown 或第三方库如 mdsvex 来处理 Markdown 文件。以下是使用 mdsvex 时的配置示例：

在 svelte.config.js 中添加 Rehype Pretty Code 插件：

import { mdsvex } from 'mdsvex';
import rehypePrettyCode from 'rehype-pretty-code';

export default {
  extensions: ['.svelte', '.mdx'],
  preprocess: [
    mdsvex({
      extensions: ['.mdx'],
      rehypePlugins: [
        [rehypePrettyCode, {
          // 基础配置
          theme: 'moonlight-ii',
          keepBackground: true
        }]
      ]
    })
  ]
};

高级功能配置

自定义主题

Rehype Pretty Code 支持多种代码主题，你可以在配置中指定主题文件路径：

[rehypePrettyCode, {
  theme: {
    dark: 'examples/sveltekit/static/theme/moonlight-ii.json',
    light: 'examples/sveltekit/static/theme/github-light.json'
  }
}]

代码块标题和行号

通过在代码块元数据中添加配置，可以显示标题和行号：

```ts title="src/lib/markdown.ts" showLineNumbers
import { createProcessor } from '@mdx-js/mdx';
import rehypePrettyCode from 'rehype-pretty-code';

export function createMdxProcessor() {
  return createProcessor({
    rehypePlugins: [
      [rehypePrettyCode, { theme: 'moonlight-ii' }]
    ]
  });
}

### 行高亮和代码折叠

使用 `highlightLines` 和 `foldable` 属性可以实现行高亮和代码折叠功能：

```mdx
```ts highlightLines="4" foldable
function MyComponent() {
  const { refs, floatingStyles } = useFloating();
  
  return (
    <>
      <div ref={refs.setReference} />
      <div ref={refs.setFloating} style={floatingStyles} />
    </>
  );
}

## 实际应用示例

在 SvelteKit 项目中，你可以创建一个 Markdown 组件来统一处理代码展示：

```svelte
<!-- src/lib/components/Markdown.svelte -->
<script lang="ts">
  import { compile } from 'mdsvex';
  import rehypePrettyCode from 'rehype-pretty-code';

  export let content: string;

  const processed = await compile(content, {
    rehypePlugins: [
      [rehypePrettyCode, {
        theme: 'moonlight-ii',
        showLineNumbers: true
      }]
    ]
  });
</script>

{@html processed.code}

常见问题解决

主题不生效

如果代码主题没有正确应用，请检查主题文件路径是否正确，确保 JSON 格式的主题文件存在于指定位置。

性能优化

对于包含大量代码块的文档，可以启用代码块懒加载，只在滚动到可视区域时才渲染代码块，提升页面加载速度。

总结

通过本文的介绍，你已经了解了如何在 SvelteKit 项目中集成和配置 Rehype Pretty Code。这款强大的工具不仅能让你的代码展示更加美观，还能提供丰富的交互功能，提升文档的专业性和可读性。无论是个人博客、开源项目文档还是企业技术文档，Rehype Pretty Code 都是一个值得尝试的选择。

现在，就动手在你的 SvelteKit 项目中集成 Rehype Pretty Code，让你的代码展示焕发新的光彩吧！

【免费下载链接】rehype-pretty-code Beautiful code blocks for Markdown or MDX. 项目地址: https://gitcode.com/gh_mirrors/re/rehype-pretty-code