summaryrefslogtreecommitdiff
path: root/packages/markdown/remark/src/remark-shiki.ts
diff options
context:
space:
mode:
Diffstat (limited to 'packages/markdown/remark/src/remark-shiki.ts')
-rw-r--r--packages/markdown/remark/src/remark-shiki.ts41
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;