Skip to content

fix(markdown): remove generated inline code backticks#368

Merged
Producdevity merged 2 commits into
stagingfrom
fix/markdown-inline-code-backticks
May 24, 2026
Merged

fix(markdown): remove generated inline code backticks#368
Producdevity merged 2 commits into
stagingfrom
fix/markdown-inline-code-backticks

Conversation

@Producdevity

@Producdevity Producdevity commented May 23, 2026

Copy link
Copy Markdown
Owner

Description

Fixes #282

Inline code in Markdown-rendered content was showing extra backticks because Tailwind Typography adds code::before and code::after content by default.

This overrides those pseudo-elements inside .prose, so descriptions, comments, and other Markdown content render inline code without the extra visible characters.

No dependencies.

Type of change

  • Bug fix
  • New feature
  • Breaking change
  • Documentation update
  • Refactor
  • Other (please describe):

How Has This Been Tested?

  • Local build
  • Lint
  • Typecheck
  • Unit tests
  • Manual testing

Checked:

  • pnpm lint:fix
  • pnpm lint
  • pnpm types
  • pnpm test src/utils/markdown.test.ts src/utils/markdown.node.test.ts
  • pnpm test
  • confirmed the compiled Tailwind output emits the .prose code::before / .prose code::after override after Typography's default backtick rule

Screenshots (if applicable)

N/A

Checklist

  • My code follows the style guidelines of this project
  • I have performed a self-review of my code
  • I have made corresponding changes to the documentation

Summary by CodeRabbit

  • Refactor

    • Reorganized internal markdown component structure for improved code maintainability and clarity.
  • Tests

    • Added comprehensive test coverage for markdown rendering functionality.

Review Change Stack

@vercel

vercel Bot commented May 23, 2026

Copy link
Copy Markdown

The latest updates on your projects. Learn more about Vercel for GitHub.

Project Deployment Actions Updated (UTC)
emuready Ready Ready Preview, Comment May 23, 2026 11:26pm

Request Review

@coderabbitai

coderabbitai Bot commented May 23, 2026

Copy link
Copy Markdown

Walkthrough

This PR reorganizes markdown components by moving MarkdownRenderer and TranslatableMarkdown from src/components/ui/form/ to a new dedicated src/components/ui/markdown/ module. It introduces shared prose styling constants, adds comprehensive test coverage, updates barrel exports, and revises import paths across the codebase.

Changes

Markdown Component Module Reorganization

Layer / File(s) Summary
MarkdownRenderer component and prose styling
src/components/ui/markdown/MarkdownRenderer.tsx, src/components/ui/markdown/markdownProseClasses.ts
Implements MarkdownRenderer with memoized markdown detection, conditional plain-text fallback with whitespace preservation, and HTML injection via dangerouslySetInnerHTML. Defines MARKDOWN_PROSE_CLASSES constant for prose element styling (headings, code, links, lists, blockquotes) with dark mode variants.
TranslatableMarkdown component
src/components/ui/markdown/TranslatableMarkdown.tsx
Wraps MarkdownRenderer with translation toggling via useTranslation hook, animated transitions between original and translated content using Framer Motion AnimatePresence and motion.div, and conditional ghost button for language switching.
Component tests and markdown module barrel
src/components/ui/markdown/MarkdownRenderer.test.tsx, src/components/ui/markdown/TranslatableMarkdown.test.tsx, src/components/ui/markdown/index.ts
Adds Vitest/React Testing Library suites verifying markdown parsing, plain-text fallback with whitespace-pre-wrap, whitespace preservation, and required CSS class application. Establishes markdown module barrel re-exporting both components.
Barrel export reconfiguration
src/components/ui/form/index.ts, src/components/ui/index.ts
Updates form barrel to remove MarkdownRenderer and TranslatableMarkdown exports while adding MultiSelect, SelectInput, and Toggle. Adds markdown module re-export to ui barrel.
Import path updates and code cleanup
src/app/docs/api/reference/page.tsx, src/lib/dynamic-imports.tsx, src/hooks/useTranslation.tsx
Updates MarkdownRenderer imports to use new markdown module path. Removes documentation comments from useTranslation hook and top-level comment from dynamic-imports file.

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20 minutes

Possibly related PRs

  • Producdevity/EmuReady#351: Updates parseMarkdown sanitization pipeline in src/utils/markdown.ts, which directly affects the markdown rendering behavior implemented by the new MarkdownRenderer component in this PR.
🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 inconclusive)

Check name Status Explanation Resolution
Out of Scope Changes check ❓ Inconclusive The PR includes restructuring of Markdown components (moving to new directory, refactoring imports) beyond the CSS fix for issue #282, but these align with the commit message about cleanup and refactoring. Clarify whether the component restructuring and import changes are part of the intended scope or should be separated into a different PR for clearer review.
✅ Passed checks (4 passed)
Check name Status Explanation
Title check ✅ Passed The PR title accurately describes the main fix: removing generated inline code backticks from Markdown-rendered content by overriding Tailwind Typography's pseudo-elements.
Linked Issues check ✅ Passed The changes directly address issue #282 by adding CSS to override .prose code::before and .prose code::after to prevent visible backticks in inline code.
Docstring Coverage ✅ Passed No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Description check ✅ Passed PR description is well-structured, includes issue reference, clear problem statement, solution, testing details, and completed checklist items.

✏️ Tip: You can configure your own custom pre-merge checks in the settings.

✨ Finishing Touches
📝 Generate docstrings
  • Create stacked PR
  • Commit on current branch
🧪 Generate unit tests (beta)
  • Create PR with unit tests
  • Commit unit tests in branch fix/markdown-inline-code-backticks
✨ Simplify code
  • Create PR with simplified code
  • Commit simplified code in branch fix/markdown-inline-code-backticks

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

Comment @coderabbitai help to get the list of available commands and usage tips.

@coderabbitai coderabbitai Bot left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

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

Caution

Some comments are outside the diff and can’t be posted inline due to platform limitations.

⚠️ Outside diff range comments (1)
src/app/globals.css (1)

4-4: ⚠️ Potential issue | 🟡 Minor | ⚡ Quick win

Tailwind v4 compatibility: @tailwindcss/typography matches the current @plugin setup.

@tailwindcss/typography is supported on Tailwind CSS v4 using the CSS-first @plugin "@tailwindcss/typography" registration style, which aligns with the src/app/globals.css usage. Reports using @tailwindcss/typography@0.5.16 on v4 are “mostly works”; the remaining risk is edge-case selector/variant interactions, so validate typography rendering for your main content patterns.

🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@src/app/globals.css` at line 4, The current use of the CSS-first Tailwind
plugin registration "`@plugin` '`@tailwindcss/typography`';" in globals.css is
compatible with Tailwind v4, so leave the `@plugin` declaration as-is (do not
switch to the v3-style plugin config), but run a quick visual check of
components that use prose/typography to catch any edge-case selector or variant
interactions; reference the `@plugin` line in src/app/globals.css and validate
pages that use the typography classes to ensure rendering is correct.
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Outside diff comments:
In `@src/app/globals.css`:
- Line 4: The current use of the CSS-first Tailwind plugin registration "`@plugin`
'`@tailwindcss/typography`';" in globals.css is compatible with Tailwind v4, so
leave the `@plugin` declaration as-is (do not switch to the v3-style plugin
config), but run a quick visual check of components that use prose/typography to
catch any edge-case selector or variant interactions; reference the `@plugin` line
in src/app/globals.css and validate pages that use the typography classes to
ensure rendering is correct.

ℹ️ Review info
⚙️ Run configuration

Configuration used: Repository UI

Review profile: CHILL

Plan: Pro

Run ID: 3a7dd05c-cf38-49d5-a6aa-1b71b3237eae

📥 Commits

Reviewing files that changed from the base of the PR and between 003d008 and 7ce80b4.

📒 Files selected for processing (1)
  • src/app/globals.css

@Producdevity Producdevity merged commit 8946a14 into staging May 24, 2026
8 checks passed
@Producdevity Producdevity deleted the fix/markdown-inline-code-backticks branch May 25, 2026 07:35
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.

[Bug]: Backticks are being rendered on the listing description

1 participant