Highlighter

Prism is a lightweight, extensible syntax highlighter, built with modern web standards in mind.

GitHub PrismJS

Usage

<pre class="code-highlighter line-numbers theme-dark" data-line="4">
<code class="language-markup">
     escapar os caracteres ( &lt; &gt; &amp; &copy; etc )
</code>
</pre>

Run PrismJS

If you need re-run PrismJS on AJAX content, use:

Prism.highlightAll();

Themes

Use .theme-light and .theme-dark.

<div id="container1">
    <img src="sample-before.png">
    <img src="sample-after.png">
</div>

<div id="container1">
    <img src="sample-before.png">
    <img src="sample-after.png">
</div>

<pre class="code-highlighter line-numbers theme-{dark|light}">
<code class="language-markup">
  escapar os caracteres ( &amp;lt; &amp;gt; &amp;amp; &amp;copy; etc ) 
</code>
</pre>

Classes

• code-highlighter : Use in <pre> element
• line-numbers
• theme-light
• theme-dark
• text-break : Use in <pre> element for break line

Languages

Use language-{language}:

markup css clike javascript aspnet bash csharp ruby git http ini java json markdown php powershell python scss sql textile yaml

Some examples

function sumAll() {
  var i, sum = 0;
  for (i = 0; i < arguments.length; i++) {
      sum += arguments[i];
  }
}

{"employees":[
  {"firstName":"John", "lastName":"Doe"},
  {"firstName":"Anna", "lastName":"Smith"},
  {"firstName":"Peter", "lastName":"Jones"}
  {"firstName":"John", "lastName":"Resig"}
]}

ol > li, ul > li { padding: 0; }
ol, ul { list-style-type: none; margin: 0; padding: 0; }
iframe { border: 0; }

$ git clone https://github.com/umbler/umbootstrap.git
$ cd getting-started

<pre class="code-highlighter theme-dark">
<code class="language-{javascript|json|css|git}">
...
</code>
</pre>