Visual Code Editor with WP-Codebox

This is a test using the Visual Code Editor plugin with the WP-CodeBox plugin.

Original code:

	<Tr>
		<td style="background-color:##598CB5;color:white;font-weight:bold;">
			#l1title#
		</td>
		<td rowspan=16>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</td>
		<td style="background-color:##598CB5;color:white;font-weight:bold;">
			#r1title#
		</td>
	</tr>
<!--- ORDER --->
<cfhttpparam name="x_invoice_num"         type="formfield" value="#invoice_num#" >
<cfhttpparam name="x_description"         type="formfield" value="ScenicMesa.com online order">
<cfloop list="#x_line_items#" delimiters="#chr(9)#" index="i">
	<cfhttpparam name="x_line_item"       type="formfield" value="#i#">
</cfloop>

And here is WP-CodeBox enabled:

Rendering of WP-Codebox
Rendering of WP-Codebox - I took this screen capture just before turning deactivating the plugin.

Visual Code Edior allows for syntax and code editing right in WordPress’ invocation of TinyMCE. Therefore, all html entitied are escaped. As you can see this sometimes does not work with WP-CodeBox since it expects non-escaped code. This is why WP-CodeBox made it on my “Plugins that failed to help” list.

Now for SyntaxHighlighter Plus, which, on the other hand expects escaped code. And so it works well when editing code in visual mode of the WordPress post editor:

	<Tr>
		<td style="background-color:##598CB5;color:white;font-weight:bold;">
			#l1title#
		</td>
		<td rowspan=16>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</td>
		<td style="background-color:##598CB5;color:white;font-weight:bold;">
			#r1title#
		</td>
	</tr><!--- ORDER --->
<cfhttpparam name="x_invoice_num"         type="formfield" value="#invoice_num#" >
<cfhttpparam name="x_description"         type="formfield" value="ScenicMesa.com online order">
<cfloop list="#x_line_items#" delimiters="#chr(9)#" index="i">
	<cfhttpparam name="x_line_item"       type="formfield" value="#i#">
</cfloop>

21 Replies to “Visual Code Editor with WP-Codebox”

  1. Hi – it seems like with the latest release of syntax highlighter plus, that this is not working. It seems like the plugin is NOT removing the first tag but removes the tag – so the code is not closing correctly at all and becoming invalid

  2. @Chris Carvache
    That very well might be true. I have not tested VCE with the new SHP. Only because the new SHP does not have a ColdFusion brush, and I don’t have the time right now to write one. And CF is what I’m all about… if I install the updated SHP my whole blog get disrupted.
    A new brush, and releasing an update to VCE, is on my ‘Free Time‘ projects list!

  3. I installed the visual code editor but I don’t see any changes in the visual editor when adding a new post? I have wp-codebox installed and wordpress 2.7.1. Is it working and just invisible or why don’t I see a button?

  4. @Oliver Drobnik
    There is no button. Though I have thought of it. The instructions are:
    * In visual mode, create a block
    * Select the sourcecode block
    * Select Preformatted from TinyMCE’s format menu
    * Paste in your code

    But, as stated and rendered above, WP-CodeBox is not compatible as it expects non-escaped code.

  5. I am a bit confused how to use this plugin. Supposed I had the following code.

    [ code ]
    <?php
    ..some code..
    ?>
    [ /code ]

    When I switch from the html editor to the visual editor, and back the code is distorted. Am I missing a step?

    Thanks,
    Grae

  6. @Grae
    Nope – you’re not missing a step. Just taking an extra unnecessary step, which is using the html editor. When you go back and forth, WordPress does it’s monkey business and mucks up your code. Just stick to the Visual Editor and you should be OK:
    * In visual mode, create a block
    * Select the sourcecode block
    * Select Preformatted from TinyMCE’s format menu
    * Paste in your code

  7. Judging by that pic, you don’t have a syntax highlighter turned on. You need to install and activate the plugin called “SyntaxHighlighter Plus”. That should fix it.

  8. Greetings,

    I just installed both Visual Code Editor and Syntax Highlighter Plus. Everything works great except for one small problem. Once you create a sourcecode block in a post, everything is preformatted for the rest of the post even if you switch back to paragraph mode in the Visual Editor.

    Without the sourcecode blocks, I can successfully alternate between paragraph and preformatted blocks. I examined the HTML dom using Firebug and it did indeed show that everything gets nested under the first occurrence of a pre tag from the sourcecode block. I have no idea if the problem lies with Visual Code Editor or Syntax Highlighter Plus.

    Thanks for the great plugin!

  9. @Q
    Thanks for the compliment and the mention in your blog.

    That may be browser/tinymce related. I have seen that the PREFORMATTED text does stick some times, but not others.
    After your code block, type some text. Then select that text and choose ‘paragraph.
    If that doesn’t work, view the html source (with the tinymce button, not the wordpress toggle) and end the PRE tag manually. Of course that defeats the purpose… but it may help.
    Otherwise, enter your normal text first. Then add the sourcecode blocks later.

  10. @Jules
    I did try the first two suggestions. The HTML view even shows the start/end of the pre tag where it should be but it ultimately winds up incorrect in the HTML DOM of the viewed page. I will try typing all of the normal text first and see how that goes.

  11. @Q
    What version of SyntaxHighlighter Plus are you using?
    Visual Code Editor does not work with the latest SyntaxHighlighter Plus (1.0b2), nor the next generation SyntaxHighlighter Evolved (which is supposed to solve all the problems that mine does).
    It requires SyntaxHighlighter Plus 0.18

  12. Sweet, 0.18 fixed it. I’ll make a note in my blog that you need 0.18 in order for Visual Code Editor to work.

    Thanks!

  13. Hi Jules,

    Somehow I was under the impression by this and some other blogs, that your “Visual Code Editor” added something like a button or an option to the Paragraph dropdown that allows us to select a piece of text and make it Code, Preformatted and then add the options that are possible for Gorbatchev’s Javascript Highlighter. In your last message you say that it does not work with SyntaxHighligher Evolved. Is there a chance that you’ll add support for that, or have I misunderstood the purpose of this “Visual” plugin?

  14. @Abel Braaksma
    VCE adds the PRE and CODE options the block format menu.
    All you have to do is create a block, highlight that sourcecode block, select Preformatted from Tiny’s format menu, then paste in your code.

    SyntaxHighlighter Evolved is supposed to fix all the problems that my plugin addresses. When I tried it nothing worked. All my code was removed from my post upon save. So I removed it and reverted back to SyntaxHighlighter Plus 0.18.

  15. Thanks for your quick reply and the explanation. It makes sense now.

    SyntaxHighlighter Evolved has had many bugfixes since its first incarnation (it’s now at version 2.1.0) and works stable for me. There is one major problem though: indenting, which is gone upon saving your post. I have issued a fix for that in case you wish to give it a new try: http://www.undermyhat.org/blog/2009/07/fix-for-leading-whitespace-bug-in-syntaxhighlighter-evolved-for-wordpress/ (sorry for the long link, not sure if you support <a href=”” in comments).

  16. Great plugin, thank you! I had also started to create a “plugins that didn’t help list” before finding your post from the WordPress website.

    The only thing is that I’m using WordPress 2.8.4. Is this plugin fully compatible?

  17. I’ve spent ages to find a good highlighter and a way to make editing in WP easier for programming code snippets. Well, after a restless night and a dozen installs (almost all of your “fail” list before I knew about it 😉 ), I’ve come to using VCE (a *BIG THANK YOU*) along with CodeColorer from Dmytro Shteflyuk. Simply use [cc…] tags, Preformat and paste the code. Now I can actually spend time writing stuff, instead of struggling with mangled HTML! Thanks!!!

  18. Thank you for this great plugin. I am encountering a small problem when trying to indent my code snippets. For example if I type in the visual editor:

    <div>
       <span></span>
    </div>
    

    The spaces before span are not rendered. Is there a bypass to this behavior? The only I found is to paste this code in the HTML editor but if you come back to the visual editor by accident you will loose all your indentation.

    Thanks by advance for any input.

  19. @Kilo
    As you probably just found out… my comments accept SHP haha 🙂

    The whole point of my plugin is to not need the HTML editor at all. Just stay in tinMCE. Make sure your block is converted to PREFROMATTED before you paste in the code. That may make the difference.
    * In visual mode, create a block
    * Select the sourcecode block
    * Select Preformatted from TinyMCE’s format menu
    * Paste in your code

Comments are closed.