A WordPress plugin for syntax highlighting
Highlights:
- Syntax highlighting for 240 languages.
- Lightweight and super-simple usage.
- Mobile-friendly: saves bandwidth and battery (no client-side code execution required, usually only one additional HTTP request). This is much better than using one of these heavy-scripted client-side solutions!
- High performance, with near-zero additional load on the back-end. And in combination with a caching solution, this does not affect your page load time at all.
- Line numbering (only if you want to). Code-number displacements never occur. Numbers are not copied in most browsers.
- I have tested the default style with more than 20 themes, including Twenty Ten to Fifteen!
- If you do not like the default style: just provide your on CSS file. Styles are highly & easily configurable.
- Per-block styles: each code block on a single web page can be designed on its own.
- Clean, small and valid HTML output. That’s super-important!
- Clean and well-documented source code, using modern WordPress API calls.
- Well-maintained since more than five years, and I’ll continue to provide support.
- This is based on GeSHi, a reliable and well-established PHP highlighting engine, used by popular forum softwares such as phpBB or wiki applications such as Dokuwiki or MediaWiki.
- Stability, performance and security are inherited from GeSHi. And I’ll continue to merge in upstream changes.
Contact:
jgehrcke@googlemail.com or please leave a comment below.
What do you want to do now?
- Download current version @ WordPress plugin page
- View examples
- Learn how to use WP-GeSHi-Highlight (usage reference)
- Apply your own styles
- Read FAQ
- View change log
- Visit SVN repository hosted by WordPress
Examples
Here, I’ll just provide three quick examples. For more examples, please visit the demo page.
What follows is a snippet of source code, displayed by WP-GeSHi-Highlight with its default style sheet.
function wp_geshi_filter_and_replace_code_snippets() {
global $wp_query;
// Iterate over all posts in this query.foreach ($wp_query->posts as $post) {
// Extract code snippets from the content. Replace them.$post->post_content = wp_geshi_filter_replace_code($post->post_content);
if (is_single()) {
$comments_array = get_approved_comments($post->ID);
// Iterate over all approved comments belonging to this post.// Filter them, too.foreach ($comments_array as $comment) {
$comment->comment_content = wp_geshi_filter_replace_code(
$comment->comment_content);
}}}}
The corresponding pre block is configured with the arguments lang="php" and line="1". The exterior block style (the borders, the shadows, etc.) is defined in the wp-geshi-highlight.css file.
Let us have a look at a different example. This time, the code block is configured with lang="bash" and we use a different block style, via the cssfile="another_style" argument:
$ dd if=/dev/zero of=image.ext3 bs=1M count=10000 oflag=append conv=notrunc
In this example, the WP-GeSHi-Highlight looks for another_style.css on the server and finds it. What follows is the content of another_style.css, using pure GeSHi styling, activated via lang="css" and cssfile="none" options:
.another_style { font-size: 12px; line-height: 13px; background-color: #EFEFF7; border-top: 1px solid silver; border-bottom: 1px solid silver; padding-left: 5px; }
What you see above is the default pre-style of my WordPress theme combined with the styling as produced by GeSHi.
Usage reference
Write your post or page in the raw HTML editor. The general syntax for highlighting your code using this plugin is
<pre arguments> [... CODE ...] </pre>
The required argument is:
lang="languagestring": allowed values are listed here.
Optional arguments are:
line="1": enables line numbering. Select the start number? See FAQ.-
cssfile="string": selects a CSS file to style this code block.
Allowed values:"none": all block styling is omitted. The code is still highlighted by GeSHi."filename": If the filefilename.cssexists in the plugin directory or in WordPress’ stylesheet_directory (takes precedence), it is used to style the code block. Hence, if you storeanother_style.csson your server, you can use it by settingcssfile="another_style".
If you do not set this at all,
wp-geshi-highlight.cssstyles your code block. escaped="true": the code is run through PHP’s htmlspecialchars_decode().
For examples of how these options work, make sure to have a look at the demo page!
How to apply your own styles
Permanently change the default style:
By default, wp-geshi-highlight.css from the plugin directory is inserted into the HTML head and defines the default code block style (in combination with your theme’s CSS code). You can permanently change the default code block style by placing your own wp-geshi-highlight.css in WordPress’ stylesheet_directory, which is your (child) theme’s style directory. If WP-GeSHi-Highlight finds it there, it takes precedence and is inserted into the HTML head instead of the default file. Such a custom style file survives WP-GeSHi-Highlight updates!
Apply different styles to certain code blocks:
Provide your own CSS file and use the cssfile option. Consider, for example, cssfile="another_style". This will make two things happen:
-
WP-GeSHi-Highlight puts the following structure around the HTML code generated by GeSHi:
<div class="another_style-wrap5"> <div class="another_style-wrap4"> <div class="another_style-wrap3"> <div class="another_style-wrap2"> <div class="another_style-wrap"> <div class="another_style"> HTML code generated by GeSHi </div> </div> </div> </div> </div> </div>
As you can see, the names of the six CSS classes depend on the value given to
cssfile.
- WP-GeSHi-Highlight looks for
another_style.cssin WP-GeSHi-Highlight’s plugin directory as well as in WordPress’ stylesheet_directory. If it is found, it is included in the HTML header of your website (whereas the style sheet directory takes precedence over the plugin directory).
Hence, you have plenty of room to style your code block within another_style.css, using the six different CSS classes.
FAQ
Can I change the starting line number?
Yes, try e.g. line="13". But this breaks XHTML strict compliance.
How can I use the pre and other HTML tags in my code?
Make use of HTML escape sequences and the escaped option. Write the code like that:
<pre lang="html4strict" escaped="true"> hello! </pre>
It will end up like:
<pre lang="html4strict" escaped="true"> hello! </pre>
Note that the only difference between both code blocks is that in the upper one I did not use escaped="true" in order to demonstrate what you actually have to type.
Leave a Reply