WordPress Plugin, Visual Code Editor, posts and edits code snippets in wordpress’s visual editor
I will be moving my blog from blogCFC to WordPress. So I have it installed and played with skins and syntax highlighting… which is quite lacking.
The problem comes in when you edit your post twice. When you load that post again, WP converts ampersands into “&”. Which is nice. But if you edit that post again, WP re encodes ampersands again. Giving you “&&”. Want to guess what happens if you save and load it again? 
Now lets compound that with the visual editor, which automatically encodes for you as you type or paste. That only accelerates the process. And the fault here is with WP when it loads the post. Not with TinyMCE, at all.
Lets make matters even worse. WP’s init for TinyMCE is really screwy. Looking at the code you’d think they were rocket scientists. But… dang it… the defaults are horrible for programmers who want to blog!
- Users have to switch to HTML or TEXT views to insert <pre> or <code> tags.
- TinyMCE does not allow unknown attributes for tags like <pre line=”1″>.
That may sound really picky. But most syntax highlight plugins require either <pre> or <code> and to use special attributes in them to display properly. Some require the syntax to have all entities escaped, some require the opposite. What a freaking nightmare. So I set out to end this nonsense.
Enter Visual Code Editor. It’s a plugin I wrote for WordPress. Visual Code Editor makes it possible (and trouble free) to post and edit code snippets in wordpress’s visual editor.
- Adds <pre> & <code> to block format menu
- Allows extra attributes for compatibility in some syntax highlighters (ie, <pre lang=”php” line=’5′>)
- Unescape WP’s double escaping of &
- v1.1: Removes extra <pre> tags around SyntaxHighlighter Plus’s sourcecode blocks
And the nicest thing is… it’s a plugin! You don’t have to go around editing WP’s base installation. Download, extract, upload, activate, done.Coupled with the SyntaxHighlighter Plus plugin, you get results like this:
- it’s the easiest to use and is smart.
- It runs in javascript, search engines do not see tons of inline css muddying the page.
- The page also downloads faster because of that.
- The ‘copy to clipboard’ does not require flash.
All you have to do is create a [/sourcecode] block, select the sourcecode block, select Preformatted from Tiny’s format menu, then paste in your code.
It should look like this:
I also left the door open for other syntax highlighters, which instead of using , use <pre lang=”xxx” [line="5"]> or even <code>, etc.
Feel free to download the plugin, which is now in the WordPress PlugIn Directory! Yippee I learnt how ta use SVN today! http://wordpress.org/extend/plugins/visual-code-editor/
Plugins that failed to help
I did my homework before writing this plugin. I tried all of the following. All of which failed in one way or another.
- Chili Code Highlighter
- CodeHighlighter
- Developer Formatter
- Disable wpautop
- Editor Extender
- EmbedIt
- Google Syntax Highlighter for WordPress
- Preserve Code Formatting
- Raw HTML capability
- Text Control
- TinyMCE Entities Patch
- Code Snippet
- Dean’s Code Highlighter
- Highlight Source Pro
- iG:Syntax Hiliter
- Sniplets
- Snippet Highlight
- WP-CodeBox
- WP-Syntax
Here are the plugins that I am currently running:
WHEW! That’s enough blogging for today. I gotta get some work done!
Nice plugin, only I have trouble understanding what this plugin adds to Syntax Highlighter Plugs;
http://wordpress.org/extend/plugins/syntaxhighlighter-plus/
It looks about the same to me, only you have to press “Preformatted” as well which is an extra step that you don’t have to take with SyntaxHighlighter Plus (this plugin does have it’s issues but I managed to fix them quite easily, check my blog).
Hi Naatan,
My plugin is not really about Syntax Highlighter Plus. What Visual Code Editor does is modify TinyMCE and WordPress’s behavior so that code format is preserved when using the visual code editor. It will work with any syntax highlighter that accepts encoded (or escaped) syntax.
Preformatted is the extra step needed so that TinyMCE does not truncate white space (like indented code blocks) and also makes lines not soft wrap. So it keeps the code looking the same in the visual editor as well.
I see your edit to SHP, but I wanted to go with an approach that did not need to modify files. So I came up with my plugin instead. Just install and activate.
As with your edits, mine too keeps all code formatting, including , &, etc.
Maybe try reverting back to a virgin SHP, install my plugin, and give it a whirl. Then you’ll see what this does.
Thanks,
Jules
I just noticed that when you highlight a Syntax Highlighter Plus code block and then selected preformatted as in your instructions, you get nested pre tags, which is not valid XHTML (at least that is my interpretation of the w3 validator’s output on my page). Is there a way around this?
Sorta. It looks like I might have goofed up the instructions a little, and you may be working on a file with windows line endings.
The instructions should read:
All you have to do is create a [/sourcecode] block, select the sourcecode block, select
from Tiny’s format menu, then paste in your code.
That will stop putting PRE tags on each line.
But you will still have nested PRE tags. The first is inserted by you in the editor. The second is inserted by SHP at parsing time.
PRE is required in the visual editor so that formatting is preserved (line indents, multiple spaces, line breaks, etc). There is no way around that since the visual editor is basically an iFrame so it has all the html rules (like truncating white space).
I’ll look into a way of stripping out the 1 extra PRE, which would then XHTML validate the page again.
Thanks for the head’s up!
Hey Gremmie I got it to work. Example: http://www.webveteran.com/blog/index.php/coldfusion/migrating-from-blogcfc-to-wordpress/
Update the plugin in WP Admin then reload a post on your blog.
I still can’t get this to work with Geshi
if i type ” echo bash code here ” in the visual editor then select and click “Preformated” that line will just show up in the final post exactly as I typed it, no highlighting is done
There are a log of plugins that are based on Geshi. Can you be more specific? I’ll install it and try to get it to work.
I had problems with this function
function removePrePost($post_content = '') { $preStart = '\n<pre class="syntax-highlight:'; $preEnd = addcslashes('\n', '/'); $post_content = preg_replace("/$preStart/i", '<pre class="syntax-highlight:', $post_content); return preg_replace("/$preEnd/i", '', $post_content); }It just didnt remove first pre when using [sourceclode lang="php"]code…[/sourcecode]
So I had to edit it and now it looks like this (just edited regular expression
function removePrePost($post_content = '') { $preStart = '\n]+)'; $preEnd = addcslashes('\n', '/'); $post_content = preg_replace("/$preStart/i", "<$1", $post_content); return preg_replace("/$preEnd/i", '', $post_content); }@Marijan Šuflaj
Thanks for pointing that out.
What is the problem with the function that you fixed?
Can you tell me what version of PHP, WordPress, and SyntaxHighlighter Plus you are running?