o-syntax-highlight

Component description

active

HTML

Syntax highlight for HTML

<div class="demo" data-o-component="o-syntax-highlight">
	<h2>Highlighted Syntax Demos</h2>
	<h4>HTML</h4>
		<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> -->
</div></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!
//  <= 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!==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>

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;<div>html</div>&quot;
	}
	&quot;numbers&quot;: 1
}</code>
	</pre>
<div>



</div></div>

SCSS

Syntax highlight for SCSS

<div class="demo" data-o-component="o-syntax-highlight">
	<h4>SCSS/SASS</h4>
	<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>

CSS

Syntax highlight for CSS

<div class="demo" data-o-component="o-syntax-highlight">
	<h4>CSS</h4>
	<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">
	<h2>Highlighted Syntax Demos</h2>
	<h4>HTML</h4>

	<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>
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.1.1

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.1.1"

For more information see the Origami build process.