Frank Verhoeven

The main subject of this blog will be web development and feature some interesting articles and tutorials ranging from PHP and jQuery to HTML and CSS. The problem I was facing when I built this theme was the lack of awesome code highlight plugin. I just couldn’t find one that was working for me.

I thought maybe more people were looking for a plugin that simply publish codes that looks great. I started to write my own, and the FV Code Highlight plugin was born and now open for the public. The features are plain and simple, read on.

Description

This plugin supports the highlighting of PHP, HTML, CSS and XML. The default tag-highlighter color scheme uses the same colors Adobe’s Dreamweaver is using. This makes it easy for your visitors to recognize what type of codes you wrote. These colors can be changed to your liking in the WPadmin section of your blog.

Features

• Easy to use
• Renders XHTML, CSS, XML and PHP (in parts)
• Default look: Dreamweaver style
• Customizable look of codes and code box

How to use this plugin?

1. Upload the folder `fv-code-highlighter` to the `/wp-content/plugins/` directory
2. Activate the plugin through the ‘Plugins’ menu in WordPress
3. Place in your pages to use the highlighter

Example

CSS Code

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

/* Comment */
@import url("main.css");
h3, .head2 {
    font-family: "Sans-Serif";
    font-weight: bold;
    color: #336699 !important;
}
@media screen, print {
    pre { margin: 0px 10px 10px; }
    h1 { font-size: 14px; padding-top: 10px; }
}

(x)HTML Code

1
2
3
4
5
6
7
8
9
10
11

<style type="text/css">  headline {font-size: 24pt;}  </style>
<!-- Comment -->
<td><a href="link">Plain Text &nbsp;</a>
<img src="image" alt="" width="15" />
<form action="action.pl"> <input type="submit" value="Press Me" />
</form>Text</td>

JavaScript Code

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

/* JavaScript */
function displayWords(arrayWords) {
  for (i=0; i < arrayWords.length; i++) {
    // inline comment

    alert("Word " + i + " is " + arrayWords[i]);
  }
}
var tokens = new Array("Hello", "world");
displayWords(tokens);

PHP Code

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

<?php
mysql_connect ($host, $user, $password);
$result = mysql_db_query ("database","select * from table");
while ($row = mysql_fetch_assoc ($result))
{
  echo $row["user_id"];
  echo $row["fullname"];
}
mysql_free_result ($result);
?>

Plugin Info

AUTHOR: Frank Verhoeven
AUTHOR URL: http://www.frank-verhoeven.com/
WORDPRESS VERSION: 2.5+
TESTED UP TO: 2.6.2
CURRENT VERSION: 1.0

Download

DEMO: Live Demo
DOWNLOAD: FV Code Highlighter