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 element Type: boolean | undefined	false
langCase	define the case of the lang string - "cap": capitalize - "up": uppercase - "none": raw string Type: "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 header Type: boolean | undefined	true
titleCase	define the case of the title string - "cap": capitalize - "up": uppercase - "low": lowercase - "none": raw string Type: "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 header Type: boolean | undefined	true

License

MIT