Theia API Documentation v1.67.0
    Preparing search index...

    Function useMarkdown

    • A React hook for rendering markdown content.

      This hook integrates MarkdownRenderer with React's lifecycle, ensuring that:

      • Markdown is rendered only when content or renderer changes
      • MarkdownRenderResult is properly disposed when component unmounts
      • DOM elements are correctly managed by React
      • Event listeners and other imperative DOM operations are preserved

      Returns a ref that should be attached to a DOM element.

      Parameters

      • markdown: undefined | string | MarkdownString
      • markdownRenderer: MarkdownRenderer
      • OptionalmarkdownOptions: {
            isTrusted?: boolean | { enabledCommands: string[] };
            supportHtml?: boolean;
            supportThemeIcons?: boolean;
        }
      • OptionalonRender: (element: undefined | HTMLElement) => void

      Returns RefObject<HTMLDivElement>

      const MyComponent = ({ markdownRenderer }: { markdownRenderer: MarkdownRenderer }) => {
        const ref = useMarkdown('Hello **World**!', markdownRenderer, { supportHtml: true });
        return <div className="my-content" ref={ref} />;
      };

      Example: With localized content

      const MyComponent = ({ markdownRenderer }: { markdownRenderer: MarkdownRenderer }) => {
        const content = nls.localize('my.key', 'Hello **{0}**!', 'World');
        const ref = useMarkdown(content, markdownRenderer);
        return <div className="my-content" ref={ref} />;
      };

    Settings

    Member Visibility