My First WordPress Plugin: Visual.Syntax

WordPress PluginCurrent 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.

Be Sociable, Share!