rollup-plugin-github-code-import

This plugin imports code from a GitHub URL in fenced code blocks.

TIP

The content of such codeblocks is replaced at build time, so it is recommended to use permalinks from GitHub.

Installation

npm i -D rollup-plugin-github-code-import

Usage

To use this plugin in a VitePress project, add it to the vite.plugins config:

import { defineConfig } from 'vitepress';
import { githubCodeImport } from 'rollup-plugin-github-code-import';

export default defineConfig({
  title: 'rollup-plugin-github-code-import',
  description: 'Rollup plugin that imports code from a GitHub URL.',
  base: '/rollup-plugin-github-code-import/',
  themeConfig: {
    socialLinks: [
      {
        icon: 'github',
        link: 'https://github.com/haocheng6/rollup-plugin-github-code-import',
      },
    ],
  },
  vite: {
    plugins: [githubCodeImport],
  },
});

See full example on GitHub

To use custom CSS for fenced code blocks that import code from GitHub, add a custom CSS file to your VitePress project by following VitePress instructions.

This page uses the following CSS:

.imported-github-code {
  display: flow-root;
  margin-top: 16px;
}

.imported-github-code > div:first-child {
  margin-top: 0;
  margin-bottom: 4px;
}

.github-code-link {
  float: right;
  font-size: 0.875rem;
}

.github-code-link > a::after {
  content: '';
}

See full example on GitHub

Examples

Importing an Entire File

To import code from GitHub, simply add reference to the opening line of a fenced code block and add the GitHub URL to the content of the code block.

Input:

```ts reference
https://github.com/haocheng6/rollup-plugin-github-code-import/blob/d9d8c354f3dcad786aad4c5a7aa154f42f2ba7ff/src/index.ts
```

Output:

import { type Plugin } from 'rollup';
import remarkFrontmatter from 'remark-frontmatter';
import remarkGithubCodeImport from 'remark-github-code-import';
import { remark } from 'remark';

const remarkProcessor = remark()
  .use(remarkFrontmatter)
  .use(remarkGithubCodeImport, { dedentCode: true });

export const githubCodeImport: Plugin = {
  name: 'rollup-plugin-github-code-import',
  transform: {
    order: 'pre',
    handler: async function (code, id) {
      if (id.endsWith('.md')) {
        return String(await remarkProcessor.process(code));
      }
    },
  },
};

See full example on GitHub

Importing a Range of Lines

The plugin can also import only a range of lines from GitHub.

Input:

```ts reference
https://github.com/haocheng6/rollup-plugin-github-code-import/blob/d9d8c354f3dcad786aad4c5a7aa154f42f2ba7ff/src/index.ts#L10-L20
```

Output:

export const githubCodeImport: Plugin = {
  name: 'rollup-plugin-github-code-import',
  transform: {
    order: 'pre',
    handler: async function (code, id) {
      if (id.endsWith('.md')) {
        return String(await remarkProcessor.process(code));
      }
    },
  },
};

See full example on GitHub

Importing a Single Line

Specify only one line at the end of the GitHub URL if that is all you want to import.

Input:

```ts reference
https://github.com/haocheng6/rollup-plugin-github-code-import/blob/d9d8c354f3dcad786aad4c5a7aa154f42f2ba7ff/src/index.ts#L16
```

Output:

return String(await remarkProcessor.process(code));

See full example on GitHub

Line Highlighting

This plugin works with the line highting extension of VitePress.

Input:

```ts{2} reference
https://github.com/haocheng6/rollup-plugin-github-code-import/blob/d9d8c354f3dcad786aad4c5a7aa154f42f2ba7ff/src/index.ts#L10-L20
```

Output:

export const githubCodeImport: Plugin = {
  name: 'rollup-plugin-github-code-import',
  transform: {
    order: 'pre',
    handler: async function (code, id) {
      if (id.endsWith('.md')) {
        return String(await remarkProcessor.process(code));
      }
    },
  },
};

See full example on GitHub

Line Numbers

This plugin also works with the line number extension of VitePress.

Input:

```ts:line-numbers=10 reference
https://github.com/haocheng6/rollup-plugin-github-code-import/blob/d9d8c354f3dcad786aad4c5a7aa154f42f2ba7ff/src/index.ts#L10-L20
```

Output:

export const githubCodeImport: Plugin = {
  name: 'rollup-plugin-github-code-import',
  transform: {
    order: 'pre',
    handler: async function (code, id) {
      if (id.endsWith('.md')) {
        return String(await remarkProcessor.process(code));
      }
    },
  },
};

See full example on GitHub