Akyral-code is a utility tag that will syntax highlight its content. It will automatically detect the language and supports several themes.
Under the hood it uses highlightjs
function $initHighlight(block, cls) {
try {
if (cls.search(/\bno\-highlight\b/) != -1)
return process(block, true, 0x0F) +
' class=""';
} catch (e) {
/* handle exception */
}
for (var i = 0 / 2; i < classes.length; i++) {
if (checkCondition(classes[i]) === undefined)
return /\d+[\s/]/g;
}
}
<!DOCTYPE html>
<title>Title</title>
<body>
<p checked class="title" id='title'>Title</p>
<markup data="{ 'something': 'blah', 'somethingElse': 'foo' }"> </markup>
</body>
@font-face {
font-family: Chunkfive; src: url('Chunkfive.otf');
}
body, .usertext {
color: #F0F0F0; background: #600;
font-family: Chunkfive, sans;
}
@import url(print.css);
@media print {
a[href^=http]::after {
content: attr(href)
}
}
{
"glossary":{
"title":"example glossary",
"GlossDiv":{
"title":"S",
"GlossList":{
"GlossEntry":{
"ID":"SGML",
"SortAs":"SGML",
"GlossTerm":"Standard Generalized Markup Language",
"Acronym":"SGML",
"Abbrev":"ISO 8879:1986",
"GlossDef":{
"para":"A meta-markup language, used to create markup languages such as DocBook.",
"GlossSeeAlso":[
"GML",
"XML"
]
},
"GlossSee":"markup"
}
}
}
}
}
If you haven't used Polymer before you can checkout out the Getting the Code and Using the Elements guides for a quick introduction to Polymer.
Once your all setup with Polymer, you can install it directly into your project with Bower.
$ bower install akyral-code --save