Origami Frontend Components & Services

Demos: o-syntax-highlight active

This version of o-syntax-highlight hasn't been branded yet. Please check the latest version, 1.6.0, as branding is a relatively new addition to our components.


Syntax highlight for HTML

<div class="demo" data-o-component="o-syntax-highlight">
	<h2>Highlighted Syntax Demos</h2>
		<pre><code class="o-syntax-highlight--html">
<div class="some-class" data-attribute="value">
	<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque consectetur est in urna iaculis tempus.</p>
	<p>Nam faucibus feugiat lectus, <a href="#">sit amet blandit</a> purus bibendum et.</p>
	<button type="button" name="button">Button.</button>
	<!-- <span>Comment</span> -->


Syntax highlight for JS

<div class="demo" data-o-component="o-syntax-highlight">
		<code class="o-syntax-highlight--js">
import defaultExport from &quot;module-name&quot;;
import * as name from &quot;module-name&quot;;
import { prop } from &quot;module-name&quot;;
import { prop as alias } from &quot;module-name&quot;;
import { export1 , export2 } from &quot;module-name&quot;;
import { export3 , export2 as alias4 } from &quot;module-name&quot;;
import defaultExport1, { export5 , export6 as alias2 } from &quot;module-name&quot;;
import defaultExport2, * as name1 from &quot;module-name&quot;;
import &quot;module-name&quot;;

try {
Is a multiline
//  <= it="" can="" contain="" singline="" comments!="" *="" class="" thing="" extends="" object="" {="" constructor({propertya:="" foo}="{})" super();="" label:="" for="" (var="" i="0;i&lt;2;i++)" break="" label;="" continue;="" }="" const="" obj="{foo:&quot;bar&quot;};" delete="" obj.foo;="" foo="" in="" this="" instanceof="" do="" console.log("fun")="" while(0)="" console.log("keywords:",="" `as;="" async;="" await;="" break;="" case;="" catch;="" class;="" const;="" debugger;="" default;="" delete;="" do;="" else;="" enum;="" export;="" extends;="" finally;="" for;="" from;="" function;="" get;="" if;="" implements;="" import;="" in;="" instanceof;="" interface;="" let;="" new;="" null;="" of;="" package;="" private;="" protected;="" public;="" return;="" set;="" static;="" super;="" switch;="" this;="" throw;="" try;="" typeof;="" var;="" void;="" while;="" with;="" yield;`)="" console.log("operators:",="" `-="" --="" -="+" ++="" +="&lt;" <="&lt;&lt;" <<=""> &gt;= &gt;&gt; &gt;&gt;= &gt;&gt;&gt; &gt;&gt;&gt;=
= == === =&gt;
! != !==
&amp; &amp;&amp; &amp;=
| || |=
* ** *= **=
/ /= ~
^ ^= % %=
? ...`);
    console.log(/regex literal/);
    console.log(&quot;This is&quot;+ &quot;/, not a regex&quot;)
    3 &gt;= 2 || 2 <= 1="" 2="=" 3="==" 4="" &&="" var="" a="4;" a--="" -="2" a++="" +="2" a<="" a<<="" <<="3"> 3
    a&gt;= 3
    a&gt;&gt; 3
    a&gt;&gt;= 3
    a&gt;&gt;&gt; 3
    a&gt;&gt;&gt;= 3
    a = !a
    a!= a
    a &amp; 2
    a &amp;&amp; a
    a &amp;= 2
    a| 2
    a || a
    a * 2
    a*= 2
    a/ 2
    a/= 3
    a^= 3
    a% 3

    a ? a : a


    void 0

  add(...args) {
    if (args.length &gt; 1) {
      return args.pop() + add(...args);
    } else {
      return args[0];

  get english_greeting() {
    return &quot;hi&quot;;

  subtract(...args) {
    switch (args.length) {
      case 0:
        return 0;
      case 1:
        return args[0];
        return args.shift - subtract(...args)

  pow(a, exponent = 1) {
    return [a ** exponent];

  async &#xCA0;_&#xCA0;(){
    return async function* () {
      let hello = &quot;hello&quot;;
      var world = &apos;world&apos;;
      const what = `${hello.toUpperCase()}
		throw new Error(&quot;Please don&apos;t call this function&quot;);
      // This may not work
      return yield await delete typeof void this in new class extends async function () {} {}

  Thing.prototype.&#x220;&#x221;_&#x487; = Thing.prototype.&#xCA0;_&#xCA0;;
new Thing

const identity = a =&gt; a

const i = (a) =&gt; {return a}

const fals = function (){return false}
const tru = () =&gt; true
} catch (e) {
} finally {



Syntax highlight for JSON

<div class="demo" data-o-component="o-syntax-highlight">
		<code class="o-syntax-highlight--json">
&quot;object&quot;: {
	&quot;string&quot;: &quot;string&quot;,
	&quot;array&quot;: [
	&quot;object&quot; : {
		&quot;nested&quot;: &quot;<div>html</div>&quot;
	&quot;numbers&quot;: 1



Syntax highlight for SCSS

<div class="demo" data-o-component="o-syntax-highlight">
		<code class="o-syntax-highlight--scss">
@import: &apos;file&apos;;
$something: null !global;
$url: &apos;www.url.com&apos; !default;

%truth {
	color: forestgreen !important;

@mixin awesomeStyles ($url) {
	background: url($url);

@function doSomething() {
	@warn &apos;Doing something!&apos;;
	@return lightness(rebeccapurple);

/* multiline comment begins here

and ends here */

.class[data*=data] {
	@include awesomeStyles($url);
	@if ($something == true) {
		@extend %truth;
	} @else {
		@error &apos;That\&apos;s not true&apos;; //debatable

	&amp;:before {
		margin: 20px;

	#id {
		background: doSomething();



Syntax highlight for CSS

<div class="demo" data-o-component="o-syntax-highlight">
		<code class="o-syntax-highlight--css">
@import &apos;file&apos;; // using a relative path

@font-face {
	font-family: FontMcFontFace;
	src: url(fontmcfontface.woff);

@keyframes move {
	from { top: 0px }
	to { top: 10px }

:root {
	--main-background-color: papayawhip;

body {
	font-family: &apos;FontMcFontFace&apos;, sans-serif;

div[class*=demo-] {
	background: var(--main-background-color);

/* Lets be clear that this does nothing
all of this CSS does

#text {
	@media print {
		font-size: 10px;

	@media only screen and (max-width: 500px) {
		font-size: 14px;
		background: papayawhip !important;


Inline Code

Syntax highlight for Inline Code Tags

<div class="demo" data-o-component="o-syntax-highlight">
	<h2>Highlighted Syntax Demos</h2>

	<p>This is some text, and it is here to illustrate that if you use a <code>&lt;code&gt;</code> tag, it will get light treatment regardless of what language is inside it. But only if it is an inline <code>&lt;code&gt;</code> block</p>
			<code class="o-syntax-highlight--html">
		&lt;!-- links and scripts --&gt;
		&lt;div class=&quot;some-class&quot; data-attribute=&quot;value&quot;&gt;
			&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque consectetur est in urna iaculis tempus.&lt;/p&gt;
			&lt;p&gt;Nam faucibus feugiat lectus, &lt;a href=&quot;#&quot;&gt;sit amet blandit&lt;/a&gt; purus bibendum et.&lt;/p&gt;
			&lt;button type=&quot;button&quot; name=&quot;button&quot;&gt;Button.&lt;/button&gt;

Switch component view

GitHub Repository

Install o-syntax-highlight

If using the Build Service, add o-syntax-highlight@^1.1.1 to your script and link tags.

If running a Manual Build, run bower install --save "o-syntax-highlight@^1.1.1".

Help & Support

o-syntax-highlight is maintained directly by the Origami team. If you have any questions about o-syntax-highlight or Origami in general, we are happy to help. 😊

Slack: #ft-origami
Email: origami.support@ft.com

Feedback / Issues

To report a bug or request features please create an issue on Github. For support or general feedback please get in touch 😊

Slack: #ft-origami
Email: origami.support@ft.com