Code Highlighting

Use Prism to highlight blocks of code in your site.

About the Library

WebsiteGitHubnpm

Code highlighting is handled by the Prism library. Prism is a lightweight, robust, elegant syntax highlighting library with huge language coverage and many themes to choose from.

Initializing

The demo pages already include the following code. These steps are only necessary if you are building a page from scratch. Remove these references if you are not using this plugin to improve page load times.

  1. Include the library in your page

    • Copy the script tag below and paste in the foot of your page. Add this where you see the other library scripts. This line should be inserted after jquery.js and before theme.js.

      <!-- Prism (displays formatted code boxes) -->
<script type="text/javascript" src="assets/js/prism.js"></script>

      Alternatively you may wish to load this resource from a CDN to potentially improve page load times.

      <!-- Prism (displays formatted code boxes) -->
<script type="text/javascript" src="https://unpkg.com/prismjs@~1.17.1/prism.js"></script>
  2. Load the initializer code in index.js
    • Declare the following import statement in js/mrare/index.js. This ensures that the initializer code is included in the theme.js bundle.
      import './prism';
  3. Load the required CSS in components.scss
    • Declare the following import statement in scss/custom/components.scss:
    @import "components/optional/prism";

Basic Usage

NOTE: Special characters must be written as character entity references in order to appear in your code box.

Add code to your pages using the following syntax:

<pre>
  <code class="language-html">
    &lt;h2 data-countdown-date=&quot;2019/08/05&quot;&gt;&lt;/h2&gt;
  </code>
</pre>

Prism will automatically format and highlight the code on page load.

You may use this online tool to do the conversion.

See this reference at Wikipedia for available HTML entity references.

Themes

You may include other colour themes for Prism by including them in theme.css.

  1. Place the theme CSS file in the scss/custom/components/plugins folder.
  2. Open scss/custom/components/optional/prism.scss and add the following import directive after the prism.css import:
    @import "CSS:../../components/plugins/prism-okaidia.css";

Themes can be found at the Prism download page or through a quick search.