My First WordPress Plugin: Visual.Syntax
Current Version: 2.01
"Visual.Syntax" is a plugin for WordPress that preserves source code formatting and provides full syntax highlighting. It is compatible with WordPress 1.5/2.0 and PHP 4/5. Update: Tested in WordPress 2.9 – no issues.
Unlike other code plugins Visual.Syntax offers highlighting of HTML and CSS in addition to PHP. I have customized the highlighting to match Dreamweaver's syntax coloring as much as possible, as well as my own preferences. Visual.Syntax will also force any CSS into a readable pre-defined format.
Installation
Follow these basic steps:
- Download this file: Visual.Syntax.zip (5kb)
- Unzip the file on your computer.
- Upload the complete folder "Visual.Syntax" to your WordPress plugins directory (usually found in "wp-content/plugins")
- Login to WordPress and go to the Plugins module
- Find the line that says "Visual.Syntax" and click "Activate"
Note: This plugin is not compatible with the WYSIWYG Visual Editor that comes with WordPress. You will have to be using the old-style HTML editor (textarea) if you want to highlight your source code.
How to Use
It is quite simple – simply wrap your PHP and HTML code in <code>text</code> and your CSS in <css>test</css>.
Each block of code is wrapped in a DIV with a CSS class of "VisualSyntax" so that you can customize the appearance of the code block. For example see the grey background on the code blocks shown below. Here is the CSS I am using:
.VisualSyntax {
background-color: #F9F9F9;
border: 1px solid #F0F0F0;
font-family: "Courier New",Courier,mono;
font-size: 12px;
line-height: 1.5em;
margin: 0;
overflow: auto;
padding: 5px 5px 0;
white-space: nowrap;
width: 98%;
}
Output Examples
PHP Example:
<?php
//output "Hello.World" to the browser
$text = "Hello.World";
echo $text;
?>
HTML Example:
<p><img src="/images/wordpress.png"></p>
<p>This is an example of
<a href="/weblog/visual.syntax/">Visual.Syntax</a>
highlighting HTML.</p>
CSS Example:
@import "stylesheet.css";
body {
margin: 0px;
padding: 0px;
}
a {
color: #0000FF;
text-decoration: none;
}
Support / Feedback
I welcome any comments, feedback, suggestions, or bug reports. Please either use my Contact Form or leave a comment.
ChangeLog
2006-01-30 - Fixed problem with smart quotes. Now version 2.01. 2006-01-30 - Released version 2.0 to WordPress Users.
February 16th, 2006 at 11:26 am
Thanks for the information. Very helpful.
February 20th, 2006 at 5:38 am
Hi,
Thanks for the great work ! This is just exactly what I’m looking for !
I did bump into an error tho.. could you please have a look at this post when you get a chance?
It says “Warning: Invalid argument supplied for foreach() in /home/shirster/public_html/testbed/wp/wp-content/plugins/Visual.Syntax/class.CSS.php on line 129″ …
Thanks in advance !
Shirley
February 23rd, 2006 at 7:22 pm
I am glad to find your site – now I know what a good one looks like.
February 24th, 2006 at 6:34 pm
Thanks for the information. Very helpful.
February 25th, 2006 at 6:20 am
Very good topic to share with us. Great info.
February 25th, 2006 at 1:03 pm
[...] Got hold of a neat little WordPress plugin by Matthew Delmarter for doing syntax highlighting on PHP, HTML and CSS. Why you ask? All will come clear later. Anyhoo, heres what it looks like: [...]
March 3rd, 2006 at 7:02 pm
Your plugin is great, but seems to disable WordPress’s automatic “smart quotes”. I know many people dislike the “curly quotes”, but I think they look good. If you need more info from me to help you fix this, let me know, I’m happy to help test.
March 3rd, 2006 at 11:17 pm
To geekgirljess: If you want to re-enable the curly quotes then just comment out line 44 of Visual.Syntax.php …
April 8th, 2006 at 3:09 am
[...] Visual.Syntax: It only supports CSS, HTML, and PHP. [...]
April 24th, 2006 at 12:37 am
I don’t get the border neither the background color in the code.
How do I achieve this?
Thanks
August 4th, 2006 at 12:16 am
[...] You can just copy-paste the above into your theme editor. Don’t worry about the colors – they’re just code highlighting done by the Visual Syntax plugin. I inserted the code just above the following line: [...]
August 4th, 2006 at 12:38 am
Hey Matthew,
after just customizing your plugin a bit to fit it my needs, I get in trouble with the css tag. As I use the WordPress WYSIWYG TinyMCE I can’t write tags like , not even in the ALT-E sourcecode editor, because WordPress erases them when submitting.
Workarounds like <css> or <css> also don’t as WordPress just display them other than interpretate them.
Any suggestions how to patch your code to have it work?
BTW: Would not better fit than as it is the official tag for it, or are there any problems?
Thanks a lot.
August 4th, 2006 at 12:42 am
Hey Matthew,
after just customizing your plugin a bit to fit it my needs, I get in trouble with the css tag. As I use the WordPress WYSIWYG TinyMCE I can’t write tags like <css>, not even in the ALT-E sourcecode editor, because WordPress erases them when submitting.
Workarounds like <css> or &lt;css> also don’t as WordPress just display them other than interpretate them.
Any suggestions how to patch your code to have it work?
BTW: Would not better fit <style> than <css> as it is the official tag for it, or are there any problems?
Thanks a lot.
September 12th, 2006 at 2:56 pm
Great plugin. Simple and clear. Thank you!
September 12th, 2006 at 3:03 pm
[...] I am using the Visual.Syntax code highlighting plugin by Matthew Delmarter. There were some code highlighter plugins out there, but they were all pretty complicated and the output was fancier – a little too fancy. I wanted something simple to copy/paste from and Visual.Syntax won the day for me. iG:Syntax Hiliter is a close second and I may still use it some day. It does neat things like line numbering and highlighting for a large amount of languages; but I did not find it as simple to use as Visual.Syntax. In case you were wondering, both of them work with Wordpress 2.x. [...]
October 28th, 2006 at 9:58 pm
Hi Matthew, really a great work!
We started to use in our “approfondimenti” section and it’s a powerful tool; the only problem is that the generated code doesn’t validate.
Most of the times, the problem is that when you break a row, the /tag is misplaced.
Are you working on a modified version?
Anyhow, keep up the great stuff!
January 5th, 2007 at 12:31 pm
I like the output for your plugin as described above. I have two questions before I would install it.
1. With Visual.Syntax installed, can I use either editor (the WYSIWYG or the HTML), or by installing Visual.Syntax am I limited to only using the HTML editor. I am not sure if you are saying that Visual.Syntax does nothing in the WYSIWYG though you can still use it. Just to be clear, are you saying I would have to give up using the WYSIWYG editor entirely? “Not compatible” may imply I cannot use it at all.
2. For Visual.Syntax to work, do I have to edit ALL the files for my style to wrap the HTML and CSS in the wrappers you describe? While that seems like a lot of work, doing it once as needed may work out. I assume I only need to put the wrappers in place when there is an area of code I am trying to follow.
If I can add the code wrappers on an “as needed” basis and do not lose use the use of the WYSIWYG, then this might be useful. I also wonder when would I have php pages loaded in the HTML editor? I usually use the Plugin Editor of WordPress, which shows the php in a nice neat arrangement.
Thanks for answering my questions!
February 10th, 2007 at 1:09 am
I found this article on Yahoo, at number one for the term visual.syntax. It’s any interesting article, although not the info I was looking for. I was looking for a syntax highliter that I can integrate into a normal text field in a content management system. Can anyone point me in the right direction? Thanks, Bobby Hip
April 13th, 2009 at 5:50 am
I’m hoping your plugin will work with the latest WordPress 2.7.1 and I’ll install it and give it a try. Thanks.
December 27th, 2009 at 8:10 am
I am using this plugin with WordPress version 2.9 with no issues.
@ all those who asked about using this with TinyMCE or as part of the HTML WYSIWYG Editor. Visual.Syntax is for highlighting source code. So no, it does not work with with a WYSIWYG Editor which is actually writing the source code for you.
As stated in the instructions, this plugin is for the basic HTML editor only.
I hope this clears up a few questions I have been getting.