Visual Code Editor modifies WordPress’s behavior so that code format is preserved when using the visual editor. It will work with any syntax highlighter that accepts encoded (or escaped) syntax.
Download the plugin: http://wordpress.org/extend/plugins/visual-code-editor/
WordPress is really nice. But it mangles syntax in posts. I set out to end that with a non source-code-editing method: a plugin!
The problem in WordPress 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 default settings for TinyMCE is really screwy. It’s 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
- v1.1.1: Tested with WordPress 2.7
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:
Syntax highlighter Plus runs through javascript on the client and expects the code to have entities encoded. Thanks to my plugin and TinyMCE, we’re golden. I chose Syntax highlighter Plus for a few reasons.
- 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:
The
Preformatted area tells TinyMCE to leave the formatting the heck alone. makes Syntax highlighter Plus do it’s magic on the viewer side. And you can still edit all of your code in the visual editor. Awesome!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
Visual Code Editor
plugin, syntax highlighting, TinyMCE, WordPress
Recent Comments