Updated Syntaxhighlighter

Update #1: hmmmm, stupid but I write these post sometimes weeks ahead…. and this one caught up on me… The new version of SyntaxHighlighter Evolved has ActionScript support.. πŸ™‚
Update #2: I could remove everything below, but I’m keeping this here, perhaps someone can use it…. and it took some time to write, so I really can’t kill my darlings.

A little change I made to the new updated plugin:
find the plugin-folder “syntaxhighlighter” and add the next line to “syntaxhighlighter.php”
[as highlight=”1,3″]
‘as’ => ‘as3’,
‘as3’ => ‘as3’,
‘actionscript’ => ‘as3’,
‘actionscript3’ => ‘as3’,
[/as]
and find in the plugin-folder “syntaxhighlighter”, the folder “scripts” and change the next line to “shBrushAS3.js”
[as wrapper=”true”]
// SyntaxHighlighter.brushes.AS3.aliases = [‘actionscript3’, ‘as3’]; // old line and the bottom of the .js file
SyntaxHighlighter.brushes.AS3.aliases = [‘actionscript3′,’actionscript’, ‘as3’, ‘as’]; // new line
[/as]

the new syntaxhighlighter only uses “as3” and “actionscript3“, and I just changed all my post to “as

Update #3: and update the css, that made the code not wrap….
I removed “white-space: pre;” form “code” and now it wraps:

code  { font-family: "Courier New", Courier, monospace; font-size: 1.2em; /*white-space: pre;*/ color: Gray; }

Today I updated my SyntaxHighlighter JavaScript package by Alex Gorbatchev and it was not easy…

I have a syntax highlighter installed on my blog to show my ActionScript source code in a nice way.
But the first time I installed it, I choose a WordPress plugin which isn’t add to WordPress Plugin Directoryand doesn’t appear to be update.
And if I remember correctly, it didn’t work as it should and I had to add ActionScript. Read my previous decision here.
So I had to upgrade to SyntaxHighlighter Evolved which of course came with some upgrading issues created by my previous install.

First problem: write ActionScript.
ActionScript is not default included in the Syntaxhighter, and you will be advised to use [ javascript ] tag, which is a good advice since AS is almost javascript. It would make your live easier if you choose this option.
But as in my last installment of syntaxhighlighter I want to use Actionscript highlighting.
So there we go:
To do that you need an Actionscript brush. I found two of them: cptloadtest.com has one but it looks like its more for AS2,
and yourpalmark.com which is also the one I choose, because I used his version also with my previous installment and it’s for AS3.

This is what you need to do: install SyntaxHighlighter and if you choose to use [ javascript ]
your done. I was not done yet, so lets continue… Download the shBrushAS3.zip, extract and place the shBrushAS3.js in the correct folder on the server (in my case .../wp-content/plugins/syntaxhighlighter/syntaxhighlighter/scripts). Now you need to change some code in the WordPress plugin:
You can do this in WordPress itself if you have writing permission set, or you can edit the php file on your desktop…
you need to add the highlighted code

// Register brush scripts
wp_register_script( 'syntaxhighlighter-core', plugins_url('syntaxhighlighter/syntaxhighlighter/scripts/shCore.js'), array(), $this->agshver );
wp_register_script( 'syntaxhighlighter-brush-actionscript3', plugins_url('syntaxhighlighter/syntaxhighlighter/scripts/shBrushAS3.js'), array('syntaxhighlighter-core'), $this->agshver);

and

// Create list of brush aliases and map them to their real brushes
$this->brushes = apply_filters( 'syntaxhighlighter_brushes', array(
	'as'       => 'actionscript3',
	'as2'       => 'actionscript3',
	'as3'       => 'actionscript3',
	'actionscript'       => 'actionscript3',
	'bash'       => 'bash',

and now you are ready to go.

I had to change some other stuff ([ source:as ]...[ /source ] into [ as ]...[ /as ] ) and it seems that my css is not playing nice with syntaxhighlighter. hmmmm this is more work then I thought it would be.

I had to deactivate one plugin: autoescape , it didn’t play nice with SyntaxHightlighter. I didn’t use it anymore, and the combination generated gibberish.

Headers broken again: sIFR update

My Flash rendered headers didn’t work after my host transferred my site to another server.
Well in retrospect it’s easy to blame it on the host (sorry guys), but the fault was/is simpler.

I had this problem before : firefox and sifr dont play nice, and just as last time I blamed the wrong person again: not my host but the new Flash Player version 10 killed my sIFR headers…

That would explain why I see my headers at home but not at my work (I didn’t upgrade to Flash Player 10 at home).

The solution is very simple: visit http://novemberborn.net/sifr/2.0.7 and download the latest version of sifr (2.0.7).

Find your sIFR javascript file and check if it’s 2.0.5 or higher:

If you are upgrading from sIFR 2.0.5 or 2.0.6, you must upgrade the sifr.js JavaScript file.

and overwrite it…

And that’s it.
So do you recognize this situation: update the Flash Player recently/ your sIFR headers work on one computer but not on another/ sIFR works in IE and not in Firefox (or the other way around)/ Flash headers are now html headers …. update your sIFR!

For the people that don’t know sIFR:

sIFR is meant to replace short passages of plain browser text with text rendered in your typeface of choice, regardless of whether or not your users have that font installed on their systems. It accomplishes this by using a combination of JavaScript, CSS, and Flash, which renders the font. It degrades gracefully if Flash is not present. sIFR 3 is open source and licensed under the CC-GNU LGPL.

And I use the WordPress plugin CG-FlashyTitles.

ActionScript syntax highlighting

I wanted an easy way to present my ActionScript code on my blog.

The easiest way is to use the code button in WordPress and CSS.
I’ve used this in combination with the pre tag
But that’s doesn’t show nice code highlighting or line numbers…

Syntax highlighting is a feature of some text editors that displays text “especially source code” in different colors and fonts according to the category of terms.

I found out that there are two (probably more, but these two are the ones I tested) methods:
code highlighting server sided (PHP) or client sided (javascript)

Server sided

The first WordPress highlight plugin is: iG:Syntax Hiliter which is based upon GeSHi.

GeSHi – Generic Syntax Highlighter for PHP. Used to highlight almost any code for the web. Nearly 100 supported languages: PHP, HTML, C and more. Styles can be changed on the fly and CSS classes can be used to reduce the amount of XHTML compliant output.

Because the code highlighting is done on the server it’s really quick.
The install was very easy and it’s very easy to use: [as] place your code here [/as] (this is the code you use for ActionScript, read the manual included in the zip for other languages)

Pro: serversided so the code highlighting is done almost at once, a lot of programming languages that can be highlighted, easy to use in WordPress
Con: extra pressure on the server?, no copy to clipboard, not sure how up-to-date the plugin is (it works very good, but the last post about the plugin is from 2006, although the writer of the plugin replies to recent comments), I’m not very fond of the default CSS (but that can be modified). no button in the WordPress wysiwyg/html editor

Client sided

The second plugin is: syntaxhighlighter written by Erik Range, this plugin is based upon dp.SyntaxHighlighter from Alex Gorbatchev.

The plugin that I installed is removed, but there is a new one:http://wordpress.org/extend/plugins/syntaxhighlighter/. This one is in the WordPress plugin directory, so it’s easy to install. I haven’t tested this one

syntaxhighlighter

SyntaxHighlighter is here to help a developer/coder to post code snippets online with ease and have it look pretty. It’s 100% Java Script based and it doesn’t care what you have on your server.

Because the code highlighting is done client sided, you will see some ‘flickering’, and change of appearances of the code block.
Default the dp.SyntaxHighlighter doesn’t include ActionScript so I had to add that to it (digitalflipbook wrote the javascript file so I only had to add it), change the WordPress plugin (it didn’t have ActionScript either ), update the WordPress Plugin to version 1.5.1 of dp.SyntaxHighlighter and fix the copy to clipboard function….

Pro: no extra pressure on the server, copy to clipboard, it looks nicer, posible to add just one language instead of all,
Con: no default ActionScript, view code in popup, no button in the WordPress wysiwyg/html editor

My choice

Both have there strong points and there weaknesses, but I choose iG:Syntax Hiliter because of it has included ActionScript default, and the processing of the code highlighting is done on the server side.

Update #1: For some reason iG:Syntax Hiliter changes the < code>-tag to a highlighted code block with the programming language code (never heard of that programming language πŸ˜‰ ) but more strangely: to something unreadable… I always test all the plugins I want to use on a WordPress blog installed on a usb-webserver and the plugin works fine there, probably the plugins I have installed on my ‘live’ blog don’t play nice with each other. I don’t have the time to find out who they are, so I used syntaxhighlighter.
There is no reason you shouldn’t use iG:Syntax Hiliter: it works fine with WordPress 2.5, it just doesn’t on my blog. πŸ™

[as]
function test ():void {
trace (‘test’);
}
[/as]

Another small update on my site design

Still refining the css for this blog, I’m getting there.

Today I added 2 new plugins to my list of WordPress plugins:

CG-FlashyTitles for the nicely rendered Headers, and this is one of the user-friendliest plugin I’ve ever seen.
CG-FlashyTitles
And is based upon sIFR

Contact Form ][ because my contact page didn’t have a contact form anymore. I know that sandbox has the possibility to add commentfrom, but does this at the bottom of the page, and I wanted it in the page.

There are some other plugins I want to activate (WP-PageNavi , Ultimate Tag Warrior and Related Entries), but they all need a little tempering with the .PHP files.
That not really a problem, but the release of WordPress 2.3 is very close.
And with that the release of Sandbox 1.0, so tempering with the PHP files have to wait till then.

New design for my blog (finally!)

For the readers of my blog: there is a new design.

(for the RSS readers: New design for [mck])

After using the Blix theme from kingcosmonaut for more than a year, I changed the theme into one of my own design.

I’ve talked about more than once.. but for some reason the build of my design always stopped in the final phase of the building process.

So I gave myself one month to create and build my theme (last month was typography animation month, so that way I created some extra time)

I used sandbox from http://www.plaintxt.org/ because it’s a

… theme for themers. It has the ability to be easily skinned, so beginners will feel comfortable styling it since they only need to know CSS.

and there is a ongoing discussion about including sandbox into WordPress 2.4.

So it seemed a good idea to start building with the help of sandbox.

There are some stuff that need to be changed, and tested…. I will keep you posted.

πŸ™‚

FlashBox blocks content in IE6

Jacob Fresco pointed me to a bug that I would never ever have found without his help! So thx.

Hi, first, compliments on the great plugin. However, I do have some remarks. It seems that WordPress 2.1.2 with Wp-Flashbox 1.3 crashes Internet Explorer (=> version 6). When I disable Flashbox, everything works fine.

In Firefox, everything works like a charm… I cannot seem to find the cause of this problem. Any ideas?

Because I have a newly installed Windows XP, I only have IE7, Firefox 2 (my default browser) and for testing Opera (used for testing FlashBox)

So to test this bug I installed Multiple IE which makes it possible to install multiple versions of IE on your PC.
And of course tested IE6: no bugs, no crashes, no nothing, it worked like it supposed to.

Just to be sure, I tested IE6 today at work.
Woooo, that’s an extreme bug.

First you get:
Press ok

And then you get:
Operation aborted

A little search on the internet revealed the problem: “Press OK to continue loading the content of this page”
It’s the changes Microsoft made to IE in response to the Eolas patent lawsuit.

But I thought SWFObject would fix this? (internet explorer eolas changes and the flash plugin/)
But when I tested the demo pages at deconcept with IE6 I also got
“Press OK to continue loading the content of this page” but not the “Operation aborted”

So there must be something wrong with FlashBox. But before I can find out what it is… I have to know the difference between my home-computer and my work-computer, so I can find out what goes wrong.

FlashBox v1.3

A new version of FlashBox, with one of my personal favorites in it: autoplay. I hope you like it.

FlashBox is a on going project so for updated versions of it goto the Flashbox directory.

A two image gallery: an tribute to Optimus Prime. [1][2]

Find more examples on the FlashBox homepage.

Download WordPress Plugin – Download FlashBox v1.3

Download wp-FlashBox v1.3 wp-flashbox_v01.3.zip (22,1 kB)

If you have previous versions of FlashBox installed, it’s a good idea to delete the old “wp-flashbox” directory.

Continue reading

FlashBox – Faq

Can I use FlashBox if I don’t use WordPress
Yes, you can!
But you will have to install FlashBox manually: the instructions for that can be found here

Why does FlashBox work differently on Firefox 2 Apple
I can’t stand this, but it’s true. I can’t get FlashBox to work the same in all browsers and OS. The complete story can be read here. I came to the conclusion that I can’t do anything about this problem. And just need to work around it.

Why is FlashBox for free?

Flashbox – Todo and requests

Todo

  • usefull information about
    • error handeling
    • usefull information about the loading
    • Feedback if img not there (error)
    • Feedback from a slow server
  • extra information
  • More information about img (meta data)
  • resize if image is to big
  • Gallery navigation
    • thumbnails, or something similar so you can skip a couple images in a gallery
  • Read xml
  • Read FLV
  • Read MP3
  • autoplay / slideshow
  • resize big images
  • Flash 7 plugin (nice to have) as minimum requirement, FlashBox uses now Flash 8 plugin which should cover about 94% of the users (source Adobe)
  • If no Flash plugin is available (or not the correct version) there should be a possibility to view without Flashbox
  • A button in tinyMCE the default wysiwyg editor
  • Visible notification form the activation of FlashBox
  • Posible to activate FlashBox without ‘rel=”flashbox”‘ – tag

note: A good example is the slideshow from flickr.com.

Requests

There was no specific place to place requests.
And now there is, so I collected the requests I already got and placed it here:


emre

Congratulations on your new plug-in! While it looks great, I have to say you have more competition than you realize. The newest breed includes Slightbox (23KB) and Litebox (3KB).

While size is no longer an issue, I can think of one area where you can pull ahead: ease of installation. All the others require modifying the code to add a REL attribute to tags. If you can make yours work without modifying any code, it will be the first choice of many people.

Veel bedankt!

Answer: This is a possibility, but I think should be an option which can be activated.


Hardy

Thanks man, good idea to build up something smaller than most of the other photo-plugins for wp. What i always miss, is a solution to show iptc-Data. Woud be nice to put this feature into the plugin. But good work for now.

Hardy

Answer: I think it’s possible to do this.
The PHP JPEG Metadata Toolkit by Evan Hunter. I have to perfect the Flash first before I introduce another feature. But this was also a though of mine, but not this extensive (I had never heard of iptc-Data)
Thx for pointing this out to me!