X-Hilite HTML5 Web Component Based on Prism.js

Syntax Highlighter

AcidJs.XHilite is a syntax highlighter HTML5 Web Component, based on Lea Verou's Prism.JS and wrapped as a custom tag with support for multiple languages and both declarative and async loading of the code to be highlighted.

<acidjs-xhilite language="javascript" height="200" width="400">
function sayHi() {
    return "Hello, World"!;
}

sayHi.call(this);
</acidjs-xhilite>

Demo

Highlight Declaratively

Markup Languages (e.g. HTML, XML, SVG, etc.)

Page Heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

JavaScript

function sayHi() { return "Hello, World"!; } sayHi.call(this);

Highlight Code from External Files

HTML

SVG

CSS

JSON

Java

CSharp

PHP

Register Mozilla's X-Tags

You need to do this just once, and add the directive either in the <head /> section or before the closing <body /> tag of the page.

<script src="AcidJs.XHilite/lib/x-tag-components.js"></script>

Register the Component on the Page via HTML5 @import

You need to do this just once, and add the directive either in the <head /> section or before the closing <body /> tag of the page.

<link rel="import" href="AcidJs.XHilite/classes/XHilite.html" />

HTML Attributes of the Tag

Any native HTML attribute (id, class, data-*, style, etc.) is supported, plus the component-specific:

language - The language to highlight, for example language="javascript". Default: "markup" (usable with HTML, SVG, XML, etc.). Check prismjs.com for a complete list of supported languages
width - Optional width in pixels of the code block, for example: width="600".
height - Optional height in pixels of the code block, for example: height="200".
src - Instead of adding the code to highlight in the tag, you can specify path to the file which content needs to be highlighted, for example: src="example.js"

For complete info, please visit Loripsum API.

JavaScript Methods of the Tag

Native JavaScript methods (document.getElementById, document.querySelector, etc. as well as their jQuery or other libraries aliases).

Usage and Code Insight

<h3>Highlight Declaratively</h3>
<h4>Markup Languages (e.g. HTML, XML, SVG, etc.)</h4>

<acidjs-xhilite language="markup"><h6>Page Heading</h6>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod 
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim 
veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea 
commodo consequat. Duis aute irure dolor in reprehenderit in voluptate 
velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat 
cupidatat non proident, sunt in culpa qui officia deserunt mollit anim 
id est laborum.</p></acidjs-xhilite>

<br />

<h4>JavaScript</h4>
<acidjs-xhilite language="javascript">function sayHi() {
    return "Hello, World"!;
}

sayHi.call(this);</acidjs-xhilite>

<br />
<h3>Highlight Code from External Files</h3>
<h4>HTML</h4>

<acidjs-xhilite language="markup" src="pages/x-hilite-syntax-highlighter-html5-web-component/example/sample-code/html.html"></acidjs-xhilite>

<br />
<h4>SVG</h4>

<acidjs-xhilite language="markup" src="pages/x-hilite-syntax-highlighter-html5-web-component/example/sample-code/svg.svg"></acidjs-xhilite>

<br />
<h4>CSS</h4>

<acidjs-xhilite language="css" src="pages/x-hilite-syntax-highlighter-html5-web-component/example/sample-code/css.css"></acidjs-xhilite>
      
<br />
<h4>JSON</h4>

<acidjs-xhilite language="javascript" src="pages/x-hilite-syntax-highlighter-html5-web-component/example/sample-code/json.json"></acidjs-xhilite>
   
<br />
<h4>Java</h4>

<acidjs-xhilite language="java" src="pages/x-hilite-syntax-highlighter-html5-web-component/example/sample-code/java.txt"></acidjs-xhilite>

<br />
<h4>CSharp</h4>

<acidjs-xhilite language="csharp" src="pages/x-hilite-syntax-highlighter-html5-web-component/example/sample-code/csharp.txt"></acidjs-xhilite>

<br />
<h4>PHP</h4>

<acidjs-xhilite language="php" src="pages/x-hilite-syntax-highlighter-html5-web-component/example/sample-code/php.txt"></acidjs-xhilite>

<br />

/*
 * X-Prism HTML5 Web Component by Martin Ivanov (@wemakesitesnet) based on Lea Verou's Prism.js
 * More info regarding this exciting new technology: http://webcomponents.org/, http://www.x-tags.org/, http://www.polymer-project.org/
 * @author Martin Ivanov
 * @url developer website: http://wemakesites.net/
 * @url developer twitter: https://twitter.com/#!/wemakesitesnet
 * @url developer blog http://acidmartin.wordpress.com/
 **/

acidjs-xhilite, 
acidjs-xhilite *
{
    box-sizing: border-box;
}

acidjs-xhilite[ready],
acidjs-xhilite[error]
{
    visibility: visible;
}

acidjs-xhilite
{
    position: relative;
    display: block;
    visibility: hidden;
    vertical-align: top;
    border: solid 1px #ccc;
    font-size: .75em;
    background: #fff;
    cursor: default;
}

acidjs-xhilite::before
{
    content: attr(language);
    position: absolute;
    top: 0;    
    right: 0;
    display: inline-block;
    margin: -1px 0 0;
    padding: .5em;
    color: #000;
    opacity: .1;
    font: normal 3em Helvetica, Arial, Sans-serif;
}

acidjs-xhilite a
{
    color: #069;
    text-decoration: none;
}

acidjs-xhilite[error] code
{
    font-size: 2em;
    color: #b00;
}

/*
 * prism.js default theme for JavaScript, CSS and HTML
 * Based on dabblet (http://dabblet.com)
 * @author Lea Verou
 **/
acidjs-xhilite code[class*="language-"],
acidjs-xhilite pre[class*="language-"] 
{
    color: black;
    text-shadow: 0 1px white;
    font-family: Consolas, Monaco, 'Andale Mono', monospace;
    direction: ltr;
    text-align: left;
    white-space: pre;
    word-spacing: normal;
    word-break: normal;
    line-height: 1.5;
    
    -moz-tab-size: 4;
    -o-tab-size: 4;
    tab-size: 4;

    -webkit-hyphens: none;
    -moz-hyphens: none;
    -ms-hyphens: none;
    hyphens: none;
}

acidjs-xhilite pre[class*="language-"]::-moz-selection,
acidjs-xhilite pre[class*="language-"] ::-moz-selection,
acidjs-xhilite code[class*="language-"]::-moz-selection,
acidjs-xhilite code[class*="language-"] ::-moz-selection 
{
    text-shadow: none;
    background: #b3d4fc;
}

acidjs-xhilite pre[class*="language-"]::selection, pre[class*="language-"] ::selection,
acidjs-xhilite code[class*="language-"]::selection, code[class*="language-"] ::selection {
    text-shadow: none;
    background: #b3d4fc;
}

acidjs-xhilite pre
{
    overflow: auto;
    position: relative;
    padding: 1em 0 2em 3em;
    margin: 0;
}

acidjs-xhilite :not(pre) > code[class*="language-"] 
{
    padding: .1em;
    border-radius: .3em;
}

acidjs-xhilite .token.comment,
acidjs-xhilite .token.prolog,
acidjs-xhilite .token.doctype,
acidjs-xhilite .token.cdata 
{
    color: slategray;
}

acidjs-xhilite .token.punctuation
{
    color: #666;
}

acidjs-xhilite .namespace 
{
    opacity: .7;
}

acidjs-xhilite .token.property,
acidjs-xhilite .token.tag,
acidjs-xhilite .token.boolean,
acidjs-xhilite .token.number,
acidjs-xhilite .token.constant,
acidjs-xhilite .token.symbol,
acidjs-xhilite .token.deleted 
{
    color: #069;
}

acidjs-xhilite .token.selector,
acidjs-xhilite .token.attr-name,
acidjs-xhilite .token.string,
acidjs-xhilite .token.char,
acidjs-xhilite .token.builtin,
acidjs-xhilite .token.inserted 
{
    color: #666;
}

acidjs-xhilite .token.operator,
acidjs-xhilite .token.entity,
acidjs-xhilite .token.url,
acidjs-xhilite .language-css .token.string,
acidjs-xhilite .style .token.string 
{
    color: #a67f59;
    background: hsla(0, 0%, 100%, .5);
}

acidjs-xhilite .token.atrule,
acidjs-xhilite .token.keyword 
{
    color: #07a;
}

acidjs-xhilite .token.attr-value
{
    color: #d14;
}

acidjs-xhilite .token.function 
{
    color: #DD4A68;
}

acidjs-xhilite .token.regex,
acidjs-xhilite .token.important,
acidjs-xhilite .token.variable 
{
    color: #e90;
}

acidjs-xhilite .token.important 
{
    font-weight: bold;
}

acidjs-xhilite .token.entity 
{
    cursor: help;
}

/*
 * prism.js line numbering
 * @author David Walsh
 **/
acidjs-xhilite .line-number 
{
    position: absolute;
    left: 0;
    right: 0;
    padding: inherit 0;
    margin-top: 1em;
    background: transparent;
    pointer-events: none;
    line-height: inherit;
    white-space: pre;
}

acidjs-xhilite .line-number:before,
acidjs-xhilite .line-number[data-end]:after 
{
    content: attr(data-start);
    position: absolute;    
    min-width: 1em;
    padding: 0 .5em;
    color: #999;
    font-size: 1em;
    text-align: right;
    border-radius: 999px;
    text-shadow: none;
    border: 0;
}
	
acidjs-xhilite .line-number[data-end]:after 
{
    content: attr(data-end);
    top: auto;
    bottom: .4em;
}

HTML5, CSS3 & JS Experiments