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

| Option | Description | Default value | | ------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ------------- | | headerClass | the class for the header(div element)Type: string | undefined | "header" | | headerToBottom | if true, the header will be added AFTER of the code elementType: boolean | undefined | false | | langCase | define the case of the lang string- "cap": capitalize- "up": uppercase- "none": raw stringType: "cap" | "up" | "none" | undefined | "cap" | | langClass | the class for the lang(span element)Type: string | undefined | "lang" | | langFirst | if true, place the lang before title(by default, the title first)Type: boolean | undefined | false | | langVisible | if false, remove the lang(span element) from the headerType: boolean | undefined | true | | titleCase | define the case of the title string- "cap": capitalize- "up": uppercase- "low": lowercase- "none": raw stringType: "cap" | "up" | "low" | "none" | undefined | "none" | | titleClass | the class for the title(span element)Type: string | undefined | "title" | | titleVisible | if false, remove the title(span element) from the headerType: boolean | undefined | true |

License

MIT