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, Javascript and PHP
• Default look: Dreamweaver style
• Customizable look of the code boxes

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);
?>

Bugs

If you find any bug in the latest version of this plugin, I hope you’d be so kind to tell me about it. This will only improve the plugin, which is better for the users! You can do this on the bug reports forum.

Help Needed?

If you need any help, or have problems with this plugin, please create a post on the support forums.

Plugin Info

AUTHOR: Frank Verhoeven
AUTHOR URL: http://www.frank-verhoeven.com/
WORDPRESS VERSION: 3.0+
TESTED UP TO: 3.3.1
CURRENT VERSION: 1.7.1

Download

DEMO: Live Demo
DOWNLOAD: FV Code Highlighter

Support

If this plugin is helpful to you, please consider supporting it! You can help it’s development by making a small donation, or promote it by putting a link to this page on your site. Appreciate it!