Skip to content

feat: implement markdown renderer with micromark#1829

Draft
Killusions wants to merge 9 commits intomainfrom
feat/markdown-renderer-micromark
Draft

feat: implement markdown renderer with micromark#1829
Killusions wants to merge 9 commits intomainfrom
feat/markdown-renderer-micromark

Conversation

@Killusions
Copy link
Copy Markdown
Member

@Killusions Killusions commented Apr 7, 2026

Rewrites + all new features using micromark:

  • 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
  • add optional support for latex formula rendering in markdown renderer (commonly used by AI chatbots)

Documentation.
Examples.
Dashboards Demo.
Playwright report.

Coverage Reports:

Code Coverage

Copy link
Copy Markdown
Contributor

@gemini-code-assist gemini-code-assist bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Code Review

This pull request refactors the SiMarkdownRendererComponent to use micromark for CommonMark-compliant parsing with GFM extensions, replacing the previous regex-based implementation. Key enhancements include support for LaTeX math rendering via KaTeX, syntax highlighting, and interactive features like copy-to-clipboard for code blocks and CSV downloads for tables. Feedback focuses on resolving potential hydration mismatches in SSR caused by non-deterministic IDs, improving the robustness of markdown preprocessing to avoid breaking code blocks, and strengthening the custom DOM sanitization logic. Additionally, the use of effect() for state propagation should be replaced with computed() or toSignal() to align with the repository's style guide.

Comment thread projects/element-ng/markdown-renderer/markdown-renderer.ts Outdated
Comment thread projects/element-ng/markdown-renderer/markdown-renderer.ts
Comment thread projects/element-ng/markdown-renderer/markdown-renderer.ts Outdated
Comment thread projects/element-ng/markdown-renderer/markdown-renderer.ts
Comment thread projects/element-ng/markdown-renderer/si-markdown-renderer.component.ts Outdated
@Killusions Killusions force-pushed the feat/markdown-renderer-micromark branch 5 times, most recently from 2fa10fc to 707e712 Compare April 8, 2026 13:06
@Killusions
Copy link
Copy Markdown
Member Author

Killusions commented Apr 8, 2026

ScreenFloat Shot of Arc on 2026-04-08 at 15-08-51

Nice savings when using micromark instead (the last commit).

@Killusions Killusions force-pushed the feat/markdown-renderer-micromark branch from 97a4f36 to ebbe63c Compare April 8, 2026 15:47
@siemens siemens deleted a comment from github-actions bot Apr 9, 2026
@Killusions Killusions force-pushed the feat/markdown-renderer-micromark branch 4 times, most recently from faadfc7 to d9839a7 Compare April 9, 2026 11:24
@Killusions
Copy link
Copy Markdown
Member Author

Now need to separate the new one from the existing Markdown renderer

@Killusions Killusions force-pushed the feat/markdown-renderer-micromark branch 2 times, most recently from b1c4868 to 374799e Compare April 9, 2026 11:54
…line and caching

- rewrite the markdown renderer to use a recursive processing pipeline
  with placeholder-based architecture
- add SSR support via optional doc/isBrowser parameters
- introduce LRU caching for code blocks and tables
- iprove table rendering with proper thead/th support
- add code-wrapper structure with language labels
- update SCSS for new structural layout
  including code-wrapper, table-wrapper, and table-scroll-container
Add optional syntax highlighting the markdown renderer
for libraries like highlight.js
and a custom hljs theme using Element design tokens
Add optional latex rendering to the markdown renderer
for rendering math expressions (common in AI chatbots),
used to integrate libraries like katex

Supports both inline ($...$) and display ($$...$$) math
…ming

Add temporary closing marker logic that automatically completes
unfinished code blocks during streaming (to make it more smooth)
@Killusions Killusions force-pushed the feat/markdown-renderer-micromark branch from 374799e to 9fa0fe8 Compare April 9, 2026 13:19
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant