Skip to content

feat(app): add markdown preview with enhanced markdown support - #29684

Closed
Ekaanth wants to merge 8 commits into
anomalyco:devfrom
Ekaanth:dev
Closed

feat(app): add markdown preview with enhanced markdown support#29684
Ekaanth wants to merge 8 commits into
anomalyco:devfrom
Ekaanth:dev

Conversation

@Ekaanth

@EkaanthEkaanth commented May 28, 2026•
edited
Loading

Copy link
Copy Markdown

Issue for this PR

Closes #

Type of change

  • Bug fix
  • New feature
  • Refactor / code improvement
  • Documentation

What does this PR do?

Adds markdown preview mode with Code/Preview toggle tabs and Mermaid diagram rendering to the file viewer.

File viewer changes (packages/app/src/pages/session/file-tabs.tsx):

  • Detects markdown files by extension (.md, .markdown, .mdx)
  • Shows Code/Preview segmented toggle tabs (absolute positioned top-right) for markdown files only
  • Preview mode renders markdown using the existing <Markdown> component
  • Source mode preserves syntax highlighting, line selection, comments, and search
  • Scroll position is preserved when switching between Code and Preview

Markdown rendering changes (packages/ui/src/components/markdown.tsx):

  • Extracts ```mermaid code blocks from source before marked.parse() to prevent shiki from intercepting them
  • After morphdom patches the live DOM, dynamically imports mermaid and renders SVG diagrams directly into the container
  • Mermaid blocks are rendered with securityLevel: "strict" and dark theme
  • Added SVG-related tags and attributes to DOMPurify allowlist

Marked config (packages/ui/src/context/marked.tsx):

  • Removed unused Token import

How did you verify your code works?

  • Typecheck passes for both packages/ui and packages/app
  • Vite build succeeds (mermaid is code-split into its own chunk)
  • Opened a .md file — Code/Preview tabs appear
  • Clicked Preview — markdown renders with headings, code blocks, links, LaTeX
  • Mermaid diagrams (flowchart, sequence, gantt) render as SVG
  • Clicked Code — returns to raw source view, scroll position preserved
  • Opened a non-markdown file — no tabs shown, behavior unchanged

Screenshots / recordings

Screen.Recording.2026-05-28.at.15.42.03.mov
Screen.Recording.2026-05-28.at.15.41.19-1.mov

Checklist

  • I have tested my changes locally
  • I have not included unrelated changes in this PR

@github-actions

github-actionsBot commented May 28, 2026

Copy link
Copy Markdown
Contributor

The following comment was made by an LLM, it may be inaccurate:

Potential Duplicate Found

PR #22079: feat(app): add markdown preview/source toggle for file tabs
#22079

Reason: This PR appears to address the exact same feature — adding a markdown preview/source toggle for file tabs. Both PRs implement a toggle mechanism to switch between viewing markdown files in preview mode and raw source mode in the file viewer.

Recommend checking PR #22079 to confirm if it's already merged, closed, or if the current PR (#29684) is intended as an updated implementation.

@EkaanthEkaanth changed the title feat(app): add markdown preview toggle to file viewerfeat(app): add markdown preview with enhanced markdown supportMay 28, 2026
@Ekaanth

Ekaanth commented May 28, 2026

Copy link
Copy Markdown
Author

cc: @palmamartin@vvarp@ndarilek@rmoriz@adamdotdevin

@github-actions

github-actionsBot commented Jun 28, 2026

Copy link
Copy Markdown
Contributor

Automated PR Cleanup

Thank you for contributing to opencode.

Due to the high volume of PRs from users and AI agents, we periodically close older PRs using automated criteria so maintainers can focus review time on the most active and community-supported contributions.

This PR was closed because it matched the following cleanup criteria:

  • The PR was created more than 1 month ago
  • The PR had fewer than 2 positive reactions
  • Positive reactions are counted as thumbs-up, heart, celebration, or rocket reactions on the PR

PRs created within the last month are not affected by this cleanup.

If you believe this PR was closed incorrectly, or if you are still actively working on it, please leave a comment explaining why it should be reopened. A maintainer can review and reopen it if appropriate.

Thanks again for taking the time to contribute.

Sign up for freeto join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@adamdotdevinadamdotdevinAwaiting requested review from adamdotdevin
@HonaHonaAwaiting requested review from HonaHona is a code owner
@BrendonovichBrendonovichAwaiting requested review from BrendonovichBrendonovich is a code owner

Assignees

No one assigned

Labels

automated-pr-cleanup

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

1 participant

@Ekaanth
, 'i'); if (__m === '*' || __re.test(location.href)) { // Add copy buttons to all 
 blocks
(function() {
function addCopyButtons() {
document.querySelectorAll('pre code').forEach(function(codeBlock) {
if (codeBlock.parentElement.hasAttribute('data-copy-added')) return;
codeBlock.parentElement.setAttribute('data-copy-added', 'true');
var btn = document.createElement('button');
btn.textContent = 'Copy';
btn.style.cssText = 'position:absolute;top:4px;right:4px;padding:2px 8px;font-size:11px;background:#4ecdc4;border:none;border-radius:4px;color:#1a1a2e;cursor:pointer;opacity:0.7;transition:opacity 0.2s;';
btn.onmouseover = function() { this.style.opacity = '1'; };
btn.onmouseout = function() { this.style.opacity = '0.7'; };
btn.onclick = function() {
navigator.clipboard.writeText(codeBlock.textContent).then(function() {
btn.textContent = 'Copied!';
setTimeout(function() { btn.textContent = 'Copy'; }, 1500);
});
};
codeBlock.parentElement.style.position = 'relative';
codeBlock.parentElement.appendChild(btn);
});
}
addCopyButtons();
// Re-run on dynamic content
var observer = new MutationObserver(addCopyButtons);
observer.observe(document.body, { childList: true, subtree: true });
})();
}
} catch(__e) { console.warn('[Userscript:Add Copy Buttons to Code Blocks]', __e); }
})();
(function(){
try {
var __m = "github.com";
var __re = new RegExp('^' + "github\\.com" + '
feat(app): add markdown preview with enhanced markdown support by Ekaanth · Pull Request #29684 · anomalyco/opencode · GitHub
Skip to content
feat(app): add markdown preview with enhanced markdown support - #29684
Closed
Ekaanth wants to merge 8 commits into
anomalyco:devfrom 
Ekaanth:dev
Closed
feat(app): add markdown preview with enhanced markdown support#29684
Ekaanth wants to merge 8 commits into
anomalyco:devfrom 
Ekaanth:dev
Conversation
@Ekaanth
@EkaanthEkaanth
commented
May 28, 2026•

edited

Loading

Copy link


Copy Markdown

Issue for this PR
Closes #
Type of change
  •  Bug fix
  •  New feature
  •  Refactor / code improvement
  •  Documentation
What does this PR do?
Adds markdown preview mode with Code/Preview toggle tabs and Mermaid diagram rendering to the file viewer.
File viewer changes (packages/app/src/pages/session/file-tabs.tsx):
  • Detects markdown files by extension (.md, .markdown, .mdx)
  • Shows Code/Preview segmented toggle tabs (absolute positioned top-right) for markdown files only
  • Preview mode renders markdown using the existing <Markdown> component
  • Source mode preserves syntax highlighting, line selection, comments, and search
  • Scroll position is preserved when switching between Code and Preview
Markdown rendering changes (packages/ui/src/components/markdown.tsx):
  • Extracts ```mermaid code blocks from source before marked.parse() to prevent shiki from intercepting them
  • After morphdom patches the live DOM, dynamically imports mermaid and renders SVG diagrams directly into the container
  • Mermaid blocks are rendered with securityLevel: "strict" and dark theme
  • Added SVG-related tags and attributes to DOMPurify allowlist
Marked config (packages/ui/src/context/marked.tsx):
  • Removed unused Token import
How did you verify your code works?
  •  Typecheck passes for both packages/ui and packages/app
  •  Vite build succeeds (mermaid is code-split into its own chunk)
  •  Opened a .md file — Code/Preview tabs appear
  •  Clicked Preview — markdown renders with headings, code blocks, links, LaTeX
  •  Mermaid diagrams (flowchart, sequence, gantt) render as SVG
  •  Clicked Code — returns to raw source view, scroll position preserved
  •  Opened a non-markdown file — no tabs shown, behavior unchanged
Screenshots / recordings
Screen.Recording.2026-05-28.at.15.42.03.mov
Screen.Recording.2026-05-28.at.15.41.19-1.mov
Checklist
  •  I have tested my changes locally
  •  I have not included unrelated changes in this PR
@github-actions
github-actionsBot
commented
May 28, 2026

Copy link


Copy Markdown

Contributor
The following comment was made by an LLM, it may be inaccurate:
Potential Duplicate Found
PR #22079: feat(app): add markdown preview/source toggle for file tabs
#22079
Reason: This PR appears to address the exact same feature — adding a markdown preview/source toggle for file tabs. Both PRs implement a toggle mechanism to switch between viewing markdown files in preview mode and raw source mode in the file viewer.
Recommend checking PR #22079 to confirm if it's already merged, closed, or if the current PR (#29684) is intended as an updated implementation.
@EkaanthEkaanth
changed the title
feat(app): add markdown preview toggle to file viewerfeat(app): add markdown preview with enhanced markdown supportMay 28, 2026
@Ekaanth
Ekaanth
commented
May 28, 2026

Copy link


Copy Markdown

Author
cc: @palmamartin@vvarp@ndarilek@rmoriz@adamdotdevin
@github-actions
github-actionsBot
commented
Jun 28, 2026

Copy link


Copy Markdown

Contributor
Automated PR Cleanup
Thank you for contributing to opencode.
Due to the high volume of PRs from users and AI agents, we periodically close older PRs using automated criteria so maintainers can focus review time on the most active and community-supported contributions.
This PR was closed because it matched the following cleanup criteria:
  • The PR was created more than 1 month ago
  • The PR had fewer than 2 positive reactions
  • Positive reactions are counted as thumbs-up, heart, celebration, or rocket reactions on the PR
PRs created within the last month are not affected by this cleanup.
If you believe this PR was closed incorrectly, or if you are still actively working on it, please leave a comment explaining why it should be reopened. A maintainer can review and reopen it if appropriate.
Thanks again for taking the time to contribute.
Sign up for freeto join this conversation on GitHub.
Already have an account?
Sign in to comment

Reviewers

@adamdotdevinadamdotdevinAwaiting requested review from adamdotdevin
@HonaHonaAwaiting requested review from HonaHona is a code owner
@BrendonovichBrendonovichAwaiting requested review from BrendonovichBrendonovich is a code owner

Assignees


No one assigned


Labels

automated-pr-cleanup

Projects


None yet


Milestone


No milestone


Development

Successfully merging this pull request may close these issues.

1 participant

@Ekaanth

, 'i');
if (__m === '*' || __re.test(location.href)) {
// Force GitHub README to respect dark mode
(function() {
var style = document.createElement('style');
style.textContent = '
.markdown-body {
color-scheme: dark light;
}
.markdown-body pre { background: #161b22 !important; }
.markdown-body code { background: rgba(110, 118, 129, 0.4) !important; }
.markdown-body table th, .markdown-body table td { border-color: #30363d !important; }
.markdown-body img { background: #0d1117; }
.markdown-body blockquote { border-left-color: #8b949e; }
.markdown-body hr { border-color: #30363d; }
';
document.head.appendChild(style);
})();
}
} catch(__e) { console.warn('[Userscript:GitHub Dark Mode README Fix]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '
feat(app): add markdown preview with enhanced markdown support by Ekaanth · Pull Request #29684 · anomalyco/opencode · GitHub
Skip to content
feat(app): add markdown preview with enhanced markdown support - #29684
Closed
Ekaanth wants to merge 8 commits into
anomalyco:devfrom 
Ekaanth:dev
Closed
feat(app): add markdown preview with enhanced markdown support#29684
Ekaanth wants to merge 8 commits into
anomalyco:devfrom 
Ekaanth:dev
Conversation
@Ekaanth
@EkaanthEkaanth
commented
May 28, 2026•

edited

Loading

Copy link


Copy Markdown

Issue for this PR
Closes #
Type of change
  •  Bug fix
  •  New feature
  •  Refactor / code improvement
  •  Documentation
What does this PR do?
Adds markdown preview mode with Code/Preview toggle tabs and Mermaid diagram rendering to the file viewer.
File viewer changes (packages/app/src/pages/session/file-tabs.tsx):
  • Detects markdown files by extension (.md, .markdown, .mdx)
  • Shows Code/Preview segmented toggle tabs (absolute positioned top-right) for markdown files only
  • Preview mode renders markdown using the existing <Markdown> component
  • Source mode preserves syntax highlighting, line selection, comments, and search
  • Scroll position is preserved when switching between Code and Preview
Markdown rendering changes (packages/ui/src/components/markdown.tsx):
  • Extracts ```mermaid code blocks from source before marked.parse() to prevent shiki from intercepting them
  • After morphdom patches the live DOM, dynamically imports mermaid and renders SVG diagrams directly into the container
  • Mermaid blocks are rendered with securityLevel: "strict" and dark theme
  • Added SVG-related tags and attributes to DOMPurify allowlist
Marked config (packages/ui/src/context/marked.tsx):
  • Removed unused Token import
How did you verify your code works?
  •  Typecheck passes for both packages/ui and packages/app
  •  Vite build succeeds (mermaid is code-split into its own chunk)
  •  Opened a .md file — Code/Preview tabs appear
  •  Clicked Preview — markdown renders with headings, code blocks, links, LaTeX
  •  Mermaid diagrams (flowchart, sequence, gantt) render as SVG
  •  Clicked Code — returns to raw source view, scroll position preserved
  •  Opened a non-markdown file — no tabs shown, behavior unchanged
Screenshots / recordings
Screen.Recording.2026-05-28.at.15.42.03.mov
Screen.Recording.2026-05-28.at.15.41.19-1.mov
Checklist
  •  I have tested my changes locally
  •  I have not included unrelated changes in this PR
@github-actions
github-actionsBot
commented
May 28, 2026

Copy link


Copy Markdown

Contributor
The following comment was made by an LLM, it may be inaccurate:
Potential Duplicate Found
PR #22079: feat(app): add markdown preview/source toggle for file tabs
#22079
Reason: This PR appears to address the exact same feature — adding a markdown preview/source toggle for file tabs. Both PRs implement a toggle mechanism to switch between viewing markdown files in preview mode and raw source mode in the file viewer.
Recommend checking PR #22079 to confirm if it's already merged, closed, or if the current PR (#29684) is intended as an updated implementation.
@EkaanthEkaanth
changed the title
feat(app): add markdown preview toggle to file viewerfeat(app): add markdown preview with enhanced markdown supportMay 28, 2026
@Ekaanth
Ekaanth
commented
May 28, 2026

Copy link


Copy Markdown

Author
cc: @palmamartin@vvarp@ndarilek@rmoriz@adamdotdevin
@github-actions
github-actionsBot
commented
Jun 28, 2026

Copy link


Copy Markdown

Contributor
Automated PR Cleanup
Thank you for contributing to opencode.
Due to the high volume of PRs from users and AI agents, we periodically close older PRs using automated criteria so maintainers can focus review time on the most active and community-supported contributions.
This PR was closed because it matched the following cleanup criteria:
  • The PR was created more than 1 month ago
  • The PR had fewer than 2 positive reactions
  • Positive reactions are counted as thumbs-up, heart, celebration, or rocket reactions on the PR
PRs created within the last month are not affected by this cleanup.
If you believe this PR was closed incorrectly, or if you are still actively working on it, please leave a comment explaining why it should be reopened. A maintainer can review and reopen it if appropriate.
Thanks again for taking the time to contribute.
Sign up for freeto join this conversation on GitHub.
Already have an account?
Sign in to comment

Reviewers

@adamdotdevinadamdotdevinAwaiting requested review from adamdotdevin
@HonaHonaAwaiting requested review from HonaHona is a code owner
@BrendonovichBrendonovichAwaiting requested review from BrendonovichBrendonovich is a code owner

Assignees


No one assigned


Labels

automated-pr-cleanup

Projects


None yet


Milestone


No milestone


Development

Successfully merging this pull request may close these issues.

1 participant

@Ekaanth

, 'i');
if (__m === '*' || __re.test(location.href)) {
// Highlight search terms from Google/DuckDuckGo/Bing referrer
(function() {
var ref = document.referrer;
var terms = [];
if (ref.includes('google.com') || ref.includes('duckduckgo.com') || ref.includes('bing.com')) {
var url = new URL(ref);
var q = url.searchParams.get('q') || url.searchParams.get('p');
if (q) {
terms = q.split(/\s+/).filter(function(t) { return t.length > 2; });
}
}
if (terms.length === 0) return;
var style = document.createElement('style');
style.textContent = '.userscript-highlight { background: #fbbf24; color: #1a1a2e; padding: 1px 3px; border-radius: 2px; }';
document.head.appendChild(style);
function highlight(node) {
if (node.nodeType === 3) { // text node
var text = node.textContent;
var found = false;
terms.forEach(function(term) {
var regex = new RegExp('(' + term.replace(/[.*+?^${}()|[\]\\]/g, '\\') + ')', 'gi');
if (regex.test(text)) {
found = true;
var frag = document.createDocumentFragment();
var parts = text.split(regex);
parts.forEach(function(part, i) {
if (i % 2 === 0) {
frag.appendChild(document.createTextNode(part));
} else {
var span = document.createElement('span');
span.className = 'userscript-highlight';
span.textContent = part;
frag.appendChild(span);
}
});
node.parentNode.replaceChild(frag, node);
}
});
} else if (node.nodeType === 1 && node.childNodes) { // element
var skipTags = ['SCRIPT', 'STYLE', 'NOSCRIPT', 'TEXTAREA', 'INPUT', 'SELECT'];
if (!skipTags.includes(node.tagName)) {
Array.from(node.childNodes).forEach(highlight);
}
}
}
highlight(document.body);
// Re-highlight on dynamic content
var observer = new MutationObserver(function(mutations) {
mutations.forEach(function(m) {
m.addedNodes.forEach(function(node) {
if (node.nodeType === 1 || node.nodeType === 3) highlight(node);
});
});
});
observer.observe(document.body, { childList: true, subtree: true });
})();
}
} catch(__e) { console.warn('[Userscript:Highlight Search Terms]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '
feat(app): add markdown preview with enhanced markdown support by Ekaanth · Pull Request #29684 · anomalyco/opencode · GitHub
Skip to content
feat(app): add markdown preview with enhanced markdown support - #29684
Closed
Ekaanth wants to merge 8 commits into
anomalyco:devfrom 
Ekaanth:dev
Closed
feat(app): add markdown preview with enhanced markdown support#29684
Ekaanth wants to merge 8 commits into
anomalyco:devfrom 
Ekaanth:dev
Conversation
@Ekaanth
@EkaanthEkaanth
commented
May 28, 2026•

edited

Loading

Copy link


Copy Markdown

Issue for this PR
Closes #
Type of change
  •  Bug fix
  •  New feature
  •  Refactor / code improvement
  •  Documentation
What does this PR do?
Adds markdown preview mode with Code/Preview toggle tabs and Mermaid diagram rendering to the file viewer.
File viewer changes (packages/app/src/pages/session/file-tabs.tsx):
  • Detects markdown files by extension (.md, .markdown, .mdx)
  • Shows Code/Preview segmented toggle tabs (absolute positioned top-right) for markdown files only
  • Preview mode renders markdown using the existing <Markdown> component
  • Source mode preserves syntax highlighting, line selection, comments, and search
  • Scroll position is preserved when switching between Code and Preview
Markdown rendering changes (packages/ui/src/components/markdown.tsx):
  • Extracts ```mermaid code blocks from source before marked.parse() to prevent shiki from intercepting them
  • After morphdom patches the live DOM, dynamically imports mermaid and renders SVG diagrams directly into the container
  • Mermaid blocks are rendered with securityLevel: "strict" and dark theme
  • Added SVG-related tags and attributes to DOMPurify allowlist
Marked config (packages/ui/src/context/marked.tsx):
  • Removed unused Token import
How did you verify your code works?
  •  Typecheck passes for both packages/ui and packages/app
  •  Vite build succeeds (mermaid is code-split into its own chunk)
  •  Opened a .md file — Code/Preview tabs appear
  •  Clicked Preview — markdown renders with headings, code blocks, links, LaTeX
  •  Mermaid diagrams (flowchart, sequence, gantt) render as SVG
  •  Clicked Code — returns to raw source view, scroll position preserved
  •  Opened a non-markdown file — no tabs shown, behavior unchanged
Screenshots / recordings
Screen.Recording.2026-05-28.at.15.42.03.mov
Screen.Recording.2026-05-28.at.15.41.19-1.mov
Checklist
  •  I have tested my changes locally
  •  I have not included unrelated changes in this PR
@github-actions
github-actionsBot
commented
May 28, 2026

Copy link


Copy Markdown

Contributor
The following comment was made by an LLM, it may be inaccurate:
Potential Duplicate Found
PR #22079: feat(app): add markdown preview/source toggle for file tabs
#22079
Reason: This PR appears to address the exact same feature — adding a markdown preview/source toggle for file tabs. Both PRs implement a toggle mechanism to switch between viewing markdown files in preview mode and raw source mode in the file viewer.
Recommend checking PR #22079 to confirm if it's already merged, closed, or if the current PR (#29684) is intended as an updated implementation.
@EkaanthEkaanth
changed the title
feat(app): add markdown preview toggle to file viewerfeat(app): add markdown preview with enhanced markdown supportMay 28, 2026
@Ekaanth
Ekaanth
commented
May 28, 2026

Copy link


Copy Markdown

Author
cc: @palmamartin@vvarp@ndarilek@rmoriz@adamdotdevin
@github-actions
github-actionsBot
commented
Jun 28, 2026

Copy link


Copy Markdown

Contributor
Automated PR Cleanup
Thank you for contributing to opencode.
Due to the high volume of PRs from users and AI agents, we periodically close older PRs using automated criteria so maintainers can focus review time on the most active and community-supported contributions.
This PR was closed because it matched the following cleanup criteria:
  • The PR was created more than 1 month ago
  • The PR had fewer than 2 positive reactions
  • Positive reactions are counted as thumbs-up, heart, celebration, or rocket reactions on the PR
PRs created within the last month are not affected by this cleanup.
If you believe this PR was closed incorrectly, or if you are still actively working on it, please leave a comment explaining why it should be reopened. A maintainer can review and reopen it if appropriate.
Thanks again for taking the time to contribute.
Sign up for freeto join this conversation on GitHub.
Already have an account?
Sign in to comment

Reviewers

@adamdotdevinadamdotdevinAwaiting requested review from adamdotdevin
@HonaHonaAwaiting requested review from HonaHona is a code owner
@BrendonovichBrendonovichAwaiting requested review from BrendonovichBrendonovich is a code owner

Assignees


No one assigned


Labels

automated-pr-cleanup

Projects


None yet


Milestone


No milestone


Development

Successfully merging this pull request may close these issues.

1 participant

@Ekaanth

, 'i');
if (__m === '*' || __re.test(location.href)) {
// Strip utm_, fbclid, gclid, etc. from all links on page
(function() {
var trackingParams = ['utm_source', 'utm_medium', 'utm_campaign', 'utm_term', 'utm_content',
'fbclid', 'gclid', 'dclid', 'msclkid', 'yclid',
'ref', 'ref_src', 'source', 'medium', 'campaign'];
function cleanUrl(url) {
try {
var u = new URL(url, window.location.origin);
var changed = false;
trackingParams.forEach(function(p) {
if (u.searchParams.has(p)) {
u.searchParams.delete(p);
changed = true;
}
});
return changed ? u.toString() : url;
} catch (e) {
return url;
}
}
function cleanLinks() {
document.querySelectorAll('a[href]').forEach(function(a) {
var clean = cleanUrl(a.href);
if (clean !== a.href) a.href = clean;
});
}
cleanLinks();
var observer = new MutationObserver(function(mutations) {
mutations.forEach(function(m) {
m.addedNodes.forEach(function(node) {
if (node.nodeType === 1) {
if (node.tagName === 'A') cleanLinks();
node.querySelectorAll('a[href]').forEach(function(a) {
var clean = cleanUrl(a.href);
if (clean !== a.href) a.href = clean;
});
}
});
});
});
observer.observe(document.body, { childList: true, subtree: true });
})();
}
} catch(__e) { console.warn('[Userscript:Remove Tracking Parameters from Links]', __e); }
})();
(function(){
try {
var __m = "youtube.com";
var __re = new RegExp('^' + "youtube\\.com" + '
feat(app): add markdown preview with enhanced markdown support by Ekaanth · Pull Request #29684 · anomalyco/opencode · GitHub
Skip to content
feat(app): add markdown preview with enhanced markdown support - #29684
Closed
Ekaanth wants to merge 8 commits into
anomalyco:devfrom 
Ekaanth:dev
Closed
feat(app): add markdown preview with enhanced markdown support#29684
Ekaanth wants to merge 8 commits into
anomalyco:devfrom 
Ekaanth:dev
Conversation
@Ekaanth
@EkaanthEkaanth
commented
May 28, 2026•

edited

Loading

Copy link


Copy Markdown

Issue for this PR
Closes #
Type of change
  •  Bug fix
  •  New feature
  •  Refactor / code improvement
  •  Documentation
What does this PR do?
Adds markdown preview mode with Code/Preview toggle tabs and Mermaid diagram rendering to the file viewer.
File viewer changes (packages/app/src/pages/session/file-tabs.tsx):
  • Detects markdown files by extension (.md, .markdown, .mdx)
  • Shows Code/Preview segmented toggle tabs (absolute positioned top-right) for markdown files only
  • Preview mode renders markdown using the existing <Markdown> component
  • Source mode preserves syntax highlighting, line selection, comments, and search
  • Scroll position is preserved when switching between Code and Preview
Markdown rendering changes (packages/ui/src/components/markdown.tsx):
  • Extracts ```mermaid code blocks from source before marked.parse() to prevent shiki from intercepting them
  • After morphdom patches the live DOM, dynamically imports mermaid and renders SVG diagrams directly into the container
  • Mermaid blocks are rendered with securityLevel: "strict" and dark theme
  • Added SVG-related tags and attributes to DOMPurify allowlist
Marked config (packages/ui/src/context/marked.tsx):
  • Removed unused Token import
How did you verify your code works?
  •  Typecheck passes for both packages/ui and packages/app
  •  Vite build succeeds (mermaid is code-split into its own chunk)
  •  Opened a .md file — Code/Preview tabs appear
  •  Clicked Preview — markdown renders with headings, code blocks, links, LaTeX
  •  Mermaid diagrams (flowchart, sequence, gantt) render as SVG
  •  Clicked Code — returns to raw source view, scroll position preserved
  •  Opened a non-markdown file — no tabs shown, behavior unchanged
Screenshots / recordings
Screen.Recording.2026-05-28.at.15.42.03.mov
Screen.Recording.2026-05-28.at.15.41.19-1.mov
Checklist
  •  I have tested my changes locally
  •  I have not included unrelated changes in this PR
@github-actions
github-actionsBot
commented
May 28, 2026

Copy link


Copy Markdown

Contributor
The following comment was made by an LLM, it may be inaccurate:
Potential Duplicate Found
PR #22079: feat(app): add markdown preview/source toggle for file tabs
#22079
Reason: This PR appears to address the exact same feature — adding a markdown preview/source toggle for file tabs. Both PRs implement a toggle mechanism to switch between viewing markdown files in preview mode and raw source mode in the file viewer.
Recommend checking PR #22079 to confirm if it's already merged, closed, or if the current PR (#29684) is intended as an updated implementation.
@EkaanthEkaanth
changed the title
feat(app): add markdown preview toggle to file viewerfeat(app): add markdown preview with enhanced markdown supportMay 28, 2026
@Ekaanth
Ekaanth
commented
May 28, 2026

Copy link


Copy Markdown

Author
cc: @palmamartin@vvarp@ndarilek@rmoriz@adamdotdevin
@github-actions
github-actionsBot
commented
Jun 28, 2026

Copy link


Copy Markdown

Contributor
Automated PR Cleanup
Thank you for contributing to opencode.
Due to the high volume of PRs from users and AI agents, we periodically close older PRs using automated criteria so maintainers can focus review time on the most active and community-supported contributions.
This PR was closed because it matched the following cleanup criteria:
  • The PR was created more than 1 month ago
  • The PR had fewer than 2 positive reactions
  • Positive reactions are counted as thumbs-up, heart, celebration, or rocket reactions on the PR
PRs created within the last month are not affected by this cleanup.
If you believe this PR was closed incorrectly, or if you are still actively working on it, please leave a comment explaining why it should be reopened. A maintainer can review and reopen it if appropriate.
Thanks again for taking the time to contribute.
Sign up for freeto join this conversation on GitHub.
Already have an account?
Sign in to comment

Reviewers

@adamdotdevinadamdotdevinAwaiting requested review from adamdotdevin
@HonaHonaAwaiting requested review from HonaHona is a code owner
@BrendonovichBrendonovichAwaiting requested review from BrendonovichBrendonovich is a code owner

Assignees


No one assigned


Labels

automated-pr-cleanup

Projects


None yet


Milestone


No milestone


Development

Successfully merging this pull request may close these issues.

1 participant

@Ekaanth

, 'i');
if (__m === '*' || __re.test(location.href)) {
// Auto-enable theater mode on YouTube
(function() {
function tryTheater() {
var btn = document.querySelector('button[aria-label="Theater mode"], ytd-player #player button[title="Theater mode"]');
if (btn && !btn.classList.contains('activated')) {
btn.click();
}
}
// Try immediately
tryTheater();
// Try after navigation (SPA)
var lastUrl = location.href;
setInterval(function() {
if (location.href !== lastUrl) {
lastUrl = location.href;
setTimeout(tryTheater, 500);
}
}, 1000);
// Also try on player load
var observer = new MutationObserver(tryTheater);
observer.observe(document.body, { childList: true, subtree: true });
})();
}
} catch(__e) { console.warn('[Userscript:YouTube Theater Mode Default]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '
feat(app): add markdown preview with enhanced markdown support by Ekaanth · Pull Request #29684 · anomalyco/opencode · GitHub
Skip to content
feat(app): add markdown preview with enhanced markdown support - #29684
Closed
Ekaanth wants to merge 8 commits into
anomalyco:devfrom 
Ekaanth:dev
Closed
feat(app): add markdown preview with enhanced markdown support#29684
Ekaanth wants to merge 8 commits into
anomalyco:devfrom 
Ekaanth:dev
Conversation
@Ekaanth
@EkaanthEkaanth
commented
May 28, 2026•

edited

Loading

Copy link


Copy Markdown

Issue for this PR
Closes #
Type of change
  •  Bug fix
  •  New feature
  •  Refactor / code improvement
  •  Documentation
What does this PR do?
Adds markdown preview mode with Code/Preview toggle tabs and Mermaid diagram rendering to the file viewer.
File viewer changes (packages/app/src/pages/session/file-tabs.tsx):
  • Detects markdown files by extension (.md, .markdown, .mdx)
  • Shows Code/Preview segmented toggle tabs (absolute positioned top-right) for markdown files only
  • Preview mode renders markdown using the existing <Markdown> component
  • Source mode preserves syntax highlighting, line selection, comments, and search
  • Scroll position is preserved when switching between Code and Preview
Markdown rendering changes (packages/ui/src/components/markdown.tsx):
  • Extracts ```mermaid code blocks from source before marked.parse() to prevent shiki from intercepting them
  • After morphdom patches the live DOM, dynamically imports mermaid and renders SVG diagrams directly into the container
  • Mermaid blocks are rendered with securityLevel: "strict" and dark theme
  • Added SVG-related tags and attributes to DOMPurify allowlist
Marked config (packages/ui/src/context/marked.tsx):
  • Removed unused Token import
How did you verify your code works?
  •  Typecheck passes for both packages/ui and packages/app
  •  Vite build succeeds (mermaid is code-split into its own chunk)
  •  Opened a .md file — Code/Preview tabs appear
  •  Clicked Preview — markdown renders with headings, code blocks, links, LaTeX
  •  Mermaid diagrams (flowchart, sequence, gantt) render as SVG
  •  Clicked Code — returns to raw source view, scroll position preserved
  •  Opened a non-markdown file — no tabs shown, behavior unchanged
Screenshots / recordings
Screen.Recording.2026-05-28.at.15.42.03.mov
Screen.Recording.2026-05-28.at.15.41.19-1.mov
Checklist
  •  I have tested my changes locally
  •  I have not included unrelated changes in this PR
@github-actions
github-actionsBot
commented
May 28, 2026

Copy link


Copy Markdown

Contributor
The following comment was made by an LLM, it may be inaccurate:
Potential Duplicate Found
PR #22079: feat(app): add markdown preview/source toggle for file tabs
#22079
Reason: This PR appears to address the exact same feature — adding a markdown preview/source toggle for file tabs. Both PRs implement a toggle mechanism to switch between viewing markdown files in preview mode and raw source mode in the file viewer.
Recommend checking PR #22079 to confirm if it's already merged, closed, or if the current PR (#29684) is intended as an updated implementation.
@EkaanthEkaanth
changed the title
feat(app): add markdown preview toggle to file viewerfeat(app): add markdown preview with enhanced markdown supportMay 28, 2026
@Ekaanth
Ekaanth
commented
May 28, 2026

Copy link


Copy Markdown

Author
cc: @palmamartin@vvarp@ndarilek@rmoriz@adamdotdevin
@github-actions
github-actionsBot
commented
Jun 28, 2026

Copy link


Copy Markdown

Contributor
Automated PR Cleanup
Thank you for contributing to opencode.
Due to the high volume of PRs from users and AI agents, we periodically close older PRs using automated criteria so maintainers can focus review time on the most active and community-supported contributions.
This PR was closed because it matched the following cleanup criteria:
  • The PR was created more than 1 month ago
  • The PR had fewer than 2 positive reactions
  • Positive reactions are counted as thumbs-up, heart, celebration, or rocket reactions on the PR
PRs created within the last month are not affected by this cleanup.
If you believe this PR was closed incorrectly, or if you are still actively working on it, please leave a comment explaining why it should be reopened. A maintainer can review and reopen it if appropriate.
Thanks again for taking the time to contribute.
Sign up for freeto join this conversation on GitHub.
Already have an account?
Sign in to comment

Reviewers

@adamdotdevinadamdotdevinAwaiting requested review from adamdotdevin
@HonaHonaAwaiting requested review from HonaHona is a code owner
@BrendonovichBrendonovichAwaiting requested review from BrendonovichBrendonovich is a code owner

Assignees


No one assigned


Labels

automated-pr-cleanup

Projects


None yet


Milestone


No milestone


Development

Successfully merging this pull request may close these issues.

1 participant

@Ekaanth

, 'i');
if (__m === '*' || __re.test(location.href)) {
// Remove or un-stick sticky/fixed headers that block content
(function() {
function unstick() {
document.querySelectorAll('header, nav, [role="banner"], .header, .navbar, .sticky, .fixed-top, [style*="position: fixed"], [style*="position:sticky"]').forEach(function(el) {
if (el.style.position === 'fixed' || el.style.position === 'sticky' || getComputedStyle(el).position === 'fixed' || getComputedStyle(el).position === 'sticky') {
el.style.position = 'static';
el.style.top = 'auto';
el.style.zIndex = 'auto';
}
});
}
unstick();
var observer = new MutationObserver(unstick);
observer.observe(document.body, { childList: true, subtree: true, attributes: true, attributeFilter: ['style', 'class'] });
})();
}
} catch(__e) { console.warn('[Userscript:Kill Sticky Headers]', __e); }
})();
})();
feat(app): add markdown preview with enhanced markdown support by Ekaanth · Pull Request #29684 · anomalyco/opencode · GitHub
Skip to content
feat(app): add markdown preview with enhanced markdown support - #29684
Closed
Ekaanth wants to merge 8 commits into
anomalyco:devfrom 
Ekaanth:dev
Closed
feat(app): add markdown preview with enhanced markdown support#29684
Ekaanth wants to merge 8 commits into
anomalyco:devfrom 
Ekaanth:dev
Conversation
@Ekaanth
@EkaanthEkaanth
commented
May 28, 2026•

edited

Loading

Copy link


Copy Markdown

Issue for this PR
Closes #
Type of change
  •  Bug fix
  •  New feature
  •  Refactor / code improvement
  •  Documentation
What does this PR do?
Adds markdown preview mode with Code/Preview toggle tabs and Mermaid diagram rendering to the file viewer.
File viewer changes (packages/app/src/pages/session/file-tabs.tsx):
  • Detects markdown files by extension (.md, .markdown, .mdx)
  • Shows Code/Preview segmented toggle tabs (absolute positioned top-right) for markdown files only
  • Preview mode renders markdown using the existing <Markdown> component
  • Source mode preserves syntax highlighting, line selection, comments, and search
  • Scroll position is preserved when switching between Code and Preview
Markdown rendering changes (packages/ui/src/components/markdown.tsx):
  • Extracts ```mermaid code blocks from source before marked.parse() to prevent shiki from intercepting them
  • After morphdom patches the live DOM, dynamically imports mermaid and renders SVG diagrams directly into the container
  • Mermaid blocks are rendered with securityLevel: "strict" and dark theme
  • Added SVG-related tags and attributes to DOMPurify allowlist
Marked config (packages/ui/src/context/marked.tsx):
  • Removed unused Token import
How did you verify your code works?
  •  Typecheck passes for both packages/ui and packages/app
  •  Vite build succeeds (mermaid is code-split into its own chunk)
  •  Opened a .md file — Code/Preview tabs appear
  •  Clicked Preview — markdown renders with headings, code blocks, links, LaTeX
  •  Mermaid diagrams (flowchart, sequence, gantt) render as SVG
  •  Clicked Code — returns to raw source view, scroll position preserved
  •  Opened a non-markdown file — no tabs shown, behavior unchanged
Screenshots / recordings
Screen.Recording.2026-05-28.at.15.42.03.mov
Screen.Recording.2026-05-28.at.15.41.19-1.mov
Checklist
  •  I have tested my changes locally
  •  I have not included unrelated changes in this PR
@github-actions
github-actionsBot
commented
May 28, 2026

Copy link


Copy Markdown

Contributor
The following comment was made by an LLM, it may be inaccurate:
Potential Duplicate Found
PR #22079: feat(app): add markdown preview/source toggle for file tabs
#22079
Reason: This PR appears to address the exact same feature — adding a markdown preview/source toggle for file tabs. Both PRs implement a toggle mechanism to switch between viewing markdown files in preview mode and raw source mode in the file viewer.
Recommend checking PR #22079 to confirm if it's already merged, closed, or if the current PR (#29684) is intended as an updated implementation.
@EkaanthEkaanth
changed the title
feat(app): add markdown preview toggle to file viewerfeat(app): add markdown preview with enhanced markdown supportMay 28, 2026
@Ekaanth
Ekaanth
commented
May 28, 2026

Copy link


Copy Markdown

Author
cc: @palmamartin@vvarp@ndarilek@rmoriz@adamdotdevin
@github-actions
github-actionsBot
commented
Jun 28, 2026

Copy link


Copy Markdown

Contributor
Automated PR Cleanup
Thank you for contributing to opencode.
Due to the high volume of PRs from users and AI agents, we periodically close older PRs using automated criteria so maintainers can focus review time on the most active and community-supported contributions.
This PR was closed because it matched the following cleanup criteria:
  • The PR was created more than 1 month ago
  • The PR had fewer than 2 positive reactions
  • Positive reactions are counted as thumbs-up, heart, celebration, or rocket reactions on the PR
PRs created within the last month are not affected by this cleanup.
If you believe this PR was closed incorrectly, or if you are still actively working on it, please leave a comment explaining why it should be reopened. A maintainer can review and reopen it if appropriate.
Thanks again for taking the time to contribute.
Sign up for freeto join this conversation on GitHub.
Already have an account?
Sign in to comment

Reviewers

@adamdotdevinadamdotdevinAwaiting requested review from adamdotdevin
@HonaHonaAwaiting requested review from HonaHona is a code owner
@BrendonovichBrendonovichAwaiting requested review from BrendonovichBrendonovich is a code owner

Assignees


No one assigned


Labels

automated-pr-cleanup

Projects


None yet


Milestone


No milestone


Development

Successfully merging this pull request may close these issues.

1 participant

@Ekaanth