通过文件生成代码块（CodeBlock扩展）

本文介绍如何通过remark-code-import插件实现从文件生成代码块的功能。即不需要在文档中写代码，在写代码块是通过file属性引入代码文件，自动生成代码块。

插件地址：https://github.com/kevin940726/remark-code-import

注意

此插件只能导入项目内的文件，无法导入网络位置的文件。

安装 remark-code-import

需要安装在 devDependencies 中。

npm install -D remark-code-import

npm

配置

docusaurus.config.ts

import codeImport from 'remark-code-import';

export default {
    presets: [
        [
            '@docusaurus/preset-classic',
            {
                docs: {
                    path: 'docs',
                    remarkPlugins: [codeImport],
                },
            },
        ],
    ],
};

ts

使用举例

```ts file=<rootDir>/src/components/Highlight.js
```

效果如下：

import React from 'react';

export default function Highlight({children, backgroundColor = '#1877F2', color = '#fff'}) {
    return (
        <span
            style={{
                backgroundColor: backgroundColor,
                borderRadius: '2px',
                color: color,
                padding: '0.2rem',
            }}>
      {children}
    </span>
    );
}

ts

加载指定行数的代码

只加载第一行

```ts file=<rootDir>/src/components/Highlight.js#L1
```

import React from 'react';

ts

加载第7行到第10行

```ts file=<rootDir>/src/components/Highlight.js#L1-L10
```

import React from 'react';

export default function Highlight({children, backgroundColor = '#1877F2', color = '#fff'}) {
    return (
        <span
            style={{
                backgroundColor: backgroundColor,
                borderRadius: '2px',
                color: color,
                padding: '0.2rem',

ts

加载第3行到最后

```ts file=<rootDir>/src/components/Highlight.js#L3-
```

export default function Highlight({children, backgroundColor = '#1877F2', color = '#fff'}) {
    return (
        <span
            style={{
                backgroundColor: backgroundColor,
                borderRadius: '2px',
                color: color,
                padding: '0.2rem',
            }}>
      {children}
    </span>
    );
}

ts

与Docusaurus CodeBlock的自带功能搭配使用

显示行数

```ts file=<rootDir>/src/components/Highlight.js#L3- showLineNumbers
```

markdown

export default function Highlight({children, backgroundColor = '#1877F2', color = '#fff'}) {
    return (
        <span
            style={{
                backgroundColor: backgroundColor,
                borderRadius: '2px',
                color: color,
                padding: '0.2rem',
            }}>
      {children}
    </span>
    );
}

ts

代码高亮

```ts file=<rootDir>/src/components/Highlight.js#L3- showLineNumbers {5-8}
```

markdown

export default function Highlight({children, backgroundColor = '#1877F2', color = '#fff'}) {
    return (
        <span
            style={{
                backgroundColor: backgroundColor,
                borderRadius: '2px',
                color: color,
                padding: '0.2rem',
            }}>
      {children}
    </span>
    );
}

ts