feat(chat-messages): add support for syntax highlighting, copying and downloading csv to markdown renderer

[Killusions]

• add code copy button to markdown renderer
• add table csv download button to markdown renderer
• complete unfinished code blocks for streaming in markdown renderer
• add optional support for code syntax highlighting in markdown renderer

New feature showcase:

---

• I confirm that this MR follows the contribution guidelines.

This PR enhances the markdown renderer used in chat messages with interactive features, rendering options, theming, examples, and supporting changes.

Highlights

• Adds copy-to-clipboard button for code blocks and per-table CSV download button (customizable, translatable labels).
• Completes streaming-safe code block handling using placeholders and per-instance caching; renderer now returns HTMLElement and maintains caches for code blocks, tables, and LaTeX.
• Optional syntax highlighting (highlight.js) and optional LaTeX rendering (KaTeX) for inline and display math; examples updated to demonstrate both.
• Exposes MarkdownRendererOptions and new SiMarkdownRendererComponent inputs: disableCopyButton, disableDownloadButton, syntaxHighlighter, latexRenderer, copyButtonLabel, downloadButtonLabel; getMarkdownRenderer now accepts an options parameter.
• Adds helpers: sanitizeHtmlWithStyles and LRU-style caches for DOM/string reuse; extensive renderer refactor and placeholder/post-render pipeline.
• Adds SCSS highlight theme and layout for code/table overlays and KaTeX styling; sample markdown and showcase images updated.
• Expands tests for LaTeX and table/code edge cases; updates Playwright snapshots and example configs.
• Adds devDependencies (highlight.js, katex, @types/katex) and includes KaTeX CSS in example build.
• Chat container: debounced scrolling during streaming and new public scrollToBottom()/scrollToTop() methods.

Backward compatibility

• Features are opt-in via new options/inputs; intended to be non-breaking for existing usage.

[coderabbitai]

📝 Walkthrough

Walkthrough

Adds a configurable, stateful markdown renderer and exports a new MarkdownRendererOptions interface; getMarkdownRenderer now accepts an optional options parameter and returns an HTMLElement. The renderer implements per-instance caches and placeholder-based post-processing for code blocks, tables, LaTeX, links, and inline code; it supports optional syntax highlighting and LaTeX rendering hooks, and emits per-code copy and per-table download controls. SiMarkdownRendererComponent gains inputs for labels, enablement flags, syntaxHighlighter, and latexRenderer. Translation keys, helper sanitizers/caches, styles, example integrations (highlight.js/KaTeX), tests, and chat-container scroll APIs were also added.

Sequence Diagram(s)

sequenceDiagram
    participant Component as SiMarkdownRendererComponent
    participant Renderer as getMarkdownRenderer
    participant Parser as Markdown Parser
    participant Cache as Placeholder/Cache Manager
    participant Highlighter as SyntaxHighlighter
    participant Math as LaTeX Renderer
    participant DOM as Host Container

    Component->>Renderer: request render(text, options)
    Renderer->>Parser: parse markdown -> tokens
    Parser-->>Renderer: tokens (code, table, latex, inline, links)

    alt code block
        Renderer->>Highlighter: highlight(code, language)
        Highlighter-->>Renderer: highlighted HTML or undefined
        Renderer->>Cache: store code placeholder (metadata)
    end

    alt table
        Renderer->>Cache: store table CSV and placeholder
    end

    alt LaTeX
        Renderer->>Math: render(latex, displayMode)
        Math-->>Renderer: rendered HTML or undefined
        Renderer->>Cache: store latex placeholder
    end

    Renderer->>Renderer: assemble sanitized HTML with placeholders
    Renderer->>Cache: resolve placeholders -> DOM nodes (attach buttons/handlers)
    Renderer->>DOM: return final HTMLElement
    Component->>DOM: mount element

Loading

Possibly related PRs

• feat(chat-messages): allow asterisk lists and simple images for markdown renderer #1146: Overlapping markdown-renderer implementation changes (image/link handling and list parsing) touching the renderer pipeline.
• test(element): make tests zoneless ready part 4 #1125: Related updates to markdown renderer tests covering LaTeX, code-wrapper structure, and complex markdown scenarios.

Suggested labels

released

🚥 Pre-merge checks | ✅ 3

✅ Passed checks (3 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title accurately describes the main feature additions: syntax highlighting, code copy button, and CSV download functionality for the markdown renderer in chat messages.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing touches

• 📝 Generate docstrings

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[github-actions]

Documentation.
Examples.
Playwright report.

Coverage Reports:

• element-ng
• element-translate-ng

[github-actions]