Naar de inhoud
Zoeken

subnavigatie

Code block

Tests the colours of a code block

Dit is een testpagina

Deze pagina is bedoeld om de werking van de website geïsoleerd te kunnen testen door de developers van nldesignsystem.nl. Deze pagina wordt niet getest op toegankelijkheid

// js
const x = 42; // the answer
const isTrue = true;
const string = "string";
const url = new URL("https://nldesignsystem.nl");
const regex = /^[foo|bar]$/;

class Foo extends Bar {
  run() {
    return this.x + 1;
  }
}

/* css */
:root {
  --nl-variable: var(--nl-value);
}

a {
  color: red;
  margin: 0;
}

@media (width < 100px) {
  a:hover {
    color: green !important;
  }
}

<!-- markup -->
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html>
<html xmlns:svg="http://www.w3.org/2000/svg">
  <svg:rect width="100" alt="r &amp; d" />
  <![CDATA[ raw <text> ]]>
</html>

// typescript
let n: number = Promise.resolve(0);

interface MyInterface {
  property: string;
}

export type MyType = Record<string, any>;

{
  /* tsx */
}
<MyButton onClick={handleClick} />;

  diff
- const old = 1;
+ const new = 2;

Code ligiatures are disabled in code examples

if (true !== false && 10 <= 5) {
  console.log({ profit: true });
}

in inline code, ligiatures are also disabled true !== false && 10 <= 5

Hoofdmenu