# Code Highlighting

Use Prism to highlight blocks of code in your site.

###

About the Library

Website GitHub npm

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.