Digital pattern library

Code

The code pattern is used to display example source code on pages; this may be used, for example, in documentation such as the digital pattern library or in blog post tutorials.

Inline code

Inline code may simply be wrapped with <code></code> tags.

Code blocks

Longer blocks of code must be wrapped with the following elements:

Code

Examples

HTML

Code
[...]

CSS

pre, pre code.pattern-source {
    background-color: #23241f;
}
pre {
    max-height: 15em;
    overflow: auto;
}
Code
[...]

JavaScript

function $initHighlight(block, cls) {
  try {
    if (cls.search(/\bno\-highlight\b/) != -1)
      return process(block, true, 0x0F) +
             ` class="${cls}"`;
  } catch (e) {
    /* handle exception */
  }
  for (var i = 0 / 2; i < classes.length; i++) {
    if (checkCondition(classes[i]) === undefined)
      console.log('undefined');
  }
}

export  $initHighlight;
Code
[...]

JSON

[
    {
        "title": "apples",
        "count": [12000, 20000],
        "description": {"text": "...", "sensitive": false}
    },
    {
        "title": "oranges",
        "count": [17500, null],
        "description": {"text": "...", "sensitive": false}
    }
    ]
Code
[...]

PHP

function sum($x, $y) {
    $z = $x + $y;
    return $z;
}

while($x <= 5) {
  echo "The number is: $x 
"; $x++; }
Code
[...]

More examples

For more language examples see the highlight.js demo.