University of St Andrews

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:

• The digital pattern library automatically encodes source code, so you may simply drop in the raw code between the <code> elements.
• The first line of your code should be on the same line as the opening <pre><code> elements. This is because <pre> includes all whitespace and line-breaks within the tags. The following lines of code should be indented beginning from column 1.
• The optional {code-language} class should be replaced with the required language; this class is used for syntax highlighting. If a class is not included then the script will attempt to identify the language automatically. Common language classes include apache, css, handlebars, html, javascript, json, markdown, php, sql, and xml; for a full list of the 160+ supported languages see highlight.js.

Examples

HTML

[...]

CSS

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

[...]

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;

[...]

JSON

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

[...]

PHP

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

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

[...]

More examples

For more language examples see the highlight.js demo.