Tianyi Cui
bb3dc50a4b
One highlighter for the client: a synchronous fine-grained shiki core (JS regex engine, no WASM) in ui-primitives with an explicit grammar allowlist (typescript, shellscript, json — aliases resolve, unknown languages take a geometry-identical plain arm). The shared CodeBlock component owns both arms; markdown fences, the run_code expanded program body (typescript), and the details panel Input (json) all route through it. Token colors live in a new ui-theme shiki.css sheet as --shiki-* custom properties (light/dark blocks), wired through the shell's base.css chain — tokens-only styling holds; shiki's generated span tree is the sanctioned innerHTML path (static output, no user HTML). jsdom specs pin token spans, aliases, both fallbacks, and the fence route; the built-bundle snapshot asserts the highlighted program under the code row.
54 lines
2.2 KiB
TypeScript
54 lines
2.2 KiB
TypeScript
// @vitest-environment jsdom
|
|
// CodeBlock + the shiki singleton: registered grammars highlight into token
|
|
// spans colored by --shiki-* custom properties; unknown/absent languages take
|
|
// the identical-geometry plain arm; aliases resolve; the trailing newline is
|
|
// display-trimmed. MarkdownText's fence route is pinned in markdown.spec.tsx
|
|
// alongside the rest of the markdown family.
|
|
|
|
import { describe, expect, it } from 'vitest'
|
|
import { cleanup, render } from '@testing-library/react'
|
|
import { afterEach } from 'vitest'
|
|
import { CodeBlock } from '../src/markdown/CodeBlock.tsx'
|
|
import { highlightToHtml } from '../src/markdown/highlight.ts'
|
|
|
|
afterEach(cleanup)
|
|
|
|
describe('highlightToHtml', () => {
|
|
it('highlights a registered grammar into css-variables token spans', () => {
|
|
const html = highlightToHtml('const x: number = 1', 'typescript')
|
|
expect(html).toContain('pre class="shiki css-variables"')
|
|
expect(html).toContain('var(--shiki-')
|
|
})
|
|
|
|
it.each([['ts'], ['js'], ['bash'], ['sh'], ['jsonc']])('resolves the %s alias', (alias) => {
|
|
expect(highlightToHtml('x', alias)).toContain('shiki')
|
|
})
|
|
|
|
it('returns undefined for unknown or absent languages', () => {
|
|
expect(highlightToHtml('x', 'cobol')).toBeUndefined()
|
|
expect(highlightToHtml('x', undefined)).toBeUndefined()
|
|
})
|
|
})
|
|
|
|
describe('CodeBlock', () => {
|
|
it('renders the highlighted tree for TypeScript', () => {
|
|
const view = render(<CodeBlock code={'const a = 1\n'} lang="ts" />)
|
|
const pre = view.container.querySelector('pre.shiki')
|
|
expect(pre).not.toBeNull()
|
|
expect(pre!.textContent).toBe('const a = 1')
|
|
expect(pre!.querySelectorAll('span[style]').length).toBeGreaterThan(1)
|
|
})
|
|
|
|
it('renders the plain arm for an unknown language with the text verbatim', () => {
|
|
const view = render(<CodeBlock code={'IDENTIFICATION DIVISION.'} lang="cobol" />)
|
|
expect(view.container.querySelector('pre.shiki')).toBeNull()
|
|
expect(view.getByText('IDENTIFICATION DIVISION.')).toBeTruthy()
|
|
})
|
|
|
|
it('renders the plain arm when no language is given', () => {
|
|
const view = render(<CodeBlock code="plain text" />)
|
|
expect(view.container.querySelector('pre.shiki')).toBeNull()
|
|
expect(view.getByText('plain text')).toBeTruthy()
|
|
})
|
|
})
|