Code highlight

Code highlight is a feature with predefined styles for HTML, CSS, JavaScript and JSON. These styles are a customization for the languages supported by the library highlight.js. See the basic example:

Source code

<div class="source-code">
  <pre><code class="html"></code></pre>
  <pre><code class="css"></code></pre>
  <pre><code class="js"></code></pre>
  <pre><code class="json"></code></pre>
</div>

See below the code highlight for each supported language:

HTML CSS JavaScript JSON

<!doctype html>
<html lang="en">
  <head>
    <title>Admin 4B</title>
  </head>
  <body>
    <!-- Comment -->
    <h1 class="display-5">HTML example</h1>
  </body>
</html>

@media (min-width: 768px)
{
  /* Comment */
  .example
  {
    background: #efefef;
    width: 100%;
  }
}

function hello() {
  var name = 'Admin 4B'; // Comment
  var vesions = 8;

  return name + ': ' + versions;
}

{
  "name": "Admin 4B",
  "active": true,
  "versions": 8
}

Source code

<div class="source-code">
  <div class="nav nav-tabs">
    <a href="#html" class="active" data-toggle="tab">HTML</a>
    <a href="#css" data-toggle="tab">CSS</a>
    <a href="#js" data-toggle="tab">JavaScript</a>
    <a href="#json" data-toggle="tab">JSON</a>
  </div>
  <div class="tab-content">
    <div id="html" class="tab-pane active">
      <pre><code class="html">...</code></pre>
    </div>
    <div id="css" class="tab-pane">
      <pre><code class="css">...</code></pre>
    </div>
    <div id="js" class="tab-pane">
      <pre><code class="js">...</code></pre>
    </div>
    <div id="json" class="tab-pane">
      <pre><code class="json">...</code></pre>
    </div>
  </div>
</div>