shiki-mdsvex-header v1.1.12

Introduce

a shiki transformer for mdsvex that adds a header as a child of pre.shiki element.

It adds the div.header element to before (or after) of the code element as a sibling.

div.headerelement contains two span elements, span.lang and span.title

example

yields

<pre class="shiki">
	<div class="header">
		<span class="lang">js</span>
		<span class="title">index.js</span>
	</div>
	<code>...</code>
	<!-- header can be added hear also -->
</pre>

from(markdown metadata)

title as string

```js index.js
console.log("Hello World!");
```

title as json

```js {"title": "index.js"}
console.log("Hello World!");
```

• the key for title is "title".

title and lang as json

```ts {"title": "index.js", "lang": "js"}
console.log("Hello World!");
```

• the key for language is "lang". it overrides default language(in this example, "js" not "ts")

Init

pnpm i -D shiki-mdsvex-header

Add Transformer

import { addHeader } from "shiki-mdsvex-header";

// optional
const addHeaderOptions = {
  headerClass: "my-header",
  langVisible: true,
};

const shikiTransformers = [
	addHeader(addHeaderOptions),
	...
]

const shikiHighlighter = await createHighlighter({...});
/** @type {import('mdsvex').MdsvexOptions} */
const mdsvexOptions = {
	highlight: {
		highlighter: async (code, lang = 'text') => {
			const html = escapeSvelte(
				shikiHighlighter.codeToHtml(code, {
					lang,
					theme: 'dracula',
					transformers: shikiTransformers,
					...
				})
			);
			return `{@html \`${html}\`}`;
		}
	},
};

Config

if we want to use shiki in mdsvex, we should specify highlight.highlighter()function.

this is the things you should have to do for make this library works

1. specify the metadata parameter of mdsvexOptions's highlighter() function as the 3rd parameter
2. add meta property to the codeToHtml()method's option as an object with lang and meta properties

// svelte.config.js

const shikiHighlighter = await createHighlighter({...});
/** @type {import('mdsvex').MdsvexOptions} */
const mdsvexOptions = {
	highlight: {
		highlighter: async (code, lang = 'text', meta) => { // get 3rd param
			const html = escapeSvelte(
				shikiHighlighter.codeToHtml(code, {
					lang,
					theme: 'dracula',
					transformers: shikiTransformers,
					meta: { lang, meta }, // add meta
					...
				})
			);
			return `{@html \`${html}\`}`;
		}
	},
};

Options

• you can customize the class that added to each elements, and visibility, string case, and position

License

MIT