Markdown style guide

This post exists to verify the visual rendering of every markdown element before the site goes into production. It is not intended for publication.

Inline formatting

Regular body text in Soehne 400 at the base font size. This paragraph demonstrates bold text, italic text, bold italic text, and inline code within a sentence. You can also use strikethrough to indicate deleted content. Here is a text link to an external site and a link to an internal page for comparison.

Keyboard shortcuts like Ctrl + C render using the <kbd> element. Subscript (H₂O) and superscript (E = mc²) are available through raw HTML.

Headings

The heading hierarchy below shows h2 through h4. The page title is h1 and is set by the layout, not the markdown body.

This is an h3 heading

Body text under h3. The heading should have slightly less visual weight than h2 but remain clearly distinct from body copy.

THIS IS AN H4 HEADING

Body text under h4. H4 headings are uppercase with wide letter-spacing — used for subordinate categories or label-style dividers within a section.

Paragraphs and line length

This paragraph tests the prose width constraint. A well-set measure for body text is typically between 45 and 75 characters per line, with 66 characters often cited as ideal. The --prose-width: 640px token on this site targets that range at the default font size. If this paragraph wraps naturally at a comfortable reading width without requiring horizontal scrolling, the constraint is working correctly.

Short paragraph.

Another paragraph following a short one. The vertical rhythm between paragraphs of different lengths should feel consistent — no visible jumps or collapsed spacing.

Blockquotes

A single-line blockquote. The left border and italic styling should be clearly visible.

A multi-line blockquote that spans several sentences. The purpose is to verify that longer quoted passages maintain consistent left-border alignment and that the italic styling remains readable at paragraph length. The muted text color should provide enough contrast against the background to remain accessible under WCAG AA.

Nested blockquotes (if supported):

First level of quoting.

Second level of quoting. This tests whether nested blockquotes render with additional indentation or visual distinction.

Unordered lists

• First item in an unordered list
• Second item with enough text to wrap onto a second line, verifying that the bullet alignment stays consistent with the first line of text rather than the wrapped continuation
• Third item
  • Nested item at the second level
  • Another nested item
    • Third level of nesting
• Back to the top level

Ordered lists

1. First item in an ordered list
2. Second item with a longer description that wraps to test alignment of the number with the continuation text on the following line
3. Third item
   1. Nested ordered item
   2. Another nested ordered item
4. Back to the top level

Mixed lists

1. First ordered item
   • Unordered sub-item
   • Another unordered sub-item
2. Second ordered item
   1. Ordered sub-item
   2. Another ordered sub-item

Code blocks

Inline code: the calculateReadingTime() function divides word count by 200.

A fenced code block with syntax highlighting (JavaScript):

function calculateReadingTime(content) {
  const words = content.split(/\s+/).filter(Boolean).length;
  return Math.ceil(words / 200);
}

A code block with no language specified:

$ pnpm build
[build] 9 page(s) built in 1.41s
[build] Complete!

A longer code block to test horizontal overflow:

interface IdentityVerificationResult {
  ci: string; // 88-byte Connecting Information hash
  di: string; // per-service Duplicate subscription confirmation Information
  provider: 'nice' | 'kcb'; // authorized intermediary
  carrier: 'skt' | 'kt' | 'lgu'; // mobile carrier that confirmed civil identity
  verified_at: Date; // ISO 8601 timestamp of verification completion
  is_foreign_resident: boolean; // true for non-citizen residents using alien registration number
}

const result: IdentityVerificationResult = await verifyIdentity({
  name: '홍길동',
  birthdate: '1990-01-15',
  carrier: 'skt',
  phone: '010-1234-5678',
});

A CSS example:

:root {
  --prose-width: 640px;
  --content-width: 64rem;
  --site-padding: 1.5rem;
  --font-body: 'Soehne', -apple-system, BlinkMacSystemFont, sans-serif;
}

Tables

A standard table:

A wider table to test horizontal overflow behavior:

A minimal two-column table:

Links

• External link: W3C Verifiable Credentials specification
• Internal link: About Syndai
• Internal link: Contact page
• Bare URL (should auto-link if supported): https://example.com
• Link with title attribute: Hover for title

Images

A placeholder image to test rendering, alt text, and responsive sizing:

An image with a smaller dimension to test that it doesn’t stretch beyond its natural size:

Horizontal rules

Content before the rule.

---

Content after the rule. The horizontal rule should be a thin border spanning the prose width, with consistent vertical spacing above and below.

---

A second horizontal rule using the alternate *** syntax, verifying both render identically.

Emphasis and nesting

This sentence has emphasized text containing bold within it. This sentence has bold text containing italic within it. This tests proper nesting of inline formatting.

Definition-style content

Using bold terms followed by descriptions (a common pattern in our posts):

CI (연계정보, Connecting Information) is an 88-byte hash derived from the RRN through a one-way function managed by KISA. It serves as a universal cross-platform identifier.

DI (중복가입확인정보, Duplicate Subscription Confirmation Information) is a per-service identifier scoped to individual platforms. It was designed to prevent cross-platform correlation.

Footnotes

Markdown footnotes test¹. If the renderer supports them, they should appear as superscript numbers linking to the bottom of the post.

A second footnote reference in the same paragraph for testing².

Task lists

• Verify heading hierarchy (h1–h4)
• Check inline formatting (bold, italic, code)
• Test table overflow on mobile
• Confirm image responsive behavior
• Validate color contrast in dark and light modes

Long unbroken strings

This tests whether the layout handles overflow for long unbroken strings:

superlongfunctionnamethatmightoverflowthecontainerwidthinsomecircumstancesandshouldbehandledgracefully()

And a long URL: https://example.com/very/long/path/that/might/overflow/the/prose/width/container/and/needs/to/wrap/or/scroll/gracefully/without/breaking/the/layout

Escaping and special characters

Asterisks without emphasis: *not italic* and **not bold**

Angle brackets: <div> renders as code, while raw HTML em tags may or may not render depending on the markdown processor’s sanitization.

Ampersand: AT&T, “quotes”, ‘apostrophes’, en-dash – em-dash — ellipsis…

Unicode: 한국어 텍스트, 日本語テキスト, العربية

---

This post is a draft style guide and will not appear in the published blog listing.

Footnotes

1. This is the first footnote. It should render at the bottom of the post with a back-link to the reference point. ↩

2. This is the second footnote. It contains a link to verify that links work inside footnote content. ↩