Code (adds prism.js to the programming code presentation)

The code shortcode is upgrading the markdown ``` by adding prism.js including linenumbers and highlighting.

Sample

Usage

[code lang=php linenumbers=1 offset=44 hilite=46-48]
```php
<?php
$name = 'Johan';

echo 'Hello ' . $name;
?>
```
[/code]

Options

lang

Option Required Default
lang no ini
Description
Language that is presented between the code tags. This determines the code coloring of the presented code.
Values
See for all supported languages: Prism support languages

Using a non supported language or literal here, could lead to page loading errors in prism.js

linenumbers

Option Required Default
linenumbers no no linenumbers
Description
Add this option if you would like to add linenumbers in front of the presented code
Values
linenumbers=1

offset

Option Required Default
offset no offset = 1
Description
This option only works when the linenumbers option is in effect. It controls the starting offset of the linenumbers presented. For example: offset=12 means that the linenumbering starts at linenumber 12 (See the sample at the top)
Values
offset={integer value}

hilite

Option Required Default
hilite no none
Description
This option only works when the linenumbers option is in effect. With this option you can hilite (emphasize) lines in the code presented. For example: hilite=12-14 means that the lines with offset 12 until 14 will be highlighted. (See the sample at the top). Please notice that the to be highlighted range has to be within the offset range (not the physical position of the line within the code.
Values
hilite=12-14,17,21-23

Code style

Prism.js is offering quite some tastes to present the code in the way you prefer. This plugin lets you choose your preferred style as well. This is done within the component settings that is applied to the layout or page.

By default the style used is coy which is as seen in the sample at the top of this page. To select another style and to use the linenumbers, highlight and keyword highlighter plugins the CodeStyle component (from this plugin) has to added to a the layout or page where source code presentation is going to be used.

Last update: Tue, 13 Sep 2022 14:32:15