Adding Code Highlighting

With Summit Evergreen, one of the useful features you have at your disposal is a variety of CSS (Cascading Style Sheet) options. One of these options is syntax highlighting, which allows you to show the content associated with your source code in a different format in order to distinguish it.

For example, this would be used when displaying programming, scripting, or markup languages (e.g., HTML).

In short, you are able to add the JS or CSS libraries to the theme settings and have the highlighting show up within your course for your customers. You can set up the syntax highlighter of your choice, but here is an example of one from the website https://highlightjs.org/usage/. This website provides the following code that you can copy and use to enable syntax highlighting in Summit Evergreen:

<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/8.6/styles/default.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/8.6/highlight.min.js"></script>
</script>
<script>hljs.initHighlightingOnLoad();</script>

Setting Up Syntax Highlighting

In Summit Evergreen:

  • Select your course from the product dropdown menu in the upper left corner
  • In the left navigation menu, select “Appearance”, then “Theme”
  • In the left pane, select “My Current Theme”, and this will bring up the “Theme Settings” section for your current theme
  • In the “Theme Settings” section, scroll down to the “Header Scripts” section. Paste the code above into this section, then hit “Save” in the lower right corner

Accessing the Syntax Highlighting:

In Summit Evergreen:

  • In the left navigation menu, select “Content”, then “Pages”
  • In the left pane, select a page of your content, and then the editor for the page will appear in the right pane
  • In this editor section, select “<>” from the top menu bar to access the page’s HTML code. In the example page below, notice the circled text in the content

To highlight a section of your code, use the <pre> tags as shown below:

<pre>YOUR CODE</pre>

EXAMPLE

This will highlight the content in your page that is associated with this code. In the example page below, notice the circled text in the content, which is now contained in a light grey box.

Note that the highlighter may have a different appearance from theme to theme.

In addition to syntax highlighting, https://highlightjs.org/usage/ has other syntax-related features (e.g., specifying which language) that you may want to take advantage of as well.

Was this article helpful?

Yes No

Related Articles