• View
• Edit
• History
• Attach
• Print
• Backlinks

CodeHighlight

Syntax highlighting for programming languages.

Description

This extension allows for easy installation and configuration for Syntax highlighting for programming languages in code blocks. The open source library Highlight.js is included locally, and some languages and styles can be enabled via CDN.

It comes with a light+dark color theme similar to the one used by PmSyntax, but also allows for other color themes to be selected.

Some popular programming languages are enabled by default, and a few more languages can be enabled locally. All other ~ 150 languages can be enabled via CDN.

Installation

This extension requires ExtensionHub.

Place CodeHighlight-2024-07-25.zip in the pmwiki/extensions directory on your server. Optionally you can unzip it.

Alternatively, you can clone the Git repo into pmwiki/extensions with such a command line:
git clone --depth=1 https://github.com/5ko/CodeHighlight.git

Configuration

To enable the extension, navigate to SiteAdmin.ExtensionHub, locate the "CodeHighlight" row and press "Edit". On the new page, check the checkbox "Enable configuration" and near the bottom press "Save".

On the same page, you can select additional options:

Light and dark color themes for the code blocks. You only need a dark theme if your skin supports a dark theme.

• From the drop-downs, select a default (light) color theme, and if your skin has a dark mode, a second (dark) color theme.
• The default color theme "PmSyntax" uses the color set of the PmSyntax markup highlighting and has both a light and a dark sets of colors. If you select it, you don't need to select a separate dark theme (but you could if you prefer another one).
• Some color themes can be enabled locally, many more can be loaded via CDN. You can easily preview the color themes here then select the ones you like in the Hub.

Programming languages to highlight.

• Check the checkboxes for the languages that you need to enable.
• About 30 most popular languages are always enabled, and a few more ship with the extension and can be enabled locally.
• Many more languages can be enabled via CDN.

If you enable Filterable, you can easily search for languages.

After you save the configuration, you can preview the color theme in the same page, after the form.

Internationalization

The following strings can be translated in an XLPage:

Usage

In a wiki page, you can use the %highlight% or %hlt% wikistyles, and the language to mark your code blocks.

Either immediately before the code block:

%hlt php%[@
  function SDVA(&$var,$val)
    { foreach($val as $k=>$v) if (!isset($var[$k])) $var[$k]=$v; }
  function IsEnabled(&$var,$f=0)
    { return (isset($var)) ? $var : $f; }
@]

  function SDVA(&$var,$val)
    { foreach($val as $k=>$v) if (!isset($var[$k])) $var[$k]=$v; }
  function IsEnabled(&$var,$f=0)
    { return (isset($var)) ? $var : $f; }

Or in a wrapping division block:

>>highlight css<<
[@
  /* These adjust the size and spacing of heading elements */
  h1, h2, h3, h4, h5, h6 { margin:1.0em 0 .6em 0; }
  h1, h2, h3, h6 { font-weight:normal; }
  h4, h5 { font-weight:bold; }
@]
>><<

  /* These adjust the size and spacing of heading elements */
  h1, h2, h3, h4, h5, h6 { margin:1.0em 0 .6em 0; }
  h1, h2, h3, h6 { font-weight:normal; }
  h4, h5 { font-weight:bold; }

Notes

To do / some day / maybe

Let me know if you need additional languages or color themes to be made available locally.

Change log / Release notes

• 2024-07-25: Generic conditional in configuration form. Update HighlightJS to 11.10.0.
• 2024-03-02 Update for simpler extGetConfig().
• 2024-02-24 First public release, ready to be tested.

See also

Contributors

PmWiki extension written and maintained by Petko. Highlight.js by Ivan Sagalaev.

Comments

See discussion at CodeHighlight-Talk?