mirror of
https://github.com/angular/angular
synced 2026-05-24 09:28:37 +00:00
7f7a2187a8
Use shiki to perform highlighting instead of a postprocessing action
(cherry picked from commit fee79e37d5)
20 lines
753 B
TypeScript
20 lines
753 B
TypeScript
/*!
|
|
* @license
|
|
* Copyright Google LLC All Rights Reserved.
|
|
*
|
|
* Use of this source code is governed by an MIT-style license that can be
|
|
* found in the LICENSE file at https://angular.dev/license
|
|
*/
|
|
|
|
import {h} from 'preact';
|
|
import {RawHtml} from './raw-html';
|
|
import {codeToHtml} from '../../../shared/shiki.mjs';
|
|
import {getHighlighterInstance} from '../shiki/shiki.mjs';
|
|
|
|
/** Component to render a header of the CLI page. */
|
|
export function HighlightTypeScript(props: {code: string}) {
|
|
const result = codeToHtml(getHighlighterInstance(), props.code, {language: 'typescript'});
|
|
const withScrollTrack = result.replace(/^(<pre class="shiki)/, '$1 docs-mini-scroll-track');
|
|
|
|
return <RawHtml value={withScrollTrack} className="docs-code" />;
|
|
}
|