erik/slugkit.com

Fork 0

Bug: markdown renderer does not render inline or fenced code blocks #28

New issue

Closed

opened 2026-06-27 16:52:34 -05:00 by erik · 3 comments

erik commented

2026-06-27 16:52:34 -05:00

Owner

Problem

Article markdown on slugkit.com dev renders inline code and fenced code blocks as literal backticks instead of semantic HTML.

Observed on local dev article:

http://localhost:3000/posts/slug-cli-init

Examples:

`slug`

renders as literal backticks in text instead of <code>slug</code>.

```bash
npm install -g @evcraddock/slug-cli
```

renders as a paragraph with <br> line breaks instead of a <pre><code> block.

DOM inspection showed .post-content had no <code> or <pre> elements for the article content.

Expected

Markdown rendering should support at least:

inline code spans using backticks,
fenced code blocks with optional language labels,
safe HTML escaping inside code content.

Scope

Fix the markdown renderer used by public post/article detail pages.
Preserve existing safe markdown behavior and XSS escaping.
Add styling-compatible HTML output for inline code and fenced code blocks.
Verify the slug-cli-init article renders code examples correctly in local dev.

Acceptance criteria

Inline markdown code like `slug` renders as <code>slug</code>.
Fenced code blocks render as <pre><code>...</code></pre> or equivalent semantic HTML.
Language hints such as bash are preserved as a safe class or metadata where practical.
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.

## Problem Article markdown on slugkit.com dev renders inline code and fenced code blocks as literal backticks instead of semantic HTML. Observed on local dev article: `http://localhost:3000/posts/slug-cli-init` Examples: ```md `slug` ``` renders as literal backticks in text instead of `<code>slug</code>`. ````md ```bash npm install -g @evcraddock/slug-cli ``` ```` renders as a paragraph with `<br>` line breaks instead of a `<pre><code>` block. DOM inspection showed `.post-content` had no `<code>` or `<pre>` elements for the article content. ## Expected Markdown rendering should support at least: - inline code spans using backticks, - fenced code blocks with optional language labels, - safe HTML escaping inside code content. ## Scope - Fix the markdown renderer used by public post/article detail pages. - Preserve existing safe markdown behavior and XSS escaping. - Add styling-compatible HTML output for inline code and fenced code blocks. - Verify the `slug-cli-init` article renders code examples correctly in local dev. ## Acceptance criteria - Inline markdown code like `` `slug` `` renders as `<code>slug</code>`. - Fenced code blocks render as `<pre><code>...</code></pre>` or equivalent semantic HTML. - Language hints such as `bash` are preserved as a safe class or metadata where practical. - 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.

erik added the

labels

2026-06-27 16:52:34 -05:00

erik commented

2026-06-27 16:58:09 -05:00

Author

Owner

Synced from todu comment by @todu on 2026-06-27T21:56:09.150Z

Review update

PR: erik/slugkit.com#29 is open and reviewed.
Result: approved.
Follow-up: waiting for explicit human merge approval.
Acceptance criteria: 6/6 met; local dev article verified in Chromium with inline <code> and fenced <pre><code>.

_Synced from todu comment by @todu on 2026-06-27T21:56:09.150Z_ ### Review update - PR: `erik/slugkit.com#29` is open and reviewed. - Result: approved. - Follow-up: waiting for explicit human merge approval. - Acceptance criteria: 6/6 met; local dev article verified in Chromium with inline `<code>` and fenced `<pre><code>`.

erik commented

2026-06-27 18:50:38 -05:00

Author

Owner

Synced from todu comment by @todu on 2026-06-27T23:45:50.272Z

PR update

PR erik/slugkit.com#29 was amended after review to use Tailwind Typography for markdown presentation.

Added:

@tailwindcss/typography dev dependency.
@plugin "@tailwindcss/typography" in src/styles/tailwind.css.
prose prose-gray ... dark:prose-invert on markdown content containers.
Removed global pre, code { white-space: pre-wrap; } so code blocks scroll normally.

Verification rerun:

npm run typecheck
npm test -- --run src/routes/__tests__/public.test.ts
npm test
npm run build
Chromium dev article confirmed inline <code>slug</code>, fenced <pre><code class="language-bash">..., and prose classes.

Review result: approved. Waiting for explicit human merge approval.

_Synced from todu comment by @todu on 2026-06-27T23:45:50.272Z_ ### PR update PR `erik/slugkit.com#29` was amended after review to use Tailwind Typography for markdown presentation. Added: - `@tailwindcss/typography` dev dependency. - `@plugin "@tailwindcss/typography"` in `src/styles/tailwind.css`. - `prose prose-gray ... dark:prose-invert` on markdown content containers. - Removed global `pre, code { white-space: pre-wrap; }` so code blocks scroll normally. Verification rerun: - `npm run typecheck` - `npm test -- --run src/routes/__tests__/public.test.ts` - `npm test` - `npm run build` - Chromium dev article confirmed inline `<code>slug</code>`, fenced `<pre><code class="language-bash">...`, and `prose` classes. Review result: approved. Waiting for explicit human merge approval.

erik

2026-06-27 19:29:45 -05:00

closed this issue
added
status:done
and removed
status:inprogress
labels

erik commented

2026-06-27 19:29:47 -05:00

Author

Owner

Synced from todu comment by @todu on 2026-06-28T00:24:25.661Z

Closed

PR erik/slugkit.com#29 was reviewed, approved, merged, and local main was fast-forwarded to ef7ab22.

Acceptance criteria met:

Inline code renders as <code>....
Fenced code renders as <pre><code>....
Language hints are preserved safely, e.g. language-bash.
Code contents are escaped against HTML/script injection.
Existing heading, bold, link, image, and paragraph behavior remains covered.
Tests cover inline code, fenced code, and escaping.
Markdown presentation now uses Tailwind Typography (prose, dark:prose-invert) instead of hand-rolled descendant styling.

Verification completed before merge:

npm run typecheck
npm test -- --run src/routes/__tests__/public.test.ts
npm test
npm run build
Chromium dev article check for slug-cli-init.

_Synced from todu comment by @todu on 2026-06-28T00:24:25.661Z_ ### Closed PR `erik/slugkit.com#29` was reviewed, approved, merged, and local `main` was fast-forwarded to `ef7ab22`. Acceptance criteria met: - Inline code renders as `<code>...`. - Fenced code renders as `<pre><code>...`. - Language hints are preserved safely, e.g. `language-bash`. - Code contents are escaped against HTML/script injection. - Existing heading, bold, link, image, and paragraph behavior remains covered. - Tests cover inline code, fenced code, and escaping. - Markdown presentation now uses Tailwind Typography (`prose`, `dark:prose-invert`) instead of hand-rolled descendant styling. Verification completed before merge: - `npm run typecheck` - `npm test -- --run src/routes/__tests__/public.test.ts` - `npm test` - `npm run build` - Chromium dev article check for `slug-cli-init`.