blob: 4226c6db6c66384052d0eb81e9f8318fbf4ba771 (
plain) (
blame)
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
|
import shiki from 'shiki';
import { visit } from 'unist-util-visit';
export interface ShikiConfig {
/**
* The languages loaded to Shiki.
* Supports all languages listed here: https://github.com/shikijs/shiki/blob/main/docs/languages.md#all-languages
* Instructions for loading a custom language: https://github.com/shikijs/shiki/blob/main/docs/languages.md#supporting-your-own-languages-with-shiki
*
* @default []
*/
langs?: shiki.ILanguageRegistration[];
/**
* The styling theme.
* Supports all themes listed here: https://github.com/shikijs/shiki/blob/main/docs/themes.md#all-themes
* Instructions for loading a custom theme: https://github.com/shikijs/shiki/blob/main/docs/themes.md#loading-theme
*
* @default "github-dark"
*/
theme?: shiki.IThemeRegistration;
/**
* Enable word wrapping.
* - true: enabled.
* - false: enabled.
* - null: All overflow styling removed. Code will overflow the element by default.
*
* @default false
*/
wrap?: boolean | null;
}
const remarkShiki = async ({ langs = [], theme = 'github-dark', wrap = false }: ShikiConfig) => {
const highlighter = await shiki.getHighlighter({ theme });
for (const lang of langs) {
await highlighter.loadLanguage(lang);
}
return () => (tree: any) => {
visit(tree, 'code', (node) => {
let html = highlighter.codeToHtml(node.value, { lang: node.lang ?? 'plaintext' });
// Replace "shiki" class naming with "astro" and add "data-astro-raw".
html = html.replace('<pre class="shiki"', '<pre data-astro-raw class="astro-code"');
// Replace "shiki" css variable naming with "astro".
html = html.replace(/style="(background-)?color: var\(--shiki-/g, 'style="$1color: var(--astro-code-');
// Handle code wrapping
// if wrap=null, do nothing.
if (wrap === false) {
html = html.replace(/style="(.*?)"/, 'style="$1; overflow-x: auto;"');
} else if (wrap === true) {
html = html.replace(/style="(.*?)"/, 'style="$1; overflow-x: auto; white-space: pre-wrap; word-wrap: break-word;"');
}
node.type = 'html';
node.value = html;
node.children = [];
});
};
};
export default remarkShiki;
|
