# markdown-it-shiki

> Markdown It plugin for Shiki

Latest version **0.9.0** (published 2023-05-04) · MIT license · 0 weekly downloads

## Install

```sh
npm install markdown-it-shiki
pnpm add markdown-it-shiki
yarn add markdown-it-shiki
bun add markdown-it-shiki
```

## Health

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

Positive: has types; esm support; no vulnerabilities.

Warnings: low downloads; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.9.0 |
| Published | 2023-05-04 |
| First published | 2020-12-07 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 2 |
| Unpacked size | 13.1 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 61 |
| Author | Anthony Fu |
| Maintainers | antfu |
| Keywords | markdown-it, markdown-it-plugin, highlight, shiki |

## Links

- npm: https://www.npmjs.com/package/markdown-it-shiki
- Repository: https://github.com/antfu/markdown-it-shiki
- Homepage: https://github.com/antfu/markdown-it-shiki#readme
- Issues: https://github.com/antfu/markdown-it-shiki/issues
- npm.io page: https://npm.io/package/markdown-it-shiki

## Dependencies (2)

- [shiki](https://npm.io/package/shiki.md) ^0.14.2
- [synckit](https://npm.io/package/synckit.md) ^0.8.5

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

- 0.9.0 (latest) — 2023-05-04
- 0.8.1 — 2023-04-18
- 0.8.0 — 2023-02-19
- 0.7.2 — 2022-11-30
- 0.7.1 — 2022-11-30
- 0.7.0 — 2022-11-29
- 0.6.1 — 2022-10-31
- 0.6.0 — 2022-10-24
- 0.5.1 — 2022-04-28
- 0.5.0 — 2022-04-28
- 0.4.0 — 2022-03-04
- 0.3.0 — 2021-11-15
- 0.2.3 — 2021-05-02
- 0.2.2 — 2021-05-02
- 0.2.1 — 2021-05-02
- … 5 more at https://npm.io/package/markdown-it-shiki/versions

## README

# markdown-it-shiki

[Markdown It](https://markdown-it.github.io/) plugin for [Shiki](https://github.com/shikijs/shiki)

## Install 

```bash
npm i -D markdown-it-shiki
```

## Usage

```ts
import MarkdownIt from 'markdown-it'
import Shiki from 'markdown-it-shiki'

const md = MarkdownIt()

md.use(Shiki, {
  theme: 'nord'
})
```

### Dark mode

```js
md.use(Shiki, {
  theme: {
    dark: 'min-dark',
    light: 'min-light'
  }
})
```

Add then these to your CSS


```css
/* Query based dark mode */

@media (prefers-color-scheme: dark) {
  .shiki-light {
    display: none;
  }
}

@media (prefers-color-scheme: light), (prefers-color-scheme: no-preference) {
  .shiki-dark {
    display: none;
  }
}

```

```css
/* Class based dark mode */

html.dark .shiki-light {
  display: none;
}

html:not(.dark) .shiki-dark {
  display: none;
}
```

### Highlight lines

```js
md.use(Shiki, {
  highlightLines: true
})
```

Add these to your CSS

```css
code[v-pre] { 
  display: flex;
  flex-direction: column;
}

.shiki .highlighted {
  background: #7f7f7f20;
  display: block;
  margin: 0 -1rem;
  padding: 0 1rem;
}
```

Then you can highlight lines in code block.

~~~
```js {1-2}
const md = new MarkdownIt()
md.use(Shiki)

const res = md.render(/** ... */)
console.log(res)
```
~~~

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