shiki() — astro Function Reference

Architecture documentation for the shiki() function in shiki.ts from the astro codebase.

Function typescript CoreAstro RoutingSystem

Entity Profile

CoreAstro→ RoutingSystem→ shiki() — astro Function Reference

Dependency Diagram

graph TD
  a6c0f557_d771_d26e_168c_26122c6ea2a4["shiki()"]
  4ceccdea_9be9_42de_3363_d624eaae10f0["shiki.ts"]
  a6c0f557_d771_d26e_168c_26122c6ea2a4 -->|defined in| 4ceccdea_9be9_42de_3363_d624eaae10f0
  style a6c0f557_d771_d26e_168c_26122c6ea2a4 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

packages/integrations/markdoc/src/extensions/shiki.ts lines 7–35

export default async function shiki(config?: ShikiConfig): Promise<AstroMarkdocConfig> {
	const highlighter = await createShikiHighlighter({
		langs: config?.langs,
		theme: config?.theme,
		themes: config?.themes,
	});

	return {
		nodes: {
			fence: {
				attributes: Markdoc.nodes.fence.attributes!,
				async transform({ attributes }) {
					// NOTE: The `meta` from fence code, e.g. ```js {1,3-4}, isn't quite supported by Markdoc.
					// Only the `js` part is parsed as `attributes.language` and the rest is ignored. This means
					// some Shiki transformers may not work correctly as it relies on the `meta`.
					const lang = typeof attributes.language === 'string' ? attributes.language : 'plaintext';
					const html = await highlighter.codeToHtml(attributes.content, lang, {
						wrap: config?.wrap,
						defaultColor: config?.defaultColor,
						transformers: config?.transformers,
					});

					// Use `unescapeHTML` to return `HTMLString` for Astro renderer to inline as HTML
					return unescapeHTML(html) as any;
				},
			},
		},
	};
}