angular/adev/shared-docs/pipeline/api-gen/rendering/templates/code-symbols.tsx
Matthieu Riegler 47dc4ffd1a docs(docs-infra): share markdown rendering and highlighting code between api-gen and guides (#63357)
This reduces code duplication and improves the maintability.

PR Close #63357
2025-08-25 15:33:55 -07:00

34 lines
907 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 {getSymbolUrl} from '../symbol-context.mjs';
const symbolRegex = /([a-zA-Z_$][a-zA-Z_$0-9\.]*)/;
/**
* Component that generates a code block with a link to a Symbol if it's known,
* else generates a string code block
*/
export function CodeSymbol(props: {code: string}) {
return (
<code>
{props.code.split(symbolRegex).map((rawSymbol, index) => {
// Every even index is a non-match when the regex has 1 capturing group
if (index % 2 === 0) return rawSymbol;
const url = getSymbolUrl(rawSymbol);
if (url) {
return <a href={url}>{rawSymbol}</a>;
}
return rawSymbol;
})}
</code>
);
}