open-index/open-npm huggingface dataset:
npm package: @kitbook/mdsvex-shiki-twoslash
Description: A plugin for MDSvex that highlights code blocks using shiki-twoslash
Author: Jacob Bowdoin
Latest version: 1.0.0-beta.31

# 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/
npm package: @kitbook/rehype-display-link-titles
Description: Swap the title attribute for an <a> tag's main text to allow for using aliases or sections from Foam auto-generated links
Author: Jacob Bowdoin
Latest version: 1.0.0-beta.31

# rehype-display-link-titles

A simple [rehype plugin](https://github.com/rehypejs/rehype/blob/main/doc/plugins.md) for use in Kitbook to take titles from auto-generated `<a>` tags (produced via [Foam](https://foambubble.github.io/) and [MDSvex](https://mdsvex.pngwn.io/)) and make them the main text. This allows for using a wikilink like `[[8-examples]]` which would normally pull the title (e.g. `Examples`) from the linked documented (links auto-generated by Foam). However, sometimes in prose you want to use an alias for said page being linked to, `[[8-examples|Kitbook Supported Examples]]`. If a title is detected, this plugin takes the resulting link text of `Examples` and swaps it with the title text of `Kitbook Supported Examples`.

## Some Helpful Plugin Writing Resources

- https://unifiedjs.com/learn/
- https://v0.mdxjs.com/guides/writing-a-plugin & https://v0.mdxjs.com/advanced/plugins
- https://github.com/rehypejs/rehype-autolink-headings
- https://www.timlrx.com/blog/creating-a-rehype-syntax-highlighting-plugin
- https://github.com/JS-DevTools/rehype-url-inspector