Description

A website design inspired by Markdown syntax, in a single CSS file.

Created on 22 Apr 2026

Code

<style>
  /* markdown.css v1.0.0 (2026-04-22) by Miro Jones */

  :root {
    font-family: ui-monospace, monospace;
  }

  body {
    max-width: min(70ch, 80vw);
    margin: 5vw auto;
  }

  a:any-link {
    text-decoration: none;
    &::before { content: '['; }
    &::after { content: ']'; }
  }

  blockquote {
    margin: 0 2ch;
    p::before, p::after {
      content: '>';
      color: mediumVioletRed;
      display: block;
      margin: 0 0 -1lh -2ch;
    }
    
    p:last-of-type::after {
      display: none;
    }
  }

  code, pre { font: inherit; }
  code {
    color: orangeRed;
    &::before, &::after { content: '`' }
  }
  pre > code {
    margin: 1lh 0;
    white-space: pre-wrap;
    color: inherit;
    &::before { content: '```' attr(data-lang) '\00000A'; }
    &::after { content: '\00000A```'; }
  }

  h1, h2, h3, h4, h5, h6 {
    width: fit-content;
    overflow: clip;
    margin: 1lh 0;
    font-size: 1rem;
    &::before, &::after { color: springGreen }
  }
  h1::after {
    content: '===';
    display: block;
  }
  h2::after {
    content: '---';
    display: block;
  }
  h3::before { content: '### '; }
  h4::before { content: '#### '; }
  h5::before { content: '##### '; }
  h6::before { content: '###### '; }

  hr {
    all: unset;
    color: deepPink;
    &::after {
      content: '---';
    }
  }

  p {
    margin: 1lh 0;
  }

  em, i {
    &::before, &::after {
      content: '∗';
    }
  }
  em::before, em::after {
    color: darkCyan;
  }
  i::before, i::after {
    color: darkOrange;
  }

  del, s {
    &::before, &::after {
      content: '~';
      display: inline-block;
      text-decoration: none;
    }
  }
  del {
    text-decoration-color: red;
    &::before, &::after {
      color: red;
    }
  }
  ins {
    text-decoration-color: darkGreen;
    &::before, &::after {
      content: '+';
      display: inline-block;
      text-decoration: none;
      color: darkGreen;
    }
  }

  strong, b {
    font-weight: bold;
    &::before, &::after {
      content: '⁑';
    }
  }
  strong::before, strong::after {
    color: crimson;
  }
  b::before, b::after {
    color: forestGreen;
  }

  /* TODO: table is not aligned perfectly. */
  table {
    margin: 1lh 0;
    text-wrap: nowrap;
  }
  th, td {
    text-align: left;
    padding: 0;
  }
  th::before, td::before {
    content: '| ';
  }
  th::after, td::after {
    content: ' ';
    display: inline-block;
    width: 1ch;
  }
  tr::after {
    content: ' |';
  }
  thead tr::after {
    font-weight: bold;
  }

  :not(li) > :is(ul, ol) {
    margin: 1lh 0;
  }
  ul {
    padding: 0 2ch;
    > ::marker {
      content: '∗ ';
    }
  }
  ol {
    padding: 0 3ch;
  }
  li::marker {
    color: darkMagenta;
  }
</style>


<!-- Some example HTML: -->
<h1>markdown.css</h1>

<p>A website design inspired by <a href='https://w.wiki/3ZpR' rel='noopener noreferrer'>Markdown</a> syntax, in a single <code>CSS</code> file. It includes <strong>colourful</strong> highlighting.</p>

<p>This page demonstrates some <b>HTML elements</b>.</p>

<ol>
  <li>Here is</li>
  <li>an ordered</li>
  <li>list.</li>
</ol>

<h2>A subheading</h2>

<p>Look! <em>Another</em> paragraph! There is a <i lang='sv'>smörgåsbord</i> of paragraphs. Following is a list of some <a href='#'>cheeses</a> found on <i lang='sv'>smörgåsbords</i>:</p>

<ul>
  <li>Soft:
    <ul>
      <li>Goats cheese</li>
      <li>Brie</li>
    </ul>
  </li>
  <li>Hard:
    <ol>
      <li>Cheddar</li>
      <li>Parmesan</li>
      <li>Mozarella</li>
    </ol>
  </li>
</ul>

<hr>

<p>Here is some of the <del>Sass</del> <ins>CSS</ins> used to style this page:</p>

<pre><code data-lang='css'>:root {
  font-family: ui-monospace, monospace;
}</code></pre>

<h3>Some other elements</h3>
<h4>Blockquote (and strikethrouh)</h4>
<blockquote>
  <p><s>Many hands make light work,</s> too many cooks spoil the broth.</p>
  <p>A cat in gloves catches no rats.</p>
</blockquote>

<h4>Table</h4>

<p>Note: tables must use <code>&lt;thead></code>.</p>

<table>
  <thead>
    <tr>
      <th>Animal</th>
      <th>Collective</th>
      <th>Young</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Goose</td>
      <td>Gaggle</td>
      <td>Gosling</td>
    </tr>
    <tr>
      <td>Horse</td>
      <td>Herd</td>
      <td>Foal</td>
    </tr>
    <tr>
      <td>Porpoise</td>
      <td>Calf</td>
      <td>Pod</td>
    </tr>
  </tbody>
</table>