Display Code Plugin

30th Dec 2005 stk

Installing the "Display Code Plugin".

Step 1 - Download: Select, below, the file that matches the version of b2evolution you have installed.

"Summer" v1.8 (zip file)

Step 2 -Install: Upload the am_code_plugin folder to your b2evolution /plugins folder, on your host server. Once the folder has been transferred, the installation is an easy, one-button affair. Log into your b2evolution administration panel (AKA "back office") and go to Settings -> Plug-ins. You should see "AM Code" on the list of available plug-ins. Simply click "install". It's that easy.

That's it! The plug-in is installed! We'd recommend you test it, by skipping on to the next section, about usage, saving the styling for later. However, if you can't wait to change colors and such, then carry on here.

Step 3 - Styling Customization: The plugin styling is done via CSS, which is automaticlly inserted in the <head> section of your HTML, each time the page is called. (To see it, you can edit the "_am_code.plugin.php" file or view the page source from your browser).

To make color changes, we recommend overriding the default CSS by adding the following to your skin's CSS file. You can play with the colors till you find a combination that matches your site.

PHP:

/* Font & Line Colors */
.codeodd background:#dfdfff; color:#336; }
.codeevenbackground:#e6e6ff; color:#336; }

Making color changes to the line numbers is more involved. The line numbers are graphically generated and stored in a single image file, which is innovatively positioned using CSS. If you want to change the font or colors, you'll need to either create your own image file, or modify the existing one. (The file can be found in "/plugins/_am_code_plugin/img" and is called "numbers.gif".)

You're on your own for editing this file, but here's some information:

  • Number colors - the file is a 256-color GIF file, so you'll can easily change the pixel colors using a program like MS Paint.
  • Number fonts - we'd recommend keeping the image size and pixel-height for the numbers the same, otherwise you'll have to spend some time monkeying with the image offsets in the CSS file.

The easiest way to deploy your customized "numbers.gif" file is to create (if you don't already have) an "img" subfolder for your skin and placing your new "numbers.gif" file (keep the name the same), inside it. The plugin will automatically pick up this file and use it (if it exists).

Alternatively, you can name the file whatever you want and place it wherever you want, by modifying the "url(img/numbers.gif)" in the CSS. Similarly, you have access to more advanced styling changes, via the CSS in the PHP file, but you're on your own, as the styling bus stops here.

The next section covers the basics and some more advanced usage of the plugin.

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