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.
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 HTML Editor that comes with WordPress. You will have to be using the old-style editor (textarea) if you want to highlight your 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.
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 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 …
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. […]