feat(shared): add syntax language badges and header toolbar to markdown code blocks

[sabhi128]

Summary of Changes

This PR enhances the code block rendering experience in MarkdownViewer.vue by adding an integrated toolbar featuring syntax language badges and an accessible copy button.

Key Enhancements:

1. Language Badges:
   • Parses the fenced code block language attribute (e.g., python, bash, json, yaml) and renders an uppercase badge in the header toolbar (PYTHON, BASH, etc.).
2. Dedicated Copy Button:
   • Relocates the copy action into the dedicated top-right header toolbar, avoiding overlap with wide lines of code.
3. Card Container:
   • Groups code blocks into structured containers with clean borders and subtle headers.
4. Unit Tests:
   • Added frontend/src/components/__tests__/shared/viewers/MarkdownViewer.spec.js asserting proper toolbar rendering and language badge generation.

[Copilot]

🟡 Changes recommended

Address the critical XSS risk and the malformed nested code-block markup.

Get a fresh assessment by requesting another Copilot review.

Pull request overview

Enhances Markdown code blocks with syntax badges, a header copy toolbar, and styled containers.

Changes:

• Adds language labels with a CODE fallback.
• Moves copy controls into the header toolbar.
• Adds rendering tests for badges and toolbar output.

File summaries

File	Description
frontend/src/components/shared/viewers/MarkdownViewer.vue	Adds code block headers, badges, copy controls, and styling.
frontend/src/components/__tests__/shared/viewers/MarkdownViewer.spec.js	Tests toolbar and language-label rendering.

Review details

Suppressed comments (1)

frontend/src/components/shared/viewers/MarkdownViewer.vue:65

• highlight is a markdown-it highlight hook, so returning a string that does not start with <pre makes markdown-it wrap it in its own <pre><code>...</code></pre>. This produces nested <pre><code><div class="code-block-container">... markup, leaving the toolbar inside the code element instead of creating the intended card structure. Use a custom renderer.rules.fence implementation for the complete card, or return a complete <pre> from this hook.

          return `<div class="code-block-container my-3 rounded-md border border-gray-200 overflow-hidden shadow-xs">${codeHeader}<pre class="!m-0 !p-3 !bg-gray-50 !overflow-x-auto"><code class="hl-code !leading-6 !text-sm">${highlightedCode}</code></pre></div>`

• Files reviewed: 2/2 changed files
• Comments generated: 1
• Review effort level: Lite

---

💡 Add a code-review agent skill or configure MCP servers for context-aware, tailored reviews. Learn more in the docs.