Codevoorbeeld

Met onderstaande markup maak je een codevoorbeeld.

<link rel="stylesheet"
    href="https://files.instruct.nl/fundament/Interactive/Code/code_preview.css">

<div class="ct_code_preview ct_code_preview_stacked">
    <pre><code class="highlight TAAL">BRONCODE</code></pre>
    <details class="ct_code_output">
        <summary>Output</summary>
        <pre><samp>UITVOER</samp></pre>
    </details>
</div>

prijs = 10
while prijs < 100:
  prijs += 25
  print("Prijs wordt met 25 verhoogd: " + str(prijs))

Output

Prijs wordt met 25 verhoogd: 35
Prijs wordt met 25 verhoogd: 60
Prijs wordt met 25 verhoogd: 85
Prijs wordt met 25 verhoogd: 110

Output standaard zichtbaar maken

De output kan ook standaard zichtbaar zijn. Voeg daarvoor het open-attribuut toe aan het <details>-element.

<div class="ct_code_preview ct_code_preview_stacked">
    <pre><code class="highlight TAAL">BRONCODE</code></pre>
    <details class="ct_code_output" open>
        <summary>Output</summary>
        <pre><samp>UITVOER</samp></pre>
    </details>
</div>

prijs = 10
while prijs < 100:
  prijs += 25
  print("Prijs wordt met 25 verhoogd: " + str(prijs))

Output

Prijs wordt met 25 verhoogd: 35
Prijs wordt met 25 verhoogd: 60
Prijs wordt met 25 verhoogd: 85
Prijs wordt met 25 verhoogd: 110

Code en output naast elkaar

Als de code niet te breed is, kun je de code en output ook naast elkaar weergeven. Dat doe je door de class ct_code_preview_stacked niet te gebruiken:

<div class="ct_code_preview">
    <pre><code class="highlight TAAL">BRONCODE</code></pre>
    <details class="ct_code_output" open>
        <summary>Output</summary>
        <pre><samp>UITVOER</samp></pre>
    </details>
</div>

prijs = 10
print(prijs)

De code en output zijn altijd even hoog:

1 regel code

3
regels
output

3
regels
input

1 regel output

Code en output onder elkaar

Deze voorbeelden hebben geen knop om de output (on)zichtbaar te maken. Dat is mogelijk door geen details-element te gebruiken, maar 'gewoon' een div.

Met ct_code_preview_stacked zorg je ervoor dat code en output onder elkaar komen:

hele
lange
code
met
veel
regels

1 regel output

De code en output zijn 'precies hoog genoeg':

1 regel code

hele
lange
output
met
veel
regels

Alleen output is ook mogelijk:

hele
lange
output
met
veel
regels

Code en afbeelding

<img src="afbeelding.jpg" alt="Mooi plaatje">

Output

<img src="afbeelding.jpg" alt="Mooi plaatje">

<img src="afbeelding.jpg" alt="Mooi plaatje">

Code en iframe

In plaats van een pre, kun je ook een iframe gebruiken als output:

<div class="ct_code_preview">
    <pre><code class="highlight html">CODE</code></pre>
    <div class="ct_code_output">
        <iframe src="URL"></iframe>
    </div>
</div>

body {
     background-color: #eee;
}

h1 {
    color: #00f;
}

HTML zul je waarschijnlijk onder elkaar zetten.

Let op: om de grootte van het iframe in te stellen, moet je style="--height: 500px" meegeven aan .ct_code_output, en niet aan het iframe zelf. Anders gaat de lay-out kapotstuk!

Let daarbij op: --height is geen typfout, maar een CSS variabele. Je moet niet een height opgeven.

<div class="ct_code_preview ct_code_preview_stacked">
    <pre><code class="highlight html">CODE</code></pre>
    <details class="ct_code_output" open style="--height: 500px">
        <summary>Output</summary>
        <iframe src="URL"></iframe>
    </details>
</div>

<!DOCTYPE html>
<html lang="nl">
<head>
    <meta charset="UTF-8">
    <title>Codevoorbeeld</title>
    <style>
        body {
            background-color: #eee;
        }

        h1 {
            color: #00f;
        }
    </style>
</head>
<body>
<h1>Codevoorbeeld</h1>
<p>Voorbeeld</p>
<p>Lorem ipsum ...</p>
</body>
</html>

Output

Data-url voor iframe

Je kunt al je voorbeeldbestanden als .html-bestand uploaden, en naar die bestanden verwijzen in het iframe-element. Voor kleinere bestanden kun je ook data:-URL's gebruiken.

Lang verhaal kort: plak hieronder de HTML-code, en daaronder verschijnt de URL die je in src kunt plakken.