diff options
Diffstat (limited to 'packages/markdown/remark/src/remark-shiki.ts')
-rw-r--r-- | packages/markdown/remark/src/remark-shiki.ts | 41 |
1 files changed, 40 insertions, 1 deletions
diff --git a/packages/markdown/remark/src/remark-shiki.ts b/packages/markdown/remark/src/remark-shiki.ts index 5becad76d..91f1b76e3 100644 --- a/packages/markdown/remark/src/remark-shiki.ts +++ b/packages/markdown/remark/src/remark-shiki.ts @@ -1,9 +1,41 @@ import shiki from 'shiki'; import { visit } from 'unist-util-visit'; -const remarkShiki = async (theme: shiki.Theme) => { +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' }); @@ -12,6 +44,13 @@ const remarkShiki = async (theme: shiki.Theme) => { html = html.replace('<pre class="shiki"', '<pre 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; |