Code block

[wartburggraaf]

We willen graag meer leren over de Code block component. In welke vorm, of vormen, wordt deze momenteel ingezet en toegepast binnen jouw organisatie?

Deel hieronder een link naar Figma, Storybook, Github of screenshots. Met deze informatie kunnen we bewijzen dat de component onderdeel moet worden van de NL Design System component library.

Daarnaast wordt het delen van onderzoek gewaardeerd. Dus heb je zelf onderzoek gedaan en zijn er inzichten voor dit component? Dan horen we dit ook graag!

Link naar bericht in Slack

---

Naam

Code block

Doel

Toont één of meerdere regels computercode en behoudt de opmaak van deze code.

Gerelateerde componenten

Code

Onderzoek

[jeffreylauwers]

Utrecht

• Storybook
• Github

---

Screenshots / Varianten

Storybook

Default
Markup with the <pre> and <code> elements. Styling via utrecht-code-block class name.
Only using the <pre> element for markup is semantically ambiguous, it is clearer to use <pre><code>...</code></pre>.

---

Notities

• Via 'Element' property kan er gekozen worden voor div of pre.
• Lichtgrijze achtergrondkleur.

[jeffreylauwers]

Atlassian

Documentatie website

---

Screenshots / Varianten

Documentatie website

Default
A code block highlights an entire block of code and keeps the formatting.

Line numbers
You can display a code block with or without line numbers. Line numbers are included by default.

---

Notities

• Onder de naam 'Code block'
• Lichtgrijze, transparent, achtergrond kleur. Subtiel afgeronde hoekjes.
• Veel varianten beschikbaar. Naast bovenstaande ook de mogelijkheid om maar bepaalde regelnummers te tonen, regels van een 'highlight' te voorzien en om lange regels code te wrappen.

[jeffreylauwers]

IBM

Documentatie website

---

Screenshots / Varianten

Documentatie website

Code snippet - 'Multiline'
Code snippets are strings or small blocks of reusable code that can be copied and inserted in a code file.

---

Notities

• Onder de naam 'Code snippet' als variant 'Multiline'.
• Lichtgrijze achtergrond kleur. Geen afgeronde hoekjes.
• Optie rechtsboven om code te kopieren.
• Optie rechtsonder om meer code te tonen.

[jeffreylauwers]

GitHub

Documentatie website

---

Screenshots / Varianten

Documentatie website

---

Notities

• Onder de naam 'Code block' beschikbaar als typografisch element
• Zie ook de code weergave die binnen Github zelf gebruikt wordt (bijvoorbeeld op de React pagina). Daar wordt een Code block net even anders weergegeven (lichtgrijze achtergrond, kleur en kopier optie). Dit is niet terug te vinden als component.

[jeffreylauwers]

NL Design System

Documentatie website

---

Screenshots / Varianten

Documentatie website

Op de documentatie website van NL Design Sytem gebruiken we de Code component van Utrecht.

Default

Als onderdeel van een voorbeeld. Met daarbij een 'Toon/Verberg' optie en de mogelijkheid om de code te kopieren.

---

Code heeft onderscheidende kleuren.