Code

Digital pattern library

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.

Rules for code

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 must 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.
Along with 'pattern-source' a language class must used to match the required language. 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.

HTML

Example


	
	    Navigation 
	    
	        Study at St Andrews
	        Research
	        Alumni and donors
	        Community facilities
	        Business services
	        About

Code

[...]

CSS

Example


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

Code

[...]

JavaScript

Example


	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

Example


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

Code

[...]

PHP

Example


	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.