-
-
Notifications
You must be signed in to change notification settings - Fork 1
/
mdsvex.options.js
92 lines (86 loc) · 2.4 KB
/
mdsvex.options.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
import { escapeSvelte } from 'mdsvex';
// Rehype Plugins:
import rehypeSlug from 'rehype-slug';
import rehypeAutolinkHeadings from 'rehype-autolink-headings';
import rehypeToc from '@jsdevtools/rehype-toc';
import urls from 'rehype-urls';
// Shiki Highlighter:
import { createHighlighter, makeSingletonHighlighter } from 'shiki/bundle/web';
// Highlighter Singleton:
const getHighlighter = makeSingletonHighlighter(createHighlighter);
function processUrl(url, node) {
if (node.tagName === 'a') {
node.properties.class = 'text-link';
if (!url.href.startsWith('/')) {
node.properties.target = '_blank';
node.properties.rel = 'noopener';
}
}
}
const customizeTOC = (toc) => {
try {
const { children } = toc;
const childrenOfChildren = children?.[0]?.children;
if (!children?.length || !childrenOfChildren?.length) return null;
} catch (e) {
return null;
}
return {
type: 'element',
tagName: 'div',
properties: { className: 'mb-4 border-b border-neutral-300 dark:border-neutral-800' },
children: [
{
type: 'element',
tagName: 'span',
properties: { className: 'mt-0 mb-0 font-medium tracking-tight' },
children: [
{
type: 'text',
value: 'Table of Contents:'
}
]
},
...(toc.children || [])
]
};
};
/** @type {import('mdsvex').MdsvexOptions} */
export const mdsvexOptions = {
extensions: ['.md'],
layout: {
_: './src/components/mdsvex/md-components.svelte'
},
rehypePlugins: [
[urls, processUrl],
rehypeSlug,
[
rehypeAutolinkHeadings,
{
behavior: 'wrap',
properties: {
className: `before:content-['#'] before:absolute before:-ml-[1em] before:text-neutral-100/0 dark:hover:before:text-neutral-200/50 hover:before:text-neutral-900/50 pl-[1em] -ml-[1em]`
}
}
],
[rehypeToc, { customizeTOC }]
],
highlight: {
highlighter: async (code, lang = 'text') => {
const highlighter = await getHighlighter({
themes: ['one-light', 'one-dark-pro'],
langs: ['javascript', 'typescript', 'bash', 'json', 'jsx', 'css', 'tsx']
});
const html = escapeSvelte(
highlighter.codeToHtml(code, {
lang,
themes: {
light: 'one-light',
dark: 'one-dark-pro'
}
})
);
return `{@html \`${html}\` }`;
}
}
};