WP-GeSHi-Highlight

WP-GeSHi-Highlight

A WordPress plugin for syntax highlighting

View demo page

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?

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.

  1. function wp_geshi_filter_and_replace_code_snippets() {
  2.     global $wp_query;
  3.     // Iterate over all posts in this query.
  4.     foreach ($wp_query->posts as $post) {
  5.         // Extract code snippets from the content. Replace them.
  6.         $post->post_content = wp_geshi_filter_replace_code($post->post_content);
  7.         if (is_single()) {
  8.             $comments_array = get_approved_comments($post->ID);
  9.             // Iterate over all approved comments belonging to this post.
  10.             // Filter them, too.
  11.             foreach ($comments_array as $comment) {
  12.                 $comment->comment_content = wp_geshi_filter_replace_code(
  13.                     $comment->comment_content);
  14.                 }
  15.             }
  16.         }
  17.     }

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 file filename.css exists in the plugin directory or in WordPress’ stylesheet_directory (takes precedence), it is used to style the code block. Hence, if you store another_style.css on your server, you can use it by setting cssfile="another_style".

    If you do not set this at all, wp-geshi-highlight.css styles 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.css in 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:

&lt;pre lang="html4strict" escaped="true"&gt;
hello!
&lt;/pre&gt;

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.

17 Pingbacks/Trackbacks

  • Pingback: 10 Best WordPress Syntax Highlighter Plugins - WPThorp()

  • Pingback: WordPress 代码高亮插件 WP-GeSHi-Highlight | 吴云葵的资讯分享()

  • Pingback: WordPress 代码高亮插件 WP-GeSHi-Highlight 免费下载 – 爱站窝()

  • Pingback: WordPress 代码高亮插件 WP-GeSHi-Highlight | 馒头博客-馒头博客()

  • Pingback: 给[督亢社]安装代码高亮插件WP-GeSHi-Highlight | 大燕督亢通讯社()

  • Pingback: 给[督亢社]安装代码高亮插件WP-GeSHi-Highlight | 督亢社()

  • Vicente

    Gracias por tu buen trabajo.
    Me ha servido mucho.

    Gracias.

    • http://gehrcke.de/ Jan-Philip Gehrcke

      Thanks for your feedback, seriously!

  • Andrey

    Hello! Tnx for your plugin!
    I try wrap

     output into shortcode like this
    
    function shortcode_code_func ($atts, $content = null) {
        extract(shortcode_atts(array(
            "lang"      => 'php'
        ), $atts));
        return "
    $content

    ";
    }
    add_shortcode("code", "shortcode_code_func");

    and paste it in visual editor

    [code lang="sql"]UPDATE `wp_users` SET `user_pass` = MD5('New_Password') WHERE `user_login` = 'Administrator'[/code]

    But the problem is your plugin run before the shortcode text will be replaced and tag

     not filtered your plugin.
    
    Search right place in the text editor is very difficult when a lot of code. So I try use shortcodes.
    • http://gehrcke.de/ Jan-Philip Gehrcke

      Did you precisely follow the usage instructions? I only see [code lang="sql"], which indicates wrong usage. Other than that, your questions is really not understandable. Can you try again, with proper formatting?

  • Andrey

    Hello Jan-Philip, I will try to ask my question again. So.
    When I use your plugin so

    UPDATE `wp_users` SET `user_pass` = MD5('New_Password') WHERE `user_login` = 'Administrator'


    it’s all right.

    But for convenience I want use shortcode to insert code into visual editor WP.
    It’s my little shortcode:

    function shortcode_code_func ($atts, $content = null) {
    extract(shortcode_atts(array(
    "lang" => 'php'
    ), $atts));
    return "

    $content

    ";
    }
    add_shortcode("code", "shortcode_code_func");

    But when I use it this don't work.

    [code lang="sql"]UPDATE `wp_users` SET `user_pass` = MD5('New_Password') WHERE `user_login` = 'Administrator'[/code]

    Your plugin run before the shortcode text will be replaced and tag
    PRE not filtered your plugin.

    • http://gehrcke.de/ Jan-Philip Gehrcke

      Hey, this looks like being a side effect of this plugin running very early as well as very late in the filter processing chain. I understand that what you try to achieve could be great, but I am quite sure that this requires changing the filter priorities. This, on the other hand, might subtly break this plugin in various scenarios, when combined with certain other plugins. That is, this could break backwards compatibility. Since your use case is not documented by WP-GeSHi-Highlight, users must not expect this to work. A corresponding change would not be a bug fix, but a new feature, possibly breaking other things. Hence, it would require a major version change. So you can not expect this to happen soon. How bad do you need that? Do you have other options?

  • woodle

    Hello Jan-Philip. Very nice PlugIn and thank you sharing it with us.
    But switching between plaintext and visual Editor make some Problems. It converts the Special signs (like & to &), and your engine did not recode it.
    Is there a solution for that?

    • http://gehrcke.de/ Jan-Philip Gehrcke

      Hey, thanks for asking. As documented, this plugin should only be used with the raw editor. The reason is that there is no clean solution for both having code blocks marked with pre tags and have them work across editor switches.