shiki.test.js — astro Source File

Architecture documentation for shiki.test.js, a javascript file in the astro codebase. 3 imports, 0 dependents.

File javascript CoreAstro 3 imports

Entity Profile

CoreAstro→ shiki.test.js — astro Source File

Dependency Diagram

graph LR
  816a292a_e0f6_7502_56a6_08bafcf9b66f["shiki.test.js"]
  8350d254_ac08_0a3a_4696_d1a19f979b3a["../dist/index.js"]
  816a292a_e0f6_7502_56a6_08bafcf9b66f --> 8350d254_ac08_0a3a_4696_d1a19f979b3a
  e1e2fac7_5a95_7a88_cb1e_0a3b91c4e607["strict"]
  816a292a_e0f6_7502_56a6_08bafcf9b66f --> e1e2fac7_5a95_7a88_cb1e_0a3b91c4e607
  6b0635f9_51ea_77aa_767b_7857878e98a6["node:test"]
  816a292a_e0f6_7502_56a6_08bafcf9b66f --> 6b0635f9_51ea_77aa_767b_7857878e98a6
  style 816a292a_e0f6_7502_56a6_08bafcf9b66f fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

import assert from 'node:assert/strict';
import { describe, it } from 'node:test';
import { createMarkdownProcessor, createShikiHighlighter } from '../dist/index.js';

describe('shiki syntax highlighting', () => {
	it('does not add is:raw to the output', async () => {
		const processor = await createMarkdownProcessor();
		const { code } = await processor.render('```\ntest\n```');

		assert.ok(!code.includes('is:raw'));
	});

	it('supports light/dark themes', async () => {
		const processor = await createMarkdownProcessor({
			shikiConfig: {
				themes: {
					light: 'github-light',
					dark: 'github-dark',
				},
			},
		});
		const { code } = await processor.render('```\ntest\n```');

		// light theme is there:
		assert.match(code, /background-color:/);
		assert.match(code, /github-light/);

		// dark theme is there:
		assert.match(code, /--shiki-dark-bg:/);
		assert.match(code, /github-dark/);
	});

	it('createShikiHighlighter works', async () => {
		const highlighter = await createShikiHighlighter();

		const html = await highlighter.codeToHtml('const foo = "bar";', 'js');

		assert.match(html, /astro-code github-dark/);
		assert.match(html, /background-color:#24292e;color:#e1e4e8;/);
	});

	it('createShikiHighlighter works with codeToHast', async () => {
		const highlighter = await createShikiHighlighter();

		const hast = await highlighter.codeToHast('const foo = "bar";', 'js');

		assert.match(hast.children[0].properties.class, /astro-code github-dark/);
		assert.match(hast.children[0].properties.style, /background-color:#24292e;color:#e1e4e8;/);
	});

	it('diff +/- text has user-select: none', async () => {
		const highlighter = await createShikiHighlighter();

		const html = await highlighter.codeToHtml(
			`\
- const foo = "bar";
+ const foo = "world";`,
			'diff',
		);

// ... (81 more lines)