Code Highlighter

Code Highlighter is a Bric that uses Prism to add syntax highlighting to code examples on pages built with Blocs for Mac. Enter code and a language ID in a regular Paragraph, then place one instance of the Bric on the page. The code is formatted when you preview or export the page. It is useful for programming tutorials and pages that explain configuration examples.

Choose from eight color themes and enable or disable line numbers, language labels, and copy buttons individually. Short commands and function names can also appear as inline code within a sentence.

Download Code Highlighter 1.0.0 / Shared placement guide

Examples

The following image was saved from the Blocs preview. The JavaScript and Python examples are each entered in a separate Paragraph, followed by another Paragraph containing inline code.

Figure 1: The okaidia theme uses a dark background. Both code blocks have line numbers, and greet() appears as inline code in the sentence below.

Visit the Code Highlighter demo to see the highlighting in your browser. The demo includes JavaScript and Python code blocks, plus inline code within a sentence.

Syntax highlighting formats the code for display; it does not execute the examples. Inline code has no language field and does not receive the same language-specific highlighting as a code block.

How to use it

1. Place Code Highlighter

Place one Code Highlighter on the page containing your code examples. You do not need a separate instance for each code block. Place it in the regular page area for use on that page, or in a Global Area for use across pages.

Create a dedicated Bloc for extensions and set its Padding to None at XS before placing the Bric. Extensions such as Math Renderer can share that Bloc when they use the same scope. See the shared Bric placement guide for detailed instructions.

2. Enter code in a body Paragraph

Add a regular Paragraph to your content Bloc and enclose the entire code example in triple backticks. Immediately after the opening backticks, enter a language ID such as javascript or python. Code Highlighter itself has no field for entering code.

Use one Paragraph per code example. Put surrounding explanations, other code blocks, and sentences with inline code in separate Paragraphs. In a regular Paragraph, line breaks become HTML br elements, and the Bric extracts the first code block and replaces the entire Paragraph. Combining several examples or explanations in one Paragraph may cause some content to be lost.

Figure 2: In the editor, the backticks and language ID are part of the text you enter. The JavaScript example, Python example, and sentence containing inline code each use a separate Paragraph.

Here is the JavaScript input. Paste only this block into one Paragraph.

```javascript
function greet(name) {
    return "Hello, " + name + "!";
}

console.log(greet("Blocs"));
```

Paste the Python example into another Paragraph.

```python
def mean(values):
    return sum(values) / len(values)

print(mean([12, 18, 24]))
```

For inline code, use single backticks. Place this sentence in a separate Paragraph as well.

Run `greet()` to display a greeting.

3. Choose a theme and display options

Select Code Highlighter and choose a Theme in the sidebar. There are four settings: the Theme menu and three checkboxes, Line Numbers, Copy to Clipboard, and Show Language. Figure 1 uses okaidia with all three checkboxes enabled.

Figure 3: The four settings used for the sample. Theme is set to okaidia, and line numbers, Copy buttons, and language labels are all enabled.

4. Check the preview and copied code

Use the Blocs preview to check the highlighting and line numbers. If language labels and Copy buttons are enabled, they appear at the top right when you move the pointer over a code block. Use Copy and paste the result into a text editor to check both the content and indentation.

The blue Code Highlighter label shown in the editor does not appear on the exported page. Before publishing, also check the exported HTML and test the display and copy behavior at the actual published URL.

Themes and settings

Settings apply to the whole page. If several Code Highlighter instances are present, the first one found supplies the settings. This arrangement is not suitable for assigning a different theme to each code block on the same page.

Setting	Options	Packaged default	Purpose
Theme	default, dark, tomorrow-night, okaidia, twilight, coy, solarized-light, funky	default	Color theme for the whole page
Line Numbers	OFF / ON	OFF	Add line numbers to code blocks generated by the Bric
Copy to Clipboard	OFF / ON	OFF	Show a Copy button in the toolbar
Show Language	OFF / ON	OFF	Show a language label in the toolbar

Explicitly specify a language ID in each opening fence. The Bric does not infer the language from the code itself.

Figure 4: The same code in the light default theme. The JavaScript block shows its language label and Copy button at the top right.

Existing pre and code elements with language classes can also receive Prism highlighting. However, line numbers are not automatically added to all such elements.

Specifying a language

Use a Prism language ID in the opening fence. These are representative IDs found in the bundled source. The screenshots and runtime checks for this article use javascript and python.

Language or format	ID to enter
JavaScript	javascript
Python	python
HTML / XML	markup
CSS	css
JSON	json
Bash	bash
C++	cpp
Swift	swift

This guide does not assume that languages missing from the bundle can be loaded automatically. Language IDs containing hyphens are also subject to limitations in the input parser, so check the output for each language you use.

Tested environment and limitations

Item	Details
Tested versions	Code Highlighter 1.0.0, Blocs 6.4.7 for Mac, a Bootstrap 5 page
Highlighting engine	Prism 1.30.0
JavaScript	Required for code conversion and highlighting
Tested themes	okaidia, default
Verified features	JavaScript and Python blocks, line numbers, language labels, Copy buttons, and inline code

When these examples were pasted into regular Paragraphs, the four consecutive spaces in the input became one space in both the display and copied output. For languages such as Python, where indentation is significant, check the copied code as well. Leading and trailing whitespace around the entire code block is also trimmed. Before publishing, compare the input and output of code containing HTML special characters or backticks.

Copy behavior can vary with browser permissions and the viewing environment. In the local browser test, Copy placed text matching the displayed code on the clipboard. Test it again at the actual published URL.

The Bric does not continuously watch and convert arbitrary content inserted later. It includes processing for Volt CMS content, but this article's examples and checks use regular Blocs body content.

On October 24, 2026, screenshots were captured in Blocs, highlighting and copy behavior were checked in both preview and a local server serving the export, and settings and bundled files were checked in the exported HTML.