1.1.12 • Published 4 months ago
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.header
element 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
- specify the metadata parameter of mdsvexOptions's
highlighter()
function as the 3rd parameter - add
meta
property to thecodeToHtml()
method's option as an object withlang
andmeta
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