# @kitbook/mdsvex-shiki-twoslash

> A plugin for MDSvex that highlights code blocks using shiki-twoslash

Latest version **1.0.0-beta.31** (published 2024-04-27) · MIT license · 0 weekly downloads

## Install

```sh
npm install @kitbook/mdsvex-shiki-twoslash
pnpm add @kitbook/mdsvex-shiki-twoslash
yarn add @kitbook/mdsvex-shiki-twoslash
bun add @kitbook/mdsvex-shiki-twoslash
```

## Health

**Score 35/100 (D)** — status: abandoned.

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

Warnings: low downloads.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.0-beta.31 |
| Published | 2024-04-27 |
| First published | 2022-12-24 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 4 |
| Unpacked size | 25 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Provenance | attested (GitHub Actions) |
| Author | Jacob Bowdoin |
| Maintainers | jacobbowdoin |
| Keywords | mdsvex, svelte, svelte-kit, shiki, twoslash, shiki-twoslash, highlight, code highlighting |

## Links

- npm: https://www.npmjs.com/package/@kitbook/mdsvex-shiki-twoslash
- Repository: https://github.com/jacob-8/kitbook
- Homepage: https://kitbook.vercel.app
- Issues: https://github.com/jacob-8/kitbook/issues
- npm.io page: https://npm.io/package/@kitbook/mdsvex-shiki-twoslash

## Dependencies (4)

- [shiki](https://npm.io/package/shiki.md) 0.10.1
- [mdsvex](https://npm.io/package/mdsvex.md) ^0.11.0
- [fenceparser](https://npm.io/package/fenceparser.md) ^2.2.0
- [shiki-twoslash](https://npm.io/package/shiki-twoslash.md) ^3.1.0

## 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.0-beta.31 (latest) — 2024-04-27
- 1.0.0-alpha.51 (alpha) — 2023-10-20
- 1.0.0-beta.30 — 2024-04-26
- 1.0.0-beta.29 — 2024-04-25
- 1.0.0-beta.28 — 2024-04-24
- 1.0.0-beta.27 — 2024-04-24
- 1.0.0-beta.26 — 2024-04-23
- 1.0.0-beta.24 — 2024-03-26
- 1.0.0-beta.23 — 2024-03-07
- 1.0.0-beta.22 — 2024-03-02
- 1.0.0-beta.21 — 2024-03-02
- 1.0.0-beta.20 — 2024-02-23
- 1.0.0-beta.19 — 2024-02-23
- 1.0.0-beta.18 — 2024-02-20
- 1.0.0-beta.17 — 2024-02-19
- … 28 more at https://npm.io/package/@kitbook/mdsvex-shiki-twoslash/versions

## README

# mdsvex-shiki-twoslash

## Usage

- `npm i -D @kitbook/mdsvex-shiki-twoslash`

- Add to your `mdsvex.config.js`:

```js
import { defineMDSveXConfig as defineConfig } from 'mdsvex'
import { shikiTwoslashHighlighter } from '@kitbook/mdsvex-shiki-twoslash'

const config = defineConfig({
  // ...
  highlight: shikiTwoslashHighlighter({ themes: ['dark-plus'] }),
})

export default config
```

- Add the css to your project: `import "@kitbook/mdsvex-shiki-twoslash/shiki-twoslash.css";` (or import from https://www.unpkg.com/@kitbook/mdsvex-shiki-twoslash@0.0.3/src/shiki-twoslash.css) > I recommend you read through the entire CSS and adjust to your liking. It's been optimized for dark-plus, but as you'll see from the light-plus version, there's no border around the code. So it's a good starting point but you really should look it over and make it fit your needs.

## Themes

ShikiTwoslash will default to using the `dark-plus` and `light-plus` themes if you don't pass a theme/themes option. If you leave alone the themes option and let it spit out both dark and light versions, you can then use media queries to show the desired option depending on dark/light mode. To adjust themes you could simply look at the default ones found in the [themes folder of the shiki package](https://www.runpkg.com/?shiki@0.12.1/themes/dark-plus.json). See also the [Shiki-Twoslash docs](https://shikijs.github.io/twoslash/) and [Shiki docs](https://github.com/shikijs/shiki) for more about themes as it's very flexible in allowing you to add any VS Code theme or even create a new one via a json file.

## Other Helpful links

These initially got me going, but really in hindsight, just reading the the [Shiki-Twoslash docs](https://shikijs.github.io/twoslash/) and [Shiki docs](https://github.com/shikijs/shiki) right from the start would have been better.

- https://github.com/pngwn/MDsveX/issues/139#issuecomment-877842887
- https://rodneylab.com/sveltekit-shiki-syntax-highlighting/

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