angular/adev/shared-docs/pipeline/api-gen/rendering/templates/code-symbols.tsx

import {h} from 'preact';
import {getModuleName} from '../symbol-context';
import {getLinkToModule} from '../transforms/url-transforms';

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;

        let [symbol, subSymbol] = rawSymbol.split('.'); // Also takes care of methods, enum value etc.
        const moduleName = getModuleName(symbol);

        if (moduleName) {
          const url = getLinkToModule(moduleName, symbol, subSymbol);
          return <a href={url}>{rawSymbol}</a>;
        }

        return rawSymbol;
      })}
    </code>
  );
}