{
  "$type": "site.standard.document",
  "canonicalUrl": "https://notes.juergen.social/blog/markdown-reference-v2",
  "coverImage": {
    "$type": "blob",
    "ref": {
      "$link": "bafkreiegza677aihhmmkqqdzea6fj5ftumfegey2priyz3wukto7akpsvi"
    },
    "mimeType": "image/jpeg",
    "size": 198340
  },
  "description": "A short reference for the prose elements the theme styles. Headings, links, lists, tables, code, callouts.",
  "path": "/blog/markdown-reference-v2",
  "publishedAt": "2026-02-01T00:00:00.000Z",
  "site": "at://did:plc:2n2ukq3osdu3k37ncpn6hwiy/site.standard.publication/3mn57dpj54425",
  "tags": "Markdown",
  "textContent": "Use this post as a cheat sheet for the prose surface. Open it in two windows: source on one side, rendered post on the other.\n\nHeadings\n\nStart posts at ##. The page title is the only h1.\n\nInline text\n\nThe inline elements the theme styles:\n\nRenders as:\n\nA link, bold, _italic_, inline code, <kbd>⌘</kbd> + <kbd>K</kbd>, and <mark>highlighted</mark> text.\n\nUse <mark> for a phrase that needs attention inside a paragraph. For a whole block, use a callout.\n\nLists\n\nOrdered when sequence matters, bullets otherwise.\n\nNested lists work, but keep them shallow:\n\n- Section\n  - Subsection\n  - Another subsection\n- Section\n\nQuotes\n\nBlockquotes are styled as a pause, not as general emphasis.\n\n> A writing surface should disappear while the reader moves through it.\n\nWith attribution:\n\n> Don't communicate by sharing memory, share memory by communicating.<br>\n> — <cite>Rob Pike</cite>\n\nTables\n\nFor compact reference data:\n\n| Element | Use                           |\n| ------- | ----------------------------- |\n| Heading | Structure the article         |\n| Quote   | Pause on a specific idea      |\n| Code    | Show exact commands or values |\n\nIf a table needs sorting or interaction, move it outside the article.\n\nCode blocks\n\nAlways add the language. Highlighting is provided by astro-expressive-code with the bundled tone-cold theme.\n\nts\nconst site = { title: 'Astro Tone' };\n\nRenders as:\n\nTerminal:\n\nJSON config:\n\nAstro components use the same surface:\n\nImages\n\nReference images from src/assets/ with a relative path. Astro processes them at build time (resize, AVIF/WebP, dimensions emitted in the markup).\n\n_Optional caption goes here._\n\nClick an image in a rendered post to open the lightbox. Text in _italics_ immediately after the image is treated as the caption.\n\nCallouts\n\nPlain HTML with classes. The theme styles three tones:\n\n<div class=\"callout callout-note\">\n  <p>Use for extra context.</p>\n</div>\n\n<div class=\"callout callout-tip\">\n  <p>Use for a small recommendation.</p>\n</div>\n\n<div class=\"callout callout-warning\">\n  <p>Use for limits or likely mistakes.</p>\n</div>\n\nSmall HTML you can use inline\n\n<abbr title=\"Cascading Style Sheets\">CSS</abbr> is the language that carries most of the visual system. H<sub>2</sub>O and x<sup>2</sup> read naturally inline. Press <kbd>Esc</kbd> to close any open dialog in the theme.\n\nDividers\n\nUse a divider only when a section break needs more force than a heading.\n\n---\n\nFootnotes\n\nThe first half of the work is easy.\n\n\nKeep footnotes short. If a note grows past a sentence, put it in the body.\n\nWhat the theme does not style\n\nIf you use <details>, <summary>, or <aside> outside a callout, default browser styling applies. Either add your own CSS in src/styles/prose.css` or wrap the element in an MDX component.",
  "title": "Markdown You Will Actually Use"
}