xblock-prismjs

XBlock for Syntax Highlighting with Prism.js

LMS Final Output Examples:

• Javascript in Light theme

• Python in Dark theme

Installation

This XBlock was tested & designed to work with Juniper release.

git clone git@github.com:appsembler/xblock-prismjs.git

Features

• 2 themes for Syntax Highlighting via PrismJS:
  • Light (Default)
  • Dark (Tomorrow Night)
• Supported Languages:
  • Bash
  • C-like, CSS
  • Go
  • Java, Javascript, JSON
  • Lua
  • Markup
  • Python
  • Ruby
  • Shell, SQL
  • YAML

Usage

Step 1: From Studio, add "prism" in the "Advanced Module List"

Step 2: Add "Syntax Highlighter" from your unit

Prism XBlock will display as "Syntax Highlighter"

Step 3: Customize your code block

Edit the code, set a maximum height, select a language, select a theme

Step 4: Publish

When you're happy with the changes, click the Publish button then View Live Version to view the changes in LMS