Display Code Plugin

30th Dec 2005 stk
Introduction & Example

At Last: <Tags> Not &lt;Tags&gt;

If you have tried posting XHMTL, PHP, CSS or other code into a blog entry, then you'll appreciate the "Display Code" plugin. It provides an easy-to-use, functional and good-looking way of inserting code directly into a post. The best part? Code characters are converted to entity values on-the-fly! The code in your post will always look identical to the code in your original script!

No longer do you need to pre-process code using 3rd-party scripts like Simple Code. They had their place, but now the conversion engine is built into b2evolution, via this remarkable plugin. The plugin also adds line-numbers and alternating line colors, which can be customized to suit your site, via CSS styling. Plus, the code you enter is "real code", both when you enter it and when you edit it! (You no longer have to wade through entity values when you need to modify a line). :D

Demonstration & Benefits

The features of this Astonish Me! "display code" plugin are listed below (in a code-like demonstration of the plugin).


(1Fontscolors and numbers are styled via CSS (customizable).
(2Line numbers are deployed as background-imageswhich means:
    aVisitors can cut'n-paste code from your site.
    b) Line numbers stay where they belong, on your site.
(3) Works in both fixed-width & liquid layouts.  
(4) Code is rendered as entity values "on-the-fly", which means:
    a) No pre-processing required, paste code into post - EASY!
    b) Code is "real code" (not entity values) ALL THE TIME.
    c) Makes it easy to modify the code in a post.
(5) White-space is preserved.
(6) It's easy to deploy and easy to use.
(7It's XHTML(strict) and CSS 2.0 valid.
(8) It "auto-senses" code block length. 
    a) Over 26 lines?  --> vertical scroll bar is applied.
    b) Under 26 lines? --> no vertical scroll (like here).
(9) If the line is too long ... it wraps automatically.
    a) When visitors cut'n-pasteline returns are preserved.
(10Codedtested and styled for both Mozilla and IE browsers.
(11BB-Code stylingsuch as <strong>BOLD</strong>, <span style="color:blue"><strong>COLOR</strong></span> & <span style="color:#000"><em>ITALICS</em></spanmay be applied.
    a) <span style="background-color:#ff9">(Including highlighting capability)</span>
    bBBcode can be used, as normalin the post.
(12No accidental conversion of smilies ;)
    aSmilies can be used, as normalin the post.

Designed for b2evolution "Summer" v1.8 or higher.

If you display computer code on your site, then you'll want this Astonish Me! "Display Code" plugin. Read on for intallation, usage and other documentation.

  1. Introduction & Example
  2. [v1.8] Install Instructions
  3. Using the Plug-in
  4. FAQS & Enhancements