User Interface

Utility

[ Code ]

What is it?

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" } } } } }

Install

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