Code

The code pattern is used to display example source code on pages. For example, this may be used 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

<pre><code class="pattern-source  {code-language}"><!-- Insert your code here -->
</code></pre>

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

<nav class="navigation-bar  js-select-active" role="navigation">
    <div class="container">
        <div class="toggle-navigation primary-toggle"><a class="navigation-button">Navigation <i class="chevron left"></i></a></div>
        <ul class="navigation-bar-nav primary-nav">
            <li><a href="/study/">Study at St&nbsp;Andrews</a></li>
            <li><a href="/research/">Research</a></li>
            <li><a href="/alumni/">Alumni and donors</a></li>
            <li><a href="/community/">Community facilities</a></li>
            <li><a href="/business-services/">Business services</a></li>
            <li><a href="/about/">About</a></li>
        </ul>
    </div>
</nav>

Code

<pre><code class="pattern-source html">[...]</code></pre>

CSS

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

Code

<pre><code class="pattern-source css">[...]</code></pre>

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 &lt; classes.length; i++) {
    if (checkCondition(classes[i]) === undefined)
      console.log('undefined');
  }
}

export  $initHighlight;

Code

<pre><code class="pattern-source javascript">[...]</code></pre>

JSON

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

Code

<pre><code class="pattern-source json">[...]</code></pre>

PHP

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

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

Code

<pre><code class="pattern-source php">[...]</code></pre>

More examples

For more language examples see the highlight.js demo.