Formatting code snippets with the Prism Syntax Highlighter XBlock

Adding code snippets to an Open edX course and making them look aesthetically pleasing used to be a headache. Now, with the Prism Syntax Highlighter XBlock, it's easy. Here's how it's done.

Enabling the XBlock

As with all XBlocks, the first step is to enable the XBlock in your course. 

  1. From Studio Navigate to Advanced Settings 
  2. Within the Advanced Module List, add the XBlock code "prism" (the XBlock utilizes styling packages from Prism.js)
  3. Save your changes

Using the Syntax Highlighter XBlock

Now it's time to put the XBlock into a part of our course so we an use it. 

Navigate to a unit in your course where you want to add your code snippet. 

Click the green Advanced component block 

Choose Syntax Highlighter

Click Edit 

From here, you can add your code to the Code text block 

Scroll down a bit, to set your parameters like Max Height (in px) of the code block, Language, and Theme. 

Available languages include:

  • Bash
  • C-like
  • CSS
  • Go
  • Java
  • Javascript
  • JSON
  • Lua
  • Markup
  • Python
  • Ruby
  • Shell-Session
  • SQL
  • YAML

Right now, there are only 2 available themes to choose from: Light, which uses Prism's "Default" theme & Dark, which comes from Prism's "Tomorrow Night" theme.

I'm sticking with 450px, using Python as my language, and Dark for my theme.

Click Save, and see how it looks!

ℹ️IMPORTANT: When doing any sort of course authoring that deals with styles or look & feel. Always make sure to publish your changes in Studio, and double check them in the LMS. 

That's all there is to it! With the Prism Syntax Highlighter XBlock, you can even include multiple code languages in different styles all within the same unit. 

Now your learners can easily read and even copy your code examples! Happy coding!