Exploration: Marked + React Renderer #11279
Conversation
dhruvisompura
changed the base branch from
main
to
notebooks/change-markdown-renderer
|
E2E Tests 🚀 |
seeM
left a comment
seeM
left a comment
There was a problem hiding this comment.
Code changes look great! I'll take it for a spin locally tomorrow morning, haven't had a chance yet
dhruvisompura
changed the base branch from
notebooks/change-markdown-renderer
to
main
This reverts commit fde1ebd.
dhruvisompura
force-pushed
the
notebooks/react-renderer-for-markdown
branch
from
f36349b to
c10334c
Compare
seeM
left a comment
seeM
left a comment
There was a problem hiding this comment.
This works well with the test markdown from #10291 (comment)! I'm excited about this one 😄
Screen.Recording.2026-01-09.at.14.34.52.mov
| * @param languageService Language service for syntax highlighting | ||
| * @returns React element containing the syntax-highlighted code block | ||
| */ | ||
| function RawHtml({ html }: { html: string }) { |
There was a problem hiding this comment.
This seems fine as is, but might be able to use set safe inner directly here and remove all of this code
There was a problem hiding this comment.
Looking at this again, I think we can simplify the configuration options but I don't think we can remove all of this code and just use safeSetInnerHtml since that would break html anchor and image tag support like the following:
<a href="https://github.com">GitHub Link</a>
<img src="https://posit.co/wp-content/themes/Posit/assets/images/posit-logo-2024.svg" alt="Posit Logo" style="width:100px;">
Follow up to PR #11212 that explores being able to directly render React components from markdown as suggested by @seeM in this comment: #11212 (review)!
Right now we do Markdown → Tokens → HTML String → DOM, which means we're generating HTML strings and then parsing them back into the DOM. In this PR we now do Markdown → Tokens → React Elements. The main idea is to skip the intermediate HTML string step and work directly with React components. We use Marked to get the tokenized version of the markdown and then pass the tokens to a custom renderer which converts the tokens to the appropriate react component.
That said, there are still a few cases where we need HTML parsing. KaTeX (for LaTeX math) and our syntax highlighting both return HTML strings rather than tokens, so we still use
safeSetInnerHtmlfor those and convert the resulting DOM to React viadomToReact.tsxutility (this is pretty close to what we were doing prior to this change but we needed a parser that could better handle katex html unlikehtmlParser.ts).The
TokenMarkdownRendererclass handles the token-to-React conversion, with custom components likeKatexMath,SyntaxHighlightedCode, andRawHtmlfor the more complex rendering scenarios.One benefit of this approach as mentioned by @seeM is allowing us to easily create/explore richer markdown output.
Screenshots
Raw HTML Rendering
Math
Test Markdown File
Screen.Recording.2026-01-09.at.10.39.35.AM.mov
Release Notes
New Features
Bug Fixes
QA Notes
@:positron-notebooks