Code & Code block

Introductie

Code(blokken) kunnen gebruikt worden voor het weergevan van code. Bij het weergeven van code worden de volgende punten meestal gehanteerd.

• Rgels worden niet afgebroken maar exact getoond zoals ze in de code staan
• Tekst wordt weergegeven in een monospace font (Alle letters gebruiken dezelfde breedte)
• Visueel wordt er een onderscheid gemaakt tussen tekst en code-voorbeelden

Snelstart

    
      
    
    @use "@minvws/manon/components/code";
@use "@minvws/manon/components/code-block";
  

Voorbeelden

Code

<div class="message-counter">

    
      
    
    <code><div class="message-counter"></code>
  

Code block

  
<form action="" method="post">
  <label for="voorbeeld-text-input-1">Voorbeeld text input</label>
  <input id="voorbeeld-text-input-1" name="voorbeeld-text-input-1" placeholder="voorbeeld text input" type="text">

  <button type="submit">Verzend</button>
</form>
  

    
      
    
    <pre>
  <code>
    <form action="" method="post">
      <label for="voorbeeld-text-input-1">Voorbeeld text input</label>
      <input id="voorbeeld-text-input-1" name="voorbeeld-text-input-1" placeholder="voorbeeld text input" type="text">

      <button type="submit">Verzend</button>
    </form>
  </code>
</pre>