Skip to content

Fix render_markdown element#391

Open
Anthirian wants to merge 2 commits intoatuinsh:mainfrom
Anthirian:main
Open

Fix render_markdown element#391
Anthirian wants to merge 2 commits intoatuinsh:mainfrom
Anthirian:main

Conversation

@Anthirian
Copy link
Copy Markdown

@Anthirian Anthirian commented Apr 29, 2026

Change Summary

This fixes markdown rendering and applies GitHub style CSS.

Motivation and details

The render_markdown element didn't properly render all markdown it would receive from a variable (see #388). This was caused by joining multiple lines with \n characters. After solving this issue, I have styled the rendered markdown according to GitHub's style.

Note that OpenAI Codex was used with GPT 5.5 xhigh to assist during development of these changes. I have manually tested and confirmed the changes are good both in light mode and dark mode.

Before

before

After

after

Tasks

  • Updated the documentation in docs/ (if any application behavior has changed)
  • I am happy for maintainers to push small adjustments to this PR, to speed up the review cycle

@github-actions
Copy link
Copy Markdown
Contributor

github-actions Bot commented Apr 29, 2026

All contributors have signed the CLA ✍️ ✅
Posted by the CLA Assistant Lite bot.

@Anthirian
Copy link
Copy Markdown
Author

I have read the CLA Document and I hereby sign the CLA

github-actions Bot added a commit that referenced this pull request Apr 29, 2026
@greptile-apps
Copy link
Copy Markdown
Contributor

greptile-apps Bot commented Apr 29, 2026

Greptile Summary

Fixes the root cause of issue #388 by changing join("\ ") to join("") in the Rust stdout capture (since read_line already includes the trailing newline), and replaces dangerouslySetInnerHTML with a custom HTML→React converter for proper GFM rendering with syntax highlighting and GitHub-style CSS.

Confidence Score: 4/5

Safe to merge; one minor cosmetic issue with trailing newlines in highlighted code blocks

Only P2 findings — the trailing-newline issue causes a cosmetic empty line in syntax-highlighted blocks but no functional breakage

src/components/runbooks/editor/components/Markdown.tsx — trailing newline trim on code block content

Important Files Changed

Filename Overview
src/components/runbooks/editor/components/Markdown.tsx Replaces dangerouslySetInnerHTML with a custom HTML→React converter; adds syntax highlighting via prism-react-renderer; minor trailing-newline cosmetic issue in highlighted code blocks
crates/atuin-desktop-runtime/src/blocks/script.rs Correct fix: join("") instead of join("\n") since read_line already includes the trailing newline; stdout() method updated consistently; new unit test confirms behavior
src/styles.css Comprehensive GitHub-style CSS added for .markdown-content with light/dark variants; all: revert intentionally scoped to container only
src/components/runbooks/editor/components/Markdown.test.tsx New test file covering language normalization, syntax highlighting, and GFM structures (tables, task lists, footnotes)
src/components/runbooks/editor/blocks/MarkdownRender/index.test.ts Added required vi.mock stubs for store and Tauri shell to unblock the existing test suite
markdown-render-fixture.md Manual test fixture covering the full GFM surface area; helpful for visual regression testing
docs/docs/blocks/executable/markdown-render.md Documentation updated to reflect GFM styling, new supported elements (footnotes, task lists, alignment), and GitHub-like presentation

Reviews (1): Last reviewed commit: "feat(markdown_render): add syntax highli..." | Re-trigger Greptile

const firstChild = element.firstElementChild;
if (firstChild?.tagName === "CODE") {
return (
<MarkdownCodeBlock
Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

P2 Trailing newline produces empty last line in highlighted blocks

micromark emits <code class="language-ts">const x = 1;\n</code> — the text content always ends with \n. Passing that directly to Highlight causes prism-react-renderer to emit a final empty token line, adding a blank row at the bottom of every highlighted code block.

Suggested change
<MarkdownCodeBlock
code={firstChild.textContent?.replace(/\n$/, "") ?? ""}

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