New Plugin: Syntax Highlighting with Highlight.js

The plugin automatically highlights <pre><code> blocks in your posts and supports a wide range of programming languages. The tinyMCE editor will add that automatically when you choose to insert a code sample section.

Features

• Supports over 200 programming languages.
• Automatic language detection or manual language classes.
• Configurable theme selection (light and dark options).
• Works with inline and block-level code.

Installation

1. Go to /admin and Plugins section
2. Click on Download new or Update button
3. Enter: https://downloads.mangoblog.org/plugins/highlightjs.zip
4. Click Download
5. Activate it

Usage

Write code snippets inside <pre><code> tags. You can optionally add a language class for better accuracy.

Example (JavaScript):

<pre><code class="language-javascript"> 
function hello() { console.log("Hello, world!"); } 
</code></pre>

Example (ColdFusion):

<pre><code class="language-cfml">
<cfset message = "Hello, world!">
<cfoutput>#message#</cfoutput>
</code></pre>

If no class is specified, Highlight.js will attempt to detect the language automatically.

Configuration

Theme → there is no UI to set the theme at the moment, but you can add the preference directly to the database. The default theme is a11y-light

INSERT INTO `[your prefix]setting` (`path`, `name`, `value`, `blog_id`, `type`) 
VALUES ('plugin/highlightjs', 'theme', 'atom-one-dark', 'default', 'string');

Notes

Make sure your blog theme includes <pre> and <code> styles that don’t conflict with Highlight.js CSS.

If you copy code from editors or IDEs, clean up extra markup before publishing.

This plugin is intended for technical blogs where code readability is important. Highlight.js provides consistent formatting across browsers and devices without additional setup.