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).

PHP:

(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.

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

34 comments

Comment from: Tara C
Handy! I'm SO down with this plugin.

The line numbers are especially nice. What if line #3 was long though? Would it wrap and retain the number 3 or be turned into #s 3 and 4?
 
07/14/06 @ 14:13
Comment from: stk
Dear Kooky Kitty,

Have a look at item #9 on the list. ;) (It handles it like you first suggest ... wraps and retains line #3).

Glad you like the plug-in and thanks for writing to say so.
 
07/14/06 @ 14:21
Comment from: Topanga
A suggestion for a future release (at least, I didn't see it in the version on my computer)
-> put the amcode-tags in the toolbar. So you don't have to remember them....ee
 
07/15/06 @ 13:47
I'll have a play and see if it can be automagically added to the quicktags toolbar. It's a tad much to have it on a toolbar all of it's own.

¥
 
07/16/06 @ 09:37
Comment from: stk
Topanga,

Great idea and since the "AM Display Code" is "AM Updates"-enabled, it means we can make the changes you suggest and you can get the new, upgraded and enhanced version right from your own back office!!

Note to self: If we don't have a post about AM Updates and how it works ... we should make one!

It's an awesome tool and only from the folks at AstonishMe!!
 
07/16/06 @ 15:57
Comment from: Tamim
This plugin totally rocks and is exactly what I was looking for. And it even adds line number - gorgeous! Thank you!
 
08/13/06 @ 04:47
Thanks, glad you like it :D

¥
 
08/13/06 @ 10:27
Hey, got a problem with lines that are really long and do not have a seperator in them.

You can see the result here;
http://blogs.balupton.com/index.php?title=pimped_my_myspace&more=1&c=1&tb=1&pb=1

And i think it would be better if there was a button with 'link' 'strong' 'em' etc, that was 'amcode' which wraps the code in whatever.

So yeh, that post is causing quite a display issue on my crappy blog.

So get to work Yabba and i'll hug you like a bear.
 
08/17/06 @ 19:39
Oh and on my local install getting this;
Warning: Call-time pass-by-reference has been deprecated - argument passed by value; If you would like to pass it by reference, modify the declaration of [runtime function name](). If you would like to enable call-time pass-by-reference, you can set allow_call_time_pass_reference to true in your INI file. However, future versions may not support this any longer. in D:\Files\Documents\Site\Dev\b2evolution\blogs\plugins\am_code_plugin\_am_code.plugin.php on line 83
 
08/17/06 @ 19:46
Hi Balupton,
Damn, amazing how problems always come along when you have the least free time available :P

I need to do a tad of an overhaul on the plugin anyway so hopefully all this will be cured at the same time ;)

¥
 
08/18/06 @ 07:56
Comment from: Slamp
Got the same error as balupton :-(
 
08/23/06 @ 18:15
Damn, I finally got a chance to work on this.

Ok, I've made a few minor changes to the plugin, one of which was to clear your error Balupton, another was to correct some of my naff maths :p

I've updated the zip with the new version, if you still have any problems with it just let me know and I'll work on them

¥
 
08/25/06 @ 08:38
Comment from: Tom
I am making an H-T-M-L tutorial, and so I could not post the tutorial in my blog until now. But I was wondering if there was a way so that there is no style to the text wraped in amcode tags. (No scrolling, no background color, no line numbering ect)
 
08/26/06 @ 00:19
Comment from: stk
LOL ... go figure ... we put all this time styling the thing, adding alternating colors, line numbers that don't get carried on a cut'n-paste ... and some joker wants NO STYLING AT ALL. :P

Tom,

No problem. You'll need to monkey with the CSS to remove the styling elements you want. For the line numbers, off the top of my head, I think they're done in the CSS as well, so you can just put {display:none} for that selector.

It's untested, but I would imagine that you could style it so it didn't stand out from regular page text hardly at all.

-stk
 
08/26/06 @ 03:49
Comment from: Tom
oh silly me I was looking for a stylesheet, but it was in the php document thanks for the help.
 
08/26/06 @ 21:26
Comment from: Xushi
Good plugin! exactly what i need, except for 1 thing (and i ask...)

How is it possible to remove the horizontal lines between the code inside the box? So the end result is similar to rafb.net or pastebin, where you have the numbers on the left, seperated by a long vertical line, and then the code on the right, without any horizontal lines between the code?

Thanks, and keep up the good work.
 
09/10/06 @ 17:08
Comment from: stk
In the install instructions, look at step #3 (Styling Customization).

All you need to do is edit the _am_code_plugin.php file. All the CSS, which is automatically injected into the HTML, can be found inside that file (look for the line that echo's [style type="text/css"]) ... all the CSS starts here.

I believe that the bit that adds the lines is the .pre td selector. Just change the "border:1px solid #999" to something to your liking. (e.g., "border:none" or "border-right:1px solid #999; border-left:1px solid #999;")

Hope this helps.

-stk
 
09/11/06 @ 00:43
Looks a great plugin, but the link for downloading it comes back with "invaid file request".
 
11/23/06 @ 02:44
Hi Mark,
Try the download again as it should be working now. If you still have problems just let us know and we'll email you the zip

¥
 
11/23/06 @ 07:36
Wonderful - I have it! Thanks so much.
 
11/24/06 @ 00:58
Comment from: John
For what it's worth, I just upgraded to 1.9.0 Beta and this great plugin had to be deleted due to the sheer amount of errors it generated.
 
11/28/06 @ 10:18
Hi John,
What errors? I'm running 1.9.beta ( http://waffleson.co.uk ) and haven't seen any errors yet?

¥
 
11/28/06 @ 10:20
Comment from: John
Hi ¥åßßå

I posted a reply to this with the current errors via the Message system on the B2 forum
 
11/28/06 @ 13:15
Hi John,
replied to your pm ;)

¥
 
11/28/06 @ 13:25
Hey, just got the latest version, and theres still some display issues here and there, like with really long lines inside the code.
I've fixed them up and you can get it here;
http://packages.balupton.com/b2evolution/plugins/am_code_plugin_v1.0.2.zip
 
02/03/07 @ 10:09
Thanks Balupton, but I'm already in the middle of a recode for this for 1.9.2 to allow code in comments as well ( it still has a fair few flaws ).

I'd rather wait until it's finished to see if it still has the same display bugs and then correct them.

Remind me to send you a copy of it when it's finished so you can see if it's still buggered :p

¥
 
02/03/07 @ 12:29
Ok, well i've just saved you some work, i've cleaned up a lot of the code, made it use lazy rendering (so it only renders for posts that use it), and some other stuff. All you need to do is plug in your comment stuff.
http://packages.balupton.com/b2evolution/plugins/am_code_plugin_v1.1.0.zip
 
02/04/07 @ 01:49
Lol, I could have saved you some work, the next version is pretty much a total recode of the original ;)

In the case of this plugin it doesn't make that much difference if it's "lazy" or "stealth" as it hooks into the SessionLoaded event.

You might like to note that we allow <a> in our comments, so you can actually make your links a real link ;)

¥
 
02/04/07 @ 08:03
Yeah but if it's stealth then it's always renders... That's evil ;)

And maybe you should also allow for autolinks ;)
 
02/06/07 @ 02:15
Hi, I am assuming I'm doing something wrong here :-) I am new to b2evolution just installed it in fact b2evolution-2.4.2-stable-2008-04-27. On Ubuntu Hardy Server, apache2 php5 and Mysql 5. The install goes without a hitch I log in the first time go to the admin screen change the password for admin. Then install the Code Highlight plugin that's already there. That appears to be ok. I type in some code including the tags amcode and /amcode tags. When I click save I get a warning about

* Illegal tag: amcode
* (Note: To get rid of the above validation warnings, you can deactivate unwanted validation rules in your Group settings.)
* Invalid content.


The content will not save until I turn off the XHTML validation which seems wrong. When I turn that off the text saves but the plugin is not rendering the tags. I uninstalled it and then tried downloading the version on these pages that fails to even install says there is a problem with ID # 11. This stops tb2evolution working at all.

I have read the docs on http://manual.b2evolution.net/Main_Page about installing and the after install configuration. Nothing appears in the Apache logs. Not sure where else to look or how to fix this. Kinda fell at the first fence :-(. Get the message cannot post ilegal amcode :-)
Richard
 
07/04/08 @ 19:40
Hi Richard,

The code highlighter that ships with the core is the big brother of this one and works in a slightly different way. Instead of
<amcode>---- your code ----</amcode>

you now use

[ codeblock line="##" lang="php"]----your code---[/codeblock]
where ## is the line number you want the code to be numbered from ( 1 is default ) and lang can be any of php / xml / code / css ( not sure if css is in current version, but certainly in the pipeline ).

If you visit admin > profile you'll see a setting for showing the plugins toolbar ( on expert tab when writing a post ) which makes things a lot easier.

¥
 
07/05/08 @ 08:11
I must admit I had a look a the code in the end, and worked that out. DOH! I should have done that first. Then I ran into another problem with non abdin users not being able to use HREF in <A> tags go figure. Same user flagged as admin can post said <A href=" ... .

With the above in mind was the change from < > to [ ] tags for a reason or a bug. As the original tag type only seem to work for admin users now.

Thanks anyway.
Richard.
 
07/06/08 @ 17:14
The change in < to [ was made when the plugin got moved into the core, the FG wasn't happy using an "illegal" html tag.

Somewhere in your profile, or the plugins settings, you should see a setting for displaying its toolbar ( only shows on "expert" write screen ), it should have a button for each language it can handle

¥
 
07/07/08 @ 10:53
how about some python syntax highlighting? no?
 
12/31/08 @ 17:39

Comments are closed for this post.

 

B.O.P.I.T