syntaxhighlighter-ng

Origin: https://git.la10cy.net/DeltaLima/flatpress-plugin-syntaxhighlighter-ng

Demo: https://deltalima.org/blog/index.php/syntaxhighlighter-ng-testpage/

based on the original FlatPress plugin syntaxhighlighter from 2005, updated in 2023 to prism.js

installation

Download the latest release and extract syntaxhighlighter-ng_v1.x.x.zip to your fp-plugins/ folder.

If you want to use git, use

$ git clone https://git.la10cy.net/DeltaLima/flatpress-plugin-syntaxhighlighter-ng.git /pathto/flatpress/fp-plugins/syntaxhighlighter/

codeblock with language syntax highlightning

When you just create an [code][/code] block, then there will be no syntax highlightning.

To enable it, you have to specify the language you want to get highlighted, for example:

[code=bash]
if [ "$1" == "bash" ] 
then
  echo "Yeah :)"
else 
  echo "something else"
fi
[/code]

See the https://prismjs.com/#supported-languages for all supported languages by the contained prism.full.js

The included prism.small.js just has the most popular I know:

Markup, HTML, XML,SVG, MathML, SSML, Atom, RSS, CSS, C-Linke, JavaScript
Apache, Bash, Batch, BBCode, C, C#, C++, CSV, Diff, Go, HTTP, ini, Java
JSON, Makefile, Markdown, nginx, Perl, PHP, PowerShell, Python, Ruby
Shell session, SQL, VB.Net, Wiki markup, YML

To use it (it is just 100KB instead of >500KB), you have look after <!-- start of prism.js footer --> in syntaxhighlighter/plugin.syntaxhighlighter.php and change the line

    <script type="text/javascript" src="{$pdir}res/prism.full.js"></script>

into

    <script type="text/javascript" src="{$pdir}res/prism.small.js"></script>

To change the theme, take your favorite from https://prismjs.com and place it into syntaxhighlighter/res/. Then look after the block <!-- start of prism.js header --> in syntaxhighlighter/plugin.syntaxhighlighter.php and change the following line:

<link rel="stylesheet" type="text/css" href="{$pdir}res/prism.okaidia.css" />

to

<link rel="stylesheet" type="text/css" href="{$pdir}res/prism.YOURTHEMENAME.css" />