rollup-plugin-github-code-import
v0.2.0
Published
Rollup plugin that imports code from a GitHub URL
Downloads
2
Maintainers
Readme
rollup-plugin-github-code-import
This is a Rollup plugin that imports code from a GitHub URL in fenced code blocks, inspired by docusaurus-theme-github-codeblock.
[!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 { githubCodeImport } from 'rollup-plugin-github-code-import';
export default defineConfig({
vite: {
plugins: [githubCodeImport],
},
});
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.
The documentation 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: '';
}
Examples
The output of the following examples can be found at the documentation page.
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.
```ts reference
https://github.com/haocheng6/rollup-plugin-github-code-import/blob/d9d8c354f3dcad786aad4c5a7aa154f42f2ba7ff/src/index.ts
```
Importing a Range of Lines
The plugin can also import only a range of lines from GitHub.
```ts reference
https://github.com/haocheng6/rollup-plugin-github-code-import/blob/d9d8c354f3dcad786aad4c5a7aa154f42f2ba7ff/src/index.ts#L10-L20
```
Importing a Single Line
Specify only one line at the end of the GitHub URL if that is all you want to import.
```ts reference
https://github.com/haocheng6/rollup-plugin-github-code-import/blob/d9d8c354f3dcad786aad4c5a7aa154f42f2ba7ff/src/index.ts#L16
```
Line Highlighting
This plugin works with the line highting extension of VitePress.
```ts{2} reference
https://github.com/haocheng6/rollup-plugin-github-code-import/blob/d9d8c354f3dcad786aad4c5a7aa154f42f2ba7ff/src/index.ts#L10-L20
```
Line Numbers
This plugin also works with the line number extension of VitePress.
```ts:line-numbers=10 reference
https://github.com/haocheng6/rollup-plugin-github-code-import/blob/d9d8c354f3dcad786aad4c5a7aa154f42f2ba7ff/src/index.ts#L10-L20
```