Code block

When sharing blocks of code, you have two formatting options: wrapping or scrolling.

Wrapping code

This is the default, using class="ds-codeblock".

Light theme

{
  "notifications": [
    {
      "url": "http://www.eoni.org.uk/Vote/Voting-at-a-polling-place",
      "title": "You need to show photographic ID to vote in this election",
      "detail": "Voters in Northern Ireland are required to show one form of photo ID, like a passport or driving licence.",
      "type": "voter_id"
    }
  ]
}

Dark theme

Invoke the dark theme on any component by applying class="ds-dark" to a container element.

{
  "notifications": [
    {
      "url": "http://www.eoni.org.uk/Vote/Voting-at-a-polling-place",
      "title": "You need to show photographic ID to vote in this election",
      "detail": "Voters in Northern Ireland are required to show one form of photo ID, like a passport or driving licence.",
      "type": "voter_id"
    }
  ]
}

<pre class="ds-codeblock"><code>{
  "notifications": [
    {
      "url": "http://www.eoni.org.uk/Vote/Voting-at-a-polling-place",
      "title": "You need to show photographic ID to vote in this election",
      "detail": "Voters in Northern Ireland are required to show one form of photo ID, like a passport or driving licence.",
      "type": "voter_id"
    }
  ]
}</code></pre>

Scrolling code

Add class="ds-codeblock-scroll". This option may be better for readability for some kinds of code.

Light theme

{
  "notifications": [
    {
      "url": "http://www.eoni.org.uk/Vote/Voting-at-a-polling-place",
      "title": "You need to show photographic ID to vote in this election",
      "detail": "Voters in Northern Ireland are required to show one form of photo ID, like a passport or driving licence.",
      "type": "voter_id"
    }
  ]
}

Dark theme

Invoke the dark theme on any component by applying class="ds-dark" to a container element.

{
  "notifications": [
    {
      "url": "http://www.eoni.org.uk/Vote/Voting-at-a-polling-place",
      "title": "You need to show photographic ID to vote in this election",
      "detail": "Voters in Northern Ireland are required to show one form of photo ID, like a passport or driving licence.",
      "type": "voter_id"
    }
  ]
}

<pre class="ds-codeblock ds-codeblock-scroll"><code>{
  "notifications": [
    {
      "url": "http://www.eoni.org.uk/Vote/Voting-at-a-polling-place",
      "title": "You need to show photographic ID to vote in this election",
      "detail": "Voters in Northern Ireland are required to show one form of photo ID, like a passport or driving licence.",
      "type": "voter_id"
    }
  ]
}</code></pre>

Inline code

Snippets of inline code (placed in paragraphs, typically) are styled by default. Just use the <code> tag:

Light theme

Let me tell you about the $variable I came up with.

Dark theme

Invoke the dark theme on any component by applying class="ds-dark" to a container element.

Let me tell you about the $variable I came up with.