1.1.12 • Published 4 months ago

shiki-mdsvex-header v1.1.12

Weekly downloads
-
License
MIT
Repository
github
Last release
4 months ago

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
OptionDescriptionDefault value
headerClassthe class for the header(div element)Type: string | undefined"header"
headerToBottomif true, the header will be added AFTER of the code elementType: boolean | undefinedfalse
langCasedefine the case of the lang string- "cap": capitalize- "up": uppercase- "none": raw stringType: "cap" | "up" | "none" | undefined"cap"
langClassthe class for the lang(span element)Type: string | undefined"lang"
langFirstif true, place the lang before title(by default, the title first)Type: boolean | undefinedfalse
langVisibleif false, remove the lang(span element) from the headerType: boolean | undefinedtrue
titleCasedefine the case of the title string- "cap": capitalize- "up": uppercase- "low": lowercase- "none": raw stringType: "cap" | "up" | "low" | "none" | undefined"none"
titleClassthe class for the title(span element)Type: string | undefined"title"
titleVisibleif false, remove the title(span element) from the headerType: boolean | undefinedtrue

License

MIT

1.1.12

4 months ago

1.1.11

4 months ago