Code

Displaying inline and multiline blocks of code.

The code highlighting feature is made with the Highlight.js plugin. Ensure that you include the necessary references to the plugin's .css and .js files in your document:

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.10.0/styles/atom-one-dark.min.css"></link>
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.10.0/highlight.min.js"></script>

You can easily switch between different themes by referencing alternative CSS styles. Here is the complete list of all available themes.

Inline code

Wrap inline snippets of code with <code>.

<p>Wrap inline snippets of code with <code>&lt;code&gt;</code>.</p>

User input

To switch directories, type cd followed by the name of the directory.

To edit settings, press ctrl + ,

<p>
  To switch directories, type <kbd>cd</kbd> followed by the name of the directory.
  To edit settings, press <kbd><kbd>ctrl</kbd> + <kbd>,</kbd></kbd>
</p>

Variables

y = mx + b

<var>y</var> = <var>mx</var> + <var>b</var>

Code block

<p>Sample text here...</p>
<p>And another line of sample text here...</p>

<pre>
  <code>&lt;p&gt;Sample text here...&lt;/p&gt;
  &lt;p&gt;And another line of sample text here...&lt;/p&gt;</code>
</pre>

Code block scrollable

<div class="table-responsive">
  <table class="table">
    <thead>
      <tr>
        <th>#</th>
        <th>First Name</th>
        <th>Last Name</th>
        <th>Position</th>
        <th>Phone</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <th scope="row">1</th>
        <td>John</td>
        <td>Doe</td>
        <td>CEO, Founder</td>
        <td>+3 555 68 70</td>
      </tr>
      <tr>
        <th scope="row">2</th>
        <td>Anna</td>
        <td>Cabana</td>
        <td>Designer</td>
        <td>+3 434 65 93</td>
      </tr>
      <tr>
        <th scope="row">3</th>
        <td>Kale</td>
        <td>Thornton</td>
        <td>Developer</td>
        <td>+3 285 42 88</td>
      </tr>
      <tr>
        <th scope="row">4</th>
        <td>Jane</td>
        <td>Birkins</td>
        <td>Support</td>
        <td>+3 774 28 50</td>
      </tr>
    </tbody>
  </table>
</div>

<pre class="overflow-auto" style="height: 20rem;">
  <code>
    Code goes here...
  </code>
</pre>

Code highlighting

<div class="table-responsive">
  <table class="table">
    <thead>
      <tr>
        <th>#</th>
        <th>First Name</th>
        <th>Last Name</th>
        <th>Position</th>
        <th>Phone</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <th scope="row">1</th>
        <td>John</td>
        <td>Doe</td>
        <td>CEO, Founder</td>
        <td>+3 555 68 70</td>
      </tr>
      <tr>
        <th scope="row">2</th>
        <td>Anna</td>
        <td>Cabana</td>
        <td>Designer</td>
        <td>+3 434 65 93</td>
      </tr>
      <tr>
        <th scope="row">3</th>
        <td>Kale</td>
        <td>Thornton</td>
        <td>Developer</td>
        <td>+3 285 42 88</td>
      </tr>
      <tr>
        <th scope="row">4</th>
        <td>Jane</td>
        <td>Birkins</td>
        <td>Support</td>
        <td>+3 774 28 50</td>
      </tr>
    </tbody>
  </table>
</div>

<div class="position-relative" data-bs-theme="dark">

  <!-- Copy code button -->
  <button type="button" class="btn btn-sm btn-outline-secondary bg-dark position-absolute top-0 end-0 px-2 mt-2 me-2 z-2" data-copy-code="#copy-this-code">
    <i class="ci-copy fs-sm me-1"></i>
    Copy
  </button>

  <!-- Highlighted code -->
  <pre id="copy-this-code" class="code-highlight">
    <code class="language-html">
      Code goes here...
    </code>
  </pre>
</div>

Customize theme

Colors

Primary

Success

Warning

Danger

Info

Direction

RTL

Border width, px

Rounding, rem