§ demo · kodtext-switch

Samma innehåll, tre format.

En text skriven en gång kan vara källkod, uppmärkning och färdig sida på samma gång. Växlaren nedan visar alla tre — och håller varje rad på exakt samma höjd hela vägen.

Samma innehåll, skrivet i Markdown, byggt som HTML, läst som en sida.

§ 01 Varianter

Varje instans läser sin egen uppsättning filer. Autospelet pausar när du för muspekaren över rutan, och stannar helt så fort du själv väljer ett format.

Kodtext — Konrad Persson, Stockholm.

§ 02 Använda på en sida

Ett script och ett element. Innehållet i elementet visas som reserv innan komponenten laddat, och för besökare utan JavaScript.

<script type="module" src="/assets/kodtext-switch.js"></script>

<kodtext-switch
  set="/switch/sets/kodtext-intro/"
  label="Samma innehåll, tre format"
  autoplay="5000">
  <p>Reservtext om komponenten inte laddar.</p>
</kodtext-switch>

§ 03 Hur den är gjord

Tre filer per uppsättning, med exakt lika många rader. Rad 5 är tom i Markdown just för att HTML behöver ett <ul> där. Det är den disciplinen som gör att ingenting hoppar när svepet passerar.

md.txt

# Innehåll först, format sen

Samma text kan vara en sida,
ett dokument, eller ren data.

- Skrivet en gång
- Läst i flera format
- Hållbart över tid

html.txt

<h1>Innehåll först, format sen</h1>

<p>Samma text kan vara en sida,
ett dokument, eller ren data.</p>
<ul>
  <li>Skrivet en gång</li>
  <li>Läst i flera format</li>
  <li>Hållbart över tid</li>
</ul>

live.html

<div class="row"><h1>Innehåll först, format sen</h1></div>
<div class="row"></div>
<div class="row"><p>Samma text kan vara en sida,</p></div>
<div class="row"><p>ett dokument, eller ren data.</p></div>
<div class="row"></div>
<div class="row"><ul><li>Skrivet en gång</li></ul></div>
<div class="row"><ul><li>Läst i flera format</li></ul></div>
<div class="row"><ul><li>Hållbart över tid</li></ul></div>
<div class="row"></div>