Code can be complicated! If you need to display code on your website, syntax colouring can be a big help. But trying to do syntax colouring yourself can quickly become a hugely tedious task. Which is why many website owners turn to an automated approach and use plugins like highlight.js in their websites. This makes code much-more 'visual' to end users - easier to read and easier to understand.
SyntaxHighlight foregoes complicated options like line numbers, popups and copy buttons. The emphasis of this stack is very-much on the clean presentation of code, on all web browsers and devices. This is stack you can use time and time again in all your projects. The codebase used by SyntaxHighlight is based on the same code used in the open source highlight.js plugin. Many of the themes are expertly designed and based on actual code editors, like Atom and VS Code.
Over 75 styles (themes) are offered in SyntaxHighlight for you to choose from. All the styles in this stack are pure CSS. There are no embedded font faces or images to slow-down page loading. An effort has been made to keep SyntaxHighlight small and lightweight.
Straight out of the box, SyntaxHighlight supports the following programming and markup languages:
SyntaxHighlight foregoes complicated options like line numbers, popups and copy buttons. The emphasis of this stack is very-much on the clean presentation of code, on all web browsers and devices. This is stack you can use time and time again in all your projects. The codebase used by SyntaxHighlight is based on the same code used in the open source highlight.js plugin. Many of the themes are expertly designed and based on actual code editors, like Atom and VS Code.
Over 75 styles (themes) are offered in SyntaxHighlight for you to choose from. All the styles in this stack are pure CSS. There are no embedded font faces or images to slow-down page loading. An effort has been made to keep SyntaxHighlight small and lightweight.
Straight out of the box, SyntaxHighlight supports the following programming and markup languages:
- Apache
- Bash
- C#
- C++
- CSS
- CoffeeScript
- Diff
- Go
- HTML, XML
- HTTP
- JSON
- Java
- JavaScript
- Kotlin
- Less
- Lua
- Makefile
- Markdown
- Nginx
- Objective-C
- PHP
- Perl
- Plain Text
- Properties
- Python
- Ruby
- Rust
- SCSS
- SQL
- Shell Session
- Swift
- TOML
- TypeScript
- YAML
Example
This is an example of SyntaxHighlight using the default options. You may spot other examples of SyntaxHighlight being used elsewhere in this website to show you code.// Python code to generate a random password
import string
from random import *
characters = string.ascii_letters + string.punctuation + string.digits
password = ''.join(choice(characters) for x in range(randint(7, 11)))
print password
// Output
f&j{dI£x9!R$2wd-D8f+Setup
Follow these steps to setup SyntaxtHighlight:- Once installed into Stacks and RapidWeaver, open your Stacks Library. Search for 'SyntaxHighlight'.
- Drag and drop a copy of the stack into the page.
- Enter the code you want displayed within the SyntaxHighlight stack. Remember that some code types (like HTML) may require that you escape characters to prevent breakage of the page.
- In the stack settings for SyntaxHighlight, you can choose the style (colour and fonts) applied to the code.
- Preview the page to see the results. Export or publish when done.
It's recommended that you only include a single SyntaxHighlight on each webpage. If you need to style multiple code blocks, then use normal pairs of
<pre><code> and </code></pre> HTML tags to enclose your code blocks. SyntaxHighlight looks through the page for these tags and styles the code within.