rehype-pretty-code 使用教程

rehype-pretty-code 使用教程

rehype-pretty-codeBeautiful code blocks for Markdown or MDX.项目地址:https://gitcode.com/gh_mirrors/re/rehype-pretty-code

1. 项目的目录结构及介绍

rehype-pretty-code 是一个用于美化代码块的 Rehype 插件。以下是其主要目录结构及其介绍：

rehype-pretty-code/
├── src/
│   ├── index.js
│   ├── options.js
│   ├── themes/
│   │   ├── dark.js
│   │   ├── light.js
│   ├── utils/
│   │   ├── parse.js
│   │   ├── highlight.js
├── package.json
├── README.md
├── LICENSE

• src/：包含项目的主要源代码。
  • index.js：插件的入口文件。
  • options.js：插件的配置选项处理文件。
  • themes/：包含不同的主题文件，如 dark.js 和 light.js。
  • utils/：包含一些工具函数，如 parse.js 和 highlight.js。
• package.json：项目的依赖和脚本配置文件。
• README.md：项目的说明文档。
• LICENSE：项目的开源许可证。

2. 项目的启动文件介绍

项目的启动文件是 src/index.js。这个文件是插件的入口点，负责初始化和配置插件。以下是 index.js 的主要内容：

import { unified } from 'unified';
import rehypeParse from 'rehype-parse';
import rehypeStringify from 'rehype-stringify';
import { rehypePrettyCode } from './index.js';

const processor = unified()
  .use(rehypeParse)
  .use(rehypePrettyCode, { theme: 'dark' })
  .use(rehypeStringify);

processor.process('<pre><code class="language-js">console.log("Hello, world!")</code></pre>', (err, file) => {
  if (err) throw err;
  console.log(String(file));
});

在这个文件中，我们使用 unified 库来创建一个处理器，并依次使用 rehype-parse、rehype-pretty-code 和 rehype-stringify 插件来处理 HTML 内容。

3. 项目的配置文件介绍

项目的配置文件主要是 src/options.js。这个文件定义了插件的配置选项，并提供了默认值。以下是 options.js 的主要内容：

export const defaultOptions = {
  theme: 'dark',
  lineNumbers: false,
  highlightLines: true,
  showLanguage: true,
};

export function getOptions(options) {
  return {
    ...defaultOptions,
    ...options,
  };
}

在这个文件中，我们定义了默认的配置选项，如主题、是否显示行号、是否高亮行和是否显示语言。getOptions 函数用于合并用户提供的选项和默认选项。

通过这些配置选项，用户可以自定义代码块的显示效果，以满足不同的需求。

rehype-pretty-codeBeautiful code blocks for Markdown or MDX.项目地址:https://gitcode.com/gh_mirrors/re/rehype-pretty-code