# remark-github-code-import

> remark plugin that imports code from a GitHub URL

Latest version **0.2.1** (published 2023-12-28) · MIT license · 0 weekly downloads

## Install

```sh
npm install remark-github-code-import
pnpm add remark-github-code-import
yarn add remark-github-code-import
bun add remark-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.1 |
| Published | 2023-12-28 |
| First published | 2023-12-25 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM |
| Dependencies | 3 |
| Unpacked size | 15.7 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 0 |
| Author | Hao Cheng |
| Maintainers | haocheng6 |
| Keywords | unified, mdast, remark, remark-plugin, plugin, markdown, code-block |

## Links

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

## Dependencies (3)

- [fenceparser](https://npm.io/package/fenceparser.md) ^2.2.0
- [unist-util-visit](https://npm.io/package/unist-util-visit.md) ^5.0.0
- [unist-util-stringify-position](https://npm.io/package/unist-util-stringify-position.md) ^4.0.0

## Alternatives

- [@mdxeditor/editor](https://npm.io/package/@mdxeditor/editor.md) — 962.4K weekly downloads
- [mmdb-lib](https://npm.io/package/mmdb-lib.md) — 680.9K weekly downloads
- [playcanvas](https://npm.io/package/playcanvas.md) — 36.2K weekly downloads
- [@glw907/cairn-cms](https://npm.io/package/@glw907/cairn-cms.md) — 967 weekly downloads
- [markdown-to-confluence](https://npm.io/package/markdown-to-confluence.md) — 103 weekly downloads

## Recent versions

- 0.2.1 (latest) — 2023-12-28
- 0.2.0 — 2023-12-27
- 0.1.3 — 2023-12-27
- 0.1.2 — 2023-12-26
- 0.1.1 — 2023-12-25
- 0.1.0 — 2023-12-25

## README

# remark-github-code-import

This is a [unified][1] ([remark][2]) plugin that imports code from a GitHub URL,
inspired by [docusaurus-theme-github-codeblock][3].

## Installation

```
npm install remark-github-code-import
```

## Usage

```js
import { remark } from 'remark';
import remarkGithubCodeImport from 'remark-github-code-import';
import { read } from 'to-vfile';

const processor = remark().use(remarkGithubCodeImport);
const markdown = await read('example.md');
const result = await processor.process(markdown);

console.log(String(result));
```

## Options

This plugin recognizes the following option:

#### `dedentCode`

Valid values: `boolean`\
Default: `true`

If this option is `true`, the minimum number of leading whitespaces at the
beginning of all extracted lines will be removed from each line. Otherwise, no
whitespaces will be removed.

## Examples

Suppose we have the following Markdown file `example.md`:

````markdown
# Example

```js reference
https://github.com/haocheng6/remark-github-code-import/blob/53802a344076676ef068e236285306f8cee086ba/src/utils.ts#L43-L49
```
````

> [!TIP]
> The line number range at the end of the URL is optional. When no range is
> specified, the content of the entire file will be imported.
> 
> You can also specify a single line like `https://github.com/haocheng6/remark-github-code-import/blob/53802a344076676ef068e236285306f8cee086ba/src/utils.ts#L43`.

### Using the Default Configuration

Running the following JavaScript:

```js
import { remark } from 'remark';
import remarkGithubCodeImport from 'remark-github-code-import';
import { read } from 'to-vfile';

const processor = remark().use(remarkGithubCodeImport);
const markdown = await read('example.md');
const result = await processor.process(markdown);

console.log(String(result));
```

Would output the following:

````markdown
# Example

<div class="imported-github-code">

```js reference
if (range === undefined) {
  [fromLine, toLine] = [1, Infinity];
} else if (typeof range === 'number') {
  [fromLine, toLine] = [range, range];
} else {
  [fromLine, toLine] = range;
}
```

<div class="github-code-link"><a href=https://github.com/haocheng6/remark-github-code-import/blob/53802a344076676ef068e236285306f8cee086ba/src/utils.ts#L43-L49 target="_blank">See full example on GitHub</a></div>

</div>

````

### Setting `dedentCode` to `false`

Running the following JavaScript:

```js
import { remark } from 'remark';
import remarkGithubCodeImport from 'remark-github-code-import';
import { read } from 'to-vfile';

const processor = remark().use(remarkGithubCodeImport, { dedentCode: false });
const markdown = await read('example.md');
const result = await processor.process(markdown);

console.log(String(result));
```

Would output the following:

````markdown
# Example

<div class="imported-github-code">

```js reference
  if (range === undefined) {
    [fromLine, toLine] = [1, Infinity];
  } else if (typeof range === 'number') {
    [fromLine, toLine] = [range, range];
  } else {
    [fromLine, toLine] = range;
  }
```

<div class="github-code-link"><a href=https://github.com/haocheng6/remark-github-code-import/blob/53802a344076676ef068e236285306f8cee086ba/src/utils.ts#L43-L49 target="_blank">See full example on GitHub</a></div>

</div>

````

[1]: https://github.com/unifiedjs/unified
[2]: https://github.com/remarkjs/remark
[3]: https://github.com/saucelabs/docusaurus-theme-github-codeblock

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