# gatsby-remark-vscode-shiki

> Adds vscode style syntax highlighting to code blocks in markdown files using shiki.

Latest version **1.0.2** (published 2023-03-24) · MIT license · 0 weekly downloads

## Install

```sh
npm install gatsby-remark-vscode-shiki
pnpm add gatsby-remark-vscode-shiki
yarn add gatsby-remark-vscode-shiki
bun add gatsby-remark-vscode-shiki
```

## Health

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

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.2 |
| Published | 2023-03-24 |
| First published | 2023-03-22 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 3 |
| Unpacked size | 7 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 2 |
| Author | Elvis Liao |
| Maintainers | l123wx |
| Keywords | gatsby, gatsby-plugin, vscode, shiki, remark, highlighting |

## Links

- npm: https://www.npmjs.com/package/gatsby-remark-vscode-shiki
- Repository: https://github.com/l123wx/gatsby-remark-vscode-shiki
- Homepage: https://github.com/l123wx/gatsby-remark-vscode-shiki#readme
- Issues: https://github.com/l123wx/gatsby-remark-vscode-shiki/issues
- npm.io page: https://npm.io/package/gatsby-remark-vscode-shiki

## Dependencies (3)

- [shiki](https://npm.io/package/shiki.md) ^0.14.1
- [@babel/runtime](https://npm.io/package/@babel/runtime.md) ^7.20.13
- [unist-util-visit](https://npm.io/package/unist-util-visit.md) ^2.0.3

## Alternatives

- [@oh-my-pi/pi-natives](https://npm.io/package/@oh-my-pi/pi-natives.md) — 51.8K weekly downloads
- [@capgo/capacitor-light-sensor](https://npm.io/package/@capgo/capacitor-light-sensor.md) — 3.0K weekly downloads
- [@heyhuynhgiabuu/pi-diff](https://npm.io/package/@heyhuynhgiabuu/pi-diff.md) — 492 weekly downloads
- [@lotsa/verdant-lang-asm](https://npm.io/package/@lotsa/verdant-lang-asm.md) — 38 weekly downloads
- [new-era-syntax](https://npm.io/package/new-era-syntax.md) — 20 weekly downloads

## Recent versions

- 1.0.2 (latest) — 2023-03-24
- 1.0.1 — 2023-03-23
- 1.0.0 — 2023-03-22

## README

# gatsby-remark-vscode-shiki

Adds vscode style syntax highlighting to code blocks in markdown files using [shiki](https://github.com/shikijs/shiki).



## Install

use npm：

```shell
npm install gatsby-transformer-remark gatsby-remark-vscode-shiki shiki
```

use yarn:

```shell
yarn add gatsby-transformer-remark gatsby-remark-vscode-shiki shiki
```



## How to use

```js
// In your gatsby-config.js
plugins: [
  {
    resolve: `gatsby-transformer-remark`,
    options: {
      plugins: [
        {
          resolve: `gatsby-remark-vscode-shiki`,
          options: {
            theme: 'dark-plus' // default theme
          }
        }
      ]
    }
  }
]
```



### Theme

You can choose these theme:

css-variables、dark-plus、dracula-soft、dracula、github-dark-dimmed、github-dark、github-light、hc_light、light-plus、material-theme-darker、material-theme-lighter、material-theme-ocean、material-theme-palenight、material-theme、min-dark、min-light、monokai、nord、one-dark-pro、poimandres、rose-pine-dawn、rose-pine-moon、rose-pine、slack-dark、slack-ochin、solarized-dark、solarized-light、vitesse-dark、vitesse-light



### Line highlighting

If you want to highlight lines of code, you also need to add some additional CSS. It adds a span around lines of code with a special class `.gatsby-highlight-code-line` that you can target with styles.

For example:

```css
.gatsby-highlight-code-line {
      background-color: hsla(207, 95%, 15%, 1);
      display: block;
      margin-right: -1.3125rem;
      margin-left: -1.3125rem;
      padding-right: 1em;
      padding-left: 1.25em;
      border-left: 0.25em solid #27aa50;
}
```

You can specify the highlighted lines outside of the code block. In the following code snippet, lines 1 and 4 through 6 will get the line highlighting.

~~~text
```javascript{1,4-6}
// In your gatsby-config.js
plugins: [
  {
    resolve: `gatsby-transformer-remark`,
    options: {
      plugins: [
        `gatsby-remark-vscode-shiki`,
      ]
    }
  }
]
```
~~~

It seems like this:

```javascript{1,4-6}
// In your gatsby-config.js
plugins: [
  {
    resolve: `gatsby-transformer-remark`,
    options: {
      plugins: [
        `gatsby-remark-vscode-shiki`,
      ]
    }
  }
]
```



The plugin will continue to be updated. If you have any ideas or suggestions, can you open a issue on [GitHub]([Issues · l123wx/gatsby-remark-vscode-shiki (github.com)](https://github.com/l123wx/gatsby-remark-vscode-shiki/issues)).

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