# rollup-plugin-github-code-import

> Rollup plugin that imports code from a GitHub URL

Latest version **0.2.0** (published 2023-12-27) · MIT license · 0 weekly downloads

## Install

```sh
npm install rollup-plugin-github-code-import
pnpm add rollup-plugin-github-code-import
yarn add rollup-plugin-github-code-import
bun add rollup-plugin-github-code-import
```

## Health

**Score 30/100 (F)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities; high quality score.

Warnings: low downloads; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.2.0 |
| Published | 2023-12-27 |
| First published | 2023-12-25 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM |
| Dependencies | 4 |
| Unpacked size | 6.7 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 0 |
| Author | Hao Cheng |
| Maintainers | haocheng6 |
| Keywords | rollup-plugin, vite-plugin, markdown, code-block |

## Links

- npm: https://www.npmjs.com/package/rollup-plugin-github-code-import
- Repository: https://github.com/haocheng6/rollup-plugin-github-code-import
- Homepage: https://github.com/haocheng6/rollup-plugin-github-code-import#readme
- Issues: https://github.com/haocheng6/rollup-plugin-github-code-import/issues
- npm.io page: https://npm.io/package/rollup-plugin-github-code-import

## Dependencies (4)

- [vfile](https://npm.io/package/vfile.md) ^6.0.1
- [remark](https://npm.io/package/remark.md) ^15.0.1
- [remark-frontmatter](https://npm.io/package/remark-frontmatter.md) ^5.0.0
- [remark-github-code-import](https://npm.io/package/remark-github-code-import.md) ^0.2.0

## Alternatives

- [raw-loader](https://npm.io/package/raw-loader.md) — 4.3M weekly downloads
- [plop](https://npm.io/package/plop.md) — 1.4M weekly downloads
- [webpack-deadcode-plugin](https://npm.io/package/webpack-deadcode-plugin.md) — 80.3K weekly downloads
- [@storybook/preact-vite](https://npm.io/package/@storybook/preact-vite.md) — 54.2K weekly downloads
- [vite-plugin-transform](https://npm.io/package/vite-plugin-transform.md) — 2.4K weekly downloads

## Recent versions

- 0.2.0 (latest) — 2023-12-27
- 0.1.0 — 2023-12-25

## README

# rollup-plugin-github-code-import

This is a [Rollup][1] plugin that imports code from a GitHub URL in fenced code
blocks, inspired by [docusaurus-theme-github-codeblock][2].

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

## Installation

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

## Usage

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

```js
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][3].

The [documentation page][4] uses the following CSS:

```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][4].

### 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.

````markdown
```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.

````markdown
```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.

````markdown
```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.

````markdown
```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.

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

[1]: https://github.com/rollup/rollup
[2]: https://github.com/saucelabs/docusaurus-theme-github-codeblock
[3]: https://vitepress.dev/guide/extending-default-theme#customizing-css
[4]: https://haocheng6.github.io/rollup-plugin-github-code-import

---
_Source: https://npm.io/package/rollup-plugin-github-code-import · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._