WP-GeSHi-Highlight
A WordPress plugin by Jan-Philip Gehrcke, featuring:
- Syntax highlighting for many languages (based on GeSHi).
- Stability, performance and security inherited from GeSHi.
- Line numbering (optional). Code-number displacements never occur. Numbers are not copied in most browsers.
- Simple usage.
- If desired, styles are highly & easily configurable.
- Per-block styles: each code block on a single web page can be designed on its own.
- High performance.
- Clean, small and valid HTML output.
- Clean and well-documented source code.
Contact:
jgehrcke@googlemail.com or leave a comment below.
What do you want to do?
- Download current version @ WordPress plugin page
- View examples
- Learn how to use WP-GeSHi-Highlight
- Apply your own styles
- Read FAQ
- See changelog
- Visit SVN repository hosted by WordPress
Examples
What follows is a snippet of the source code of this plugin. The code block is configured with lang="php" and line="1". The block is styled by the default style file wp-geshi-highlight.css:
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);
}}}}
Let us have a look at a line from a shell script. In this case, the code block is configured with lang="bash". This time, we use a different style, via cssfile="another_style":
$ 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; }
I have tested these examples on Linux systems as well as on Windows 7 on Firefox 3.6 to 18, Internet Explorer 8&9, Chrome 6 to 23, and Opera. Please let me know if you encounter any problems, especially with the default CSS style.
General usage
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().
How to apply your own styles
Permanently change the default style:
By default, wp-geshi-highlight.css from the plugin directory is inserted in the HTML head (via HTML link tag) and defines the default code block style. 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.
Apply different styles to different 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 stylesheet 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.
Pingback: My first WordPress plugin: WP-GeSHi-Highlight | gehrcke.de
Pingback: WP-GeSHi-Highlight -- syntax highlighting with clean, small and valid (X)HTML review, discussions, does it work, and ratings on Loadwp.com | Loadwp.com
Pingback: Kolorowanie składni » Paweł Mazur
Pingback: Wordpress: Sourcecode im Blogpost darstellen | BYTEBRAIN.DE | Tech Blog
Pingback: Wordpress GeSHi plugin optimization and modification. - no title
Pingback: WP-GeSHi-Highlight — syntax highlighting with clean, small and valid (X)HTML | Best Plugins - wordpress – widgets – plugin 2012
Pingback: Notes on using GeSHi for syntax highlighting with WordPress and DokuWiki | Nifty Oddity