erik/slugkit.com
1
0
Fork 0
Code Issues 9 Pull requests Projects Releases Packages Wiki Activity Actions

Render markdown code spans and fences #29

Merged
erik merged 1 commit from task-b9d11dc6-markdown-code into main 2026-06-27 19:22:10 -05:00
Conversation 3 Commits 1 Files changed 5 +84 -11
erik commented 2026-06-27 16:55:18 -05:00
Owner
Copy link

Summary

  • render inline markdown code spans as <code>
  • render fenced code blocks as <pre><code> with safe language classes
  • preserve escaping for code contents and existing markdown behavior

Verification

  • npm run typecheck
  • npm test -- --run src/routes/tests/public.test.ts
  • npm test
  • npm run build
  • verified local dev article slug-cli-init renders inline code and fenced bash blocks in Chromium

Task: task-b9d11dc6

## Summary - render inline markdown code spans as `<code>` - render fenced code blocks as `<pre><code>` with safe language classes - preserve escaping for code contents and existing markdown behavior ## Verification - npm run typecheck - npm test -- --run src/routes/__tests__/public.test.ts - npm test - npm run build - verified local dev article `slug-cli-init` renders inline code and fenced bash blocks in Chromium Task: task-b9d11dc6
erik commented 2026-06-27 16:55:57 -05:00
Author
Owner
Copy link

Review summary

Approved. The PR adds semantic rendering for inline code spans and fenced code blocks while preserving the existing safe markdown behavior.

Acceptance criteria

  • Inline markdown code like `slug` renders as <code>slug</code>.
    • renderInlineMarkdown now extracts backtick spans into <code> placeholders before other inline formatting.
  • Fenced code blocks render as <pre><code>...</code></pre> or equivalent semantic HTML.
    • renderMarkdownBlock now detects triple-backtick blocks and emits <pre><code>.
  • Language hints such as bash are preserved as a safe class or metadata where practical.
    • Fenced language labels are restricted to [A-Za-z0-9_-], normalized, escaped, and rendered as class="language-bash".
  • Code contents are escaped and cannot inject HTML/script.
    • Code contents flow through escapeHtml; tests cover <script> inside fenced code.
  • Existing markdown behavior for headings, bold text, links, images, and paragraphs remains unchanged.
    • Existing markdown assertions remain and pass.
  • Tests cover inline code, fenced code blocks, and escaping inside code.
    • Public route markdown test now covers inline code, fenced bash block, and script escaping.

Blocking issues

None.

Warnings

None.

Verdict

Approved.

## Review summary Approved. The PR adds semantic rendering for inline code spans and fenced code blocks while preserving the existing safe markdown behavior. ## Acceptance criteria - [x] Inline markdown code like `` `slug` `` renders as `<code>slug</code>`. - `renderInlineMarkdown` now extracts backtick spans into `<code>` placeholders before other inline formatting. - [x] Fenced code blocks render as `<pre><code>...</code></pre>` or equivalent semantic HTML. - `renderMarkdownBlock` now detects triple-backtick blocks and emits `<pre><code>`. - [x] Language hints such as `bash` are preserved as a safe class or metadata where practical. - Fenced language labels are restricted to `[A-Za-z0-9_-]`, normalized, escaped, and rendered as `class="language-bash"`. - [x] Code contents are escaped and cannot inject HTML/script. - Code contents flow through `escapeHtml`; tests cover `<script>` inside fenced code. - [x] Existing markdown behavior for headings, bold text, links, images, and paragraphs remains unchanged. - Existing markdown assertions remain and pass. - [x] Tests cover inline code, fenced code blocks, and escaping inside code. - Public route markdown test now covers inline code, fenced bash block, and script escaping. ## Blocking issues None. ## Warnings None. ## Verdict Approved.
erik force-pushed task-b9d11dc6-markdown-code from 242609df79 to bb11a46f66 2026-06-27 18:43:50 -05:00 Compare
erik commented 2026-06-27 18:44:09 -05:00
Author
Owner
Copy link

Updated PR #29 to use Tailwind Typography for markdown presentation, not just semantic code rendering.

Changes added:

  • installed @tailwindcss/typography
  • enabled it with @plugin "@tailwindcss/typography"
  • replaced manual .post-content arbitrary descendant styling with prose prose-gray ... dark:prose-invert
  • removed the global pre, code { white-space: pre-wrap; } override so code blocks can scroll correctly
  • rebuilt committed CSS

Verification rerun:

  • npm run typecheck
  • npm test -- --run src/routes/__tests__/public.test.ts
  • npm test
  • npm run build
  • Chromium dev article check: .post-content has prose, inline <code>slug</code> exists, fenced <pre><code class="language-bash">... exists, pre white-space is pre, overflow-x is auto.
Updated PR #29 to use Tailwind Typography for markdown presentation, not just semantic code rendering. Changes added: - installed `@tailwindcss/typography` - enabled it with `@plugin "@tailwindcss/typography"` - replaced manual `.post-content` arbitrary descendant styling with `prose prose-gray ... dark:prose-invert` - removed the global `pre, code { white-space: pre-wrap; }` override so code blocks can scroll correctly - rebuilt committed CSS Verification rerun: - `npm run typecheck` - `npm test -- --run src/routes/__tests__/public.test.ts` - `npm test` - `npm run build` - Chromium dev article check: `.post-content` has `prose`, inline `<code>slug</code>` exists, fenced `<pre><code class="language-bash">...` exists, `pre` white-space is `pre`, overflow-x is `auto`.
erik force-pushed task-b9d11dc6-markdown-code from bb11a46f66 to b30293df34 2026-06-27 18:44:56 -05:00 Compare
erik commented 2026-06-27 18:45:37 -05:00
Author
Owner
Copy link

Review summary

Approved after amendment. The PR now addresses both sides of markdown rendering: semantic markdown-to-HTML for code spans/fences and proper article presentation through Tailwind Typography.

Acceptance criteria

  • Inline markdown code like `slug` renders as <code>slug</code>.
  • Fenced code blocks render as <pre><code>...</code></pre>.
  • Language hints such as bash are preserved safely as language-bash.
  • Code contents are escaped and cannot inject HTML/script.
  • Existing markdown behavior for headings, bold text, links, images, and paragraphs remains unchanged.
  • Tests cover inline code, fenced code blocks, and escaping inside code.
  • Markdown content uses Tailwind Typography (@tailwindcss/typography, prose, dark:prose-invert) instead of hand-rolled descendant styling.

Verification

  • npm run typecheck
  • npm test -- --run src/routes/__tests__/public.test.ts
  • npm test
  • npm run build
  • Chromium dev article check confirmed .post-content has prose, inline <code>slug</code> exists, fenced <pre><code class="language-bash">... exists, and code blocks scroll normally.

Blocking issues

None.

Warnings

None.

Verdict

Approved.

## Review summary Approved after amendment. The PR now addresses both sides of markdown rendering: semantic markdown-to-HTML for code spans/fences and proper article presentation through Tailwind Typography. ## Acceptance criteria - [x] Inline markdown code like `` `slug` `` renders as `<code>slug</code>`. - [x] Fenced code blocks render as `<pre><code>...</code></pre>`. - [x] Language hints such as `bash` are preserved safely as `language-bash`. - [x] Code contents are escaped and cannot inject HTML/script. - [x] Existing markdown behavior for headings, bold text, links, images, and paragraphs remains unchanged. - [x] Tests cover inline code, fenced code blocks, and escaping inside code. - [x] Markdown content uses Tailwind Typography (`@tailwindcss/typography`, `prose`, `dark:prose-invert`) instead of hand-rolled descendant styling. ## Verification - `npm run typecheck` - `npm test -- --run src/routes/__tests__/public.test.ts` - `npm test` - `npm run build` - Chromium dev article check confirmed `.post-content` has `prose`, inline `<code>slug</code>` exists, fenced `<pre><code class="language-bash">...` exists, and code blocks scroll normally. ## Blocking issues None. ## Warnings None. ## Verdict Approved.
erik merged commit ef7ab2273c into main 2026-06-27 19:22:10 -05:00
erik deleted branch task-b9d11dc6-markdown-code 2026-06-27 19:22:10 -05:00
Sign in to join this conversation.
Reviewers
No reviewers
Labels
Clear labels   
activitypub

   
actor

   
admin

   
ai-safety

   
article

   
articles

   
atproto

   
bug

   
cli

   
configuration

   
content

   
dev-environment

   
docker

   
enhancement

   
feature

   
federation

   
fediverse

   
forgejo

   
garage

   
health

   
how-to

   
logging

   
markdown

   
mastodon

   
media

   
navigation

   
opengraph

   
passkeys

   
preview

   
priority:medium

   
production

   
release

   
rendering

   
s3

   
settings

   
setup

   
status:active

   
status:done

   
status:inprogress

   
technical

   
webauthn
No labels
activitypub
actor
admin
ai-safety
article
articles
atproto
bug
cli
configuration
content
dev-environment
docker
enhancement
feature
federation
fediverse
forgejo
garage
health
how-to
logging
markdown
mastodon
media
navigation
opengraph
passkeys
preview
priority:medium
production
release
rendering
s3
settings
setup
status:active
status:done
status:inprogress
technical
webauthn
Milestone
Clear milestone
No items
No milestone
Projects
Clear projects
No items
No project
Assignees
Clear assignees
No assignees
1 participant
Notifications
Due date
The due date is invalid or out of range. Please use the format "yyyy-mm-dd".

No due date set.

Dependencies

No dependencies set.

Reference
erik/slugkit.com!29
No description provided.