Escaping problem with WP-Syntax WordPress plugin

Date October 30, 2007

When I started this blog I had spent some time finding a syntax highlighter plug-in for the code snippets presented in the posts. I went to wordpress.org and I tried out some of the plug-ins, but I had some problems with all of them. After a few hours I found the WP-Syntax plug-in. I had had already some positive experience with the GeSHi (Generic Syntax Highlighter) library, and I liked the demo on the EmacsBlog so I thought this is what I wanted.

I tried it out and I noticed that it doesn’t look as fancy as in the demo page. After a fast search I found that I need the following CSS addition:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
.wp_syntax {
    color: #100;
    background-color: #f9f9f9;
    border: 1px solid silver;
    margin: 0 0 1.5em 0;
    overflow: auto;
}

/* IE FIX */
.wp_syntax {
    overflow-x: auto;
    overflow-y: hidden;
    padding-bottom: expression(this.scrollWidth > this.offsetWidth ? 15 : 0);
    width: 100%;
}

.wp_syntax table {
    border-collapse: collapse;
}

.wp_syntax div, .wp_syntax td {
    vertical-align: top;
    padding: 2px 4px;
}

.wp_syntax .line_numbers {
    text-align: right;
    background-color: #def;
    color: gray;
    overflow: visible;
}

/* potential overrides for other styles */
.wp_syntax pre {
    margin: 0;
    width: auto;
    float: none;
    clear: none;
    overflow: visible;
}

I added it to theme’s CSS, and I was happy. I started to finish my first post, but I noticed a very annoying behavior of the plug-in. The sample code contained “>” character, but in the post appeared “>”. I was a little disappointed, but I thought it will be easy to find the source of the problem.

First I looked into the source of the highlighter plug-in, and observed that GeSHi converts the HTML special chars to HTML entities with its own hcs() function. GeSHi could not be asked not to do this conversion, so I had to modify the plug-in a little:

79
80
//$geshi = new GeSHi($code, $language);
$geshi = new GeSHi(htmlspecialchars_decode($code), $language);

Unfortunately the server where this blog runs has PHP older than 5.1, so I had to create my own version of htmlspecialchars_decode(), so I add this code to the plug-in too:

63
64
65
66
67
if (!function_exists("htmlspecialchars_decode")) {
    function htmlspecialchars_decode($string, $quote_style = ENT_COMPAT) {
        return strtr($string, array_flip(get_html_translation_table(HTML_SPECIALCHARS, $quote_style)));
    }
}

This little hack solved my problem, I hope it could be useful for others too.

22 Responses to “Escaping problem with WP-Syntax WordPress plugin”

  1. Posting source code in WordPress: escaping and syntax highlighting the inserted code | Gergely Hodicska said:

    [...] have already mentioned that I had difficulty in finding a suitable solution to post source code in my blog. However the [...]

  2. My new WordPress MU Site » Wordpress Tip: Stop Wordpress from stripping markup in your posts said:

    [...] a thanks goes out to Gergely Hodicska for the post, and fix, for escaping characters. Works like a [...]

  3. WP-Syntax - WordPress Plugin - zxblog.laullon.com said:

    [...] via: http://blog.felho.hu/escaping-problem-with-wp-syntax-wordpress-plugin.html [...]

  4. Beny said:

    Hi, I’ve a problem with wp-syntax. It’s about CSS. When i try to make a code, it’s going out over the area. I used firefox problem. I see your syntax not like that. What i should edit with CSS file? see this Screenshot

  5. Fixing escaping problems in WP-Syntax » Tim Showers - Web Development, Design, and Data Visualization» Blog Archive said:

    [...] Gergely Hodicska has a solution on his [...]

  6. Mihai Bojin said:

    Hi,
    I had the same problem and solved it after reading this post.
    Thank you for sharing !

    I think there are other problems with the wp-syntax plugin but I did not have time to investigate yet. I saw that sometimes it converts newline chars to [br].

    I will let you know if I solve other problems.

    Thanks,
    Mihai Bojin

  7. X-Blog » Blog Archive » WP-Syntax does not display html special characters correctly said:

    [...] http://blog.felho.hu/escaping-problem-with-wp-syntax-wordpress-plugin.html [...]

  8. moos said:

    thanks. just what i needed

  9. auta ze szwecji said:

    Very interesting article, i bookmarked your blog
    Best regards

  10. vinita said:

    hi , I just stopped by in search of wp_syntax. Do you have any solution to make code highlighter box smaller. The reason I am using custom developed have left and right hand menu, and it seems this goes down.

  11. Dan said:

    Thanks for this. I found this page when searching for a solution to this wp-syntax problem.

  12. Daniel Rodriguez said:

    You are a god! :D . Thanks for this little hack.

  13. Fixing wp-syntax said:

    [...] few lines (1 if you server uses php 5.1) and the problems is solved. Here is a link to the answer. I test it and it’s working [...]

  14. New Adventures in Software » Fixing WP-Syntax said:

    [...] problem previously.  It turns out that I had modified the PHP source for the WP-Syntax plugin (as described here).  I simply had to make the same change for the new version.  I’m ignorant as to why [...]

  15. Ryan McGeary said:

    For the benefit of future visitors to this page, v0.9.2 of WP-Syntax now supports a new “escaped” attribute that you can use to declare that the code is already escaped. See Example 4 on this page: http://wordpress.org/extend/plugins/wp-syntax/other_notes/

  16. Steven Vachon said:

    I can’t believe WP-Syntax hasn’t been updated to fix this annoyance. Ah well, thanks! Helped me out a lot

  17. Eric Dugas said:

    Thanks for posting this – for the next person that stumbles upon it – setting escaped=”true” in the later versions accomplishes the same.

  18. Problema di escape nel plugin WP-Syntax per Wordpress « Massimo Zappino said:

    [...] http://blog.felho.hu/escaping-problem-with-wp-syntax-wordpress-plugin.html Tag: escape, plugin, Wordpress Lascia un commento Commenti (0) Trackback (0) (iscriviti ai [...]

  19. MySQL Datenbank nach UTF8 konvertieren | tams Webseiten said:

    [...] WordPress Plugin WP-Syntax benutzt und Probleme mit den HTML special chars hat, sollte unbedingt hier mal reinschauen. KategorienComputer, Wordpress Tags: Software Kommentare (0) Trackbacks [...]

  20. x200 said:

    Thanks! Saved my life (:

  21. Brett said:

    Thanks! This helped big time.

  22. Utkarsh said:

    :D awesome! finally… a half decent syntax highlighting system on my wp installation :x

Leave a Reply

XHTML: You can use these tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>