How to use GeSHi for syntax highlighting with WordPress and DokuWiki

Posted 2013-05-01 · Updated 2019-03-13

This post describes how one can use GeSHi for syntax highlighting with WordPress and DokuWiki:

WordPress

Install the WordPress plug-in “WP-GeSHi-Highlight”.
Check if GeSHi has been set to use a CSS file instead of inline styles.
It’s already the default for “WP-GeSHi-Highlight”.
If in doubt, search in /wp-content/plugins/wp-geshi-highlight/wp-geshi-highlight.php for $geshi->enable_classes().
Applying your own style:

By default, the wp-geshi-highlight.css in the plugin directory is inserted in the HTML head. You can permanently change the default code block style by placing your own wp-geshi-highlight.css in WordPress’ stylesheet_directory (which usually is the theme style directory). If WP-GeSHi-Highlight finds it there, it takes precedence and is inserted into the HTML head instead of the default file. Obviously, such custom styling survives WP-GeSHi-Highlight updates.
— From gehrcke.de

Copy the file wp-geshi-highlight.css to site/wp-content/themes/theme/.
You could then add/change the styles in your theme’s wp-geshi-highlight.css.
Copy the language file and rename it (to prevent it being overwritten on the next update of the plug-in), then modify it and use that one for the lang="foo" setting.

Use <pre lang="<em>language</em>" line="1">...</pre> for a source code block.

Check if GeSHi has been set to use a CSS file instead of inline styles.
It’s been already the default in “DokuWiki” for a while it seems: https://bugs.dokuwiki.org/index.php?do=details&task_id=167
If in doubt, search in site/wiki/inc/parserutils.php for $geshi->enable_classes().
Configure the global color and style. Look in /wiki/lib/styles/screen.css for this:
```
/* syntax highlighting code */
.code .br0  { color: #66cc66; }
[...]
```

Feedback: comment@saoe.net · Categories: How To · Tags: EN, GeSHi, WordPress