Convert Content of Pre-Tags in HTML-Code

There are two different ways to display a source code instead of executing a source code in a post or page. Depending on preferences which HTML tag is defined in the style sheet and provided with formatting, code fragments are either declared by <code> or <pre>. In some cases, combining the blogger even both tags.

Conversion of special characters

If you want to use the pre Tag, then you have to take care that the code snippets, while parsing, are not executable. HTML-Entity is the solution.

Two options are available: One, manually, such as search and replace before pasting into the editor (HTML-Entities-table). but if you are smart you let WordPress doing the job.

Numerous methods for the simple conversion of the code set between pre-and/or code tags are on the web. But there is one for the direct use in WordPress, which takes over to convert the characters perfectly since WordPress 2.8.

//PHP-Code for functions.php

function pre_esc_html($content) {
  return preg_replace_callback(
    '#(<pre.*?>)(.*?)(</pre>)#imsu',
    create_function(
      '$i',
      'return $i[1].esc_html($i[2]).$i[3];'
    ),
    $content
  );
}

add_filter(
  'the_content',
  'pre_esc_html'
);

Useful links

Guest Post

This post is written by Sergej Müller wpseo.org, who created the popular WordPress Plugin to optimize your SEO.

Thank you very much from our part to Sergej.

If you also like to have your interesting post published on our website, please let us know on our contact page. Of course we will appreciate your contribution!


Posted

in

by

Comments

8 responses to “Convert Content of Pre-Tags in HTML-Code”

  1. Rilwis Avatar

    Very nice solution. Using a anonymous function in this case and built-in function of WordPress for escaping characters is very creative. Thanks for the post.

  2. scribu Avatar

    If I’m not mistaken, each time you call the_content(), a new annonymous function will be created.

    You should make a proper helper function; it would run faster anyway.

  3. Frank Avatar

    @scribu: you have right, i think – the filter is always usefull, when it give code in the post. This here is only an example.

  4. Viper007Bond Avatar

    The only problem with this is it won’t work on WPMU or with low-level roles (contributor, etc.) due to kses.

    I know I’m biased (as I wrote the plugin), but I recommend using a plugin. 🙂

  5. Frank Avatar

    @Viper007Bond: No, i think the problem with this function is the code inside the content of a post. Waht is, when deactivate the function or a plugin, maybe yours. When you use and automaticly parser via add_filter(), then is this a problem on rat sites for performance. I think, it is better when i copy the code as mask code, this is never a problem and you can change plugins and themes. The blog ist not dependet from the function or a plugin.

  6. […] Convert Content of Pre-Tags in HTML-Code […]

  7. […] here to stay. Adapt!WordPress security monitoring and diagnosisWhat is the best IDE for WordPress?Convert Content of Pre-Tags in HTML-CodeTechnologyScientists Question Safety of New Airport ScannersWeb Browsers Leave […]

  8. amir Avatar
    amir

    I don’t indreatand…

    Can you please explain it easier…

    thanx… by the way i like this site