Getting started

Import the prism components. It's only one file to import :-)

<link rel='import' href='prism-components.html'>

Then write some markup...

<pre is="lang-javascript" theme="dark" >
function sum(x, y) {
  return x + y;
}
</pre>

...and voilà!

function sum(x, y) {
  return x + y;
}
Install via npm
npm install prism-components
Load PrismComponents from RawGit CDN
<link rel='import' href='https://cdn.rawgit.com/ChristianKohler/PrismComponents/master/dist/prism-components.html'>

Examples

CSS Highlighting

<pre is="lang-css" theme="dark">
.car {
    background-color: red;
    border: 1px solid #FF0;
}
</pre>

.car {
    background-color: red;
    border: 1px solid #FF0;
}

JavaScript Highlighting

<pre is="lang-javascript" theme="dark">
function sum(x, y) {
  return x + y;
}
</pre>

function sum(x, y) {
  return x + y;
}

Markup Highlighting

<pre is="lang-markup" theme="dark">
&lt;img src="images.jpg"&gt;
</pre>

<img src="images.jpg">

Browser Compatibility

Use with Chrome for the best result

PrismComponents uses ShadowDom, CustomElements, HTML Imports and Templates. Chrome 36 or higher is the only browser which supports all these features yet.

At the moment this set of components is perfect for HTML presentation and Chrome only projects.

Polyfill

Use the webcomponents-lite.js polyfill for non Chrome browsers. Known limitation: Only the default theme is available.