This version of this component hasn't been branded yet.

Please check the latest version, 1.4.0, as branding is a relatively new addition to our components.

o-syntax-highlight

Component description

active

HTML

Syntax highlight for HTML

<div class="demo" data-o-component="o-syntax-highlight">
		<pre><code class="o-syntax-highlight--html">
&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;
	&lt;!-- &lt;span&gt;Comment&lt;/span&gt; --&gt;
&lt;/div&gt;</code></pre>
</div>

JS

Syntax highlight for JS

<div class="demo" data-o-component="o-syntax-highlight">
	<h4>JAVASCRIPT</h4>
	<pre>
		<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 {
/*
This
Is a multiline
comment!
//  &lt;= 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 obj

    this instanceof Thing

    do {
      console.log(&quot;Fun&quot;)
    } while(0)
    	console.log(&quot;keywords:&quot;, `as; async; await; break; case;
catch; class; const; continue; 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(&quot;operators:&quot;, `- -- -=
+ ++ +=
&lt; &lt;= &lt;&lt; &lt;&lt;=
&gt; &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 &lt;= 4 &amp;&amp; 3 === 3 &amp;&amp; 2 == 2
    var a = 4;
    a--
    a -= 2
    a = a+ 1
    a++
    a += 2
    a&lt; 3
    a&lt;= 4
    a&lt;&lt; 2
    a &lt;&lt;= 3
    a&gt; 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!==a
    a &amp; 2
    a &amp;&amp; a
    a &amp;= 2
    a| 2
    a || a
    a|=2
    a * 2
    a*= 2
    a**=2
    a/ 2
    a/= 3
    ~a
    a=a^2
    a^= 3
    a% 3
    a%=3

    a ? a : a

    42
    3.14159
    4e10
    3.2E+6
    2.1e-10
    0b1101
    0o571
    0xcafe
    0xCAFE
    NaN
    Infinity

    null
    void 0
    undefined
  }

  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];
      default:
        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()}
${world.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 {
}</code>
	</pre>
<div>



</div></div>

CSS

Syntax highlight for CSS

<div class="demo" data-o-component="o-syntax-highlight">
	<pre>
		<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
nothing
*/

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

	@media only screen and (max-width: 500px) {
		font-size: 14px;
		background: papayawhip !important;
	}
}</code>
	</pre>
<div>



</div></div>

Inline Code

Syntax highlight for Inline Code Tags

<div class="demo" data-o-component="o-syntax-highlight">
	<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>
		<pre>
			<code class="o-syntax-highlight--html">
&lt;html&gt;
	&lt;head&gt;
		&lt;!-- links and scripts --&gt;
	&lt;/head&gt;
	&lt;body&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;
			&lt;span&gt;Comment&lt;/span&gt;

		&lt;/div&gt;
	&lt;/body&gt;
&lt;/html&gt;</code>
		</pre>
</div>

JSON

Syntax highlight for JSON

<div class="demo" data-o-component="o-syntax-highlight">
	<h4>JSON</h4>
	<pre>
		<code class="o-syntax-highlight--json">
&quot;object&quot;: {
	&quot;string&quot;: &quot;string&quot;,
	&quot;array&quot;: [
		&quot;name&quot;,
		&quot;names&quot;
	],
	&quot;object&quot; : {
		&quot;nested&quot;: &quot;&lt;div&gt;html&lt;/div&gt;&quot;
	}
	&quot;numbers&quot;: 1
}</code>
	</pre>
<div>



</div></div>

SCSS

Syntax highlight for SCSS

<div class="demo" data-o-component="o-syntax-highlight">
	<pre>
		<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();
	}
}</code>
	</pre>
<div>



</div></div>

Diff

Syntax highlight for diff

<div class="demo" data-o-component="o-syntax-highlight">
<h4>DIFF</h4>
<pre><code class="o-syntax-highlight--diff">
&lt;div class=&quot;o-example o-example--alert o-example--error&quot; data-o-component=&quot;o-example&quot;&gt;
	&lt;div class=&quot;o-example__container&quot;&gt;
		&lt;div class=&quot;o-example__content&quot;&gt;
-			&lt;p class=&quot;o-example__highlight&quot;&gt;Something went wrong!
+			&lt;p class=&quot;o-example__content-main&quot;&gt;
+				&lt;span class=&quot;o-example__content-highlight&quot;&gt;Something went wrong!&lt;/span&gt;
-				&lt;span class=&quot;o-example__detail&quot;&gt;The quick brown fox did not jump over the lazy dogs.&lt;/span&gt;
+				&lt;span class=&quot;o-example__content-detail&quot;&gt;The quick brown fox did not jump over the lazy dogs.&lt;/span&gt;
			&lt;/p&gt;
+			&lt;p class=&quot;o-example__additional-info&quot;&gt;Did you know that that sentence uses all of the letters in the alphabet at least once?&lt;/p&gt;
-			&lt;p class=&quot;o-example__content-additional&quot;&gt;Did you know that that sentence uses all of the letters in the alphabet at least once?&lt;/p&gt;

			&lt;div class=&quot;o-example__actions&quot;&gt;
-				&lt;a href=&quot;#&quot; class=&quot;o-example__action--primary&quot;&gt;Button&lt;/a&gt;
+				&lt;a href=&quot;#&quot; class=&quot;o-example__actions__primary&quot;&gt;Button&lt;/a&gt;
-				&lt;a href=&quot;#&quot; class=&quot;o-example__action--secondary&quot;&gt;Text link&lt;/a&gt;
+				&lt;a href=&quot;#&quot; class=&quot;o-example__actions__secondary&quot;&gt;Text link&lt;/a&gt;
			&lt;/div&gt;
		&lt;/div&gt;
	&lt;/div&gt;
&lt;/div&gt;
</code></pre>
</div>
Bower Dependencies
o-colors ^4.2.4
prism ^1.14.0
GitHub Repository

Quickstart

Build Service

Add the following to your <script> and <link> tags.

o-syntax-highlight@^1.2.2

How do I do that?

For more information see the Origami build service.

Manual Build Process

Run the following command in the root directory of your project, to add this dependency to your bower.json file:

bower install --save "o-syntax-highlight"@"^1.2.2"

For more information see the Origami build process.