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?
- Upload the folder fv-code-highlighter to the /wp-content/plugins/ directory.
- Activate the plugin through the ‘Plugins’ menu in WordPress.
- Place
in your pages to use the highlighter.
Example
CSS Code
1 2 3 4 5 6 7 8 9 10 11 |
/* 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 |
<style type="text/css"> headline {font-size: 24pt;} </style>
<!-- Comment -->
<td><a href="link">Plain Text </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 |
/* 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 |
<?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.2+
TESTED UP TO: 3.4
CURRENT VERSION: 1.8
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!
Hi,
first of all thank you very much for this great plugin.
And I have a question, why does this plugin write some tags in there which do not exist in my code? Look at the screenshot:
http://emdesigns.de/demo/code1.jpg
and
http://emdesigns.de/demo/code2.jpg
I hope you can help me.
Hi there,
Where must I put the code. I would like to use it on wordpress theme editor. I put the code on theme-editor.php, but I can not see any difference.
Thanks
Valentin
I want use it.But wordpress told me the header have a mistake.
Frank, great tool. Please add to your docs up at the top that you need to specify {code type=XXX} Although it makes complete sense, most of us are looking for a quick solution and do not always think as deeply as the designer. We obviously code -but we’re lazy too bud.
.horizontalaccordion>ul { margin: 0; padding: 0; list-style:none; height: 300px; }Nice work! and thank you very much for this wonderful plugin…
Thank you so much! I have tried a lot of code plugins for WordPress, but this one works the best!
P.S. – Works with WordPress 3.0
Nice job, thanks for share !
Works great so far thanks!
nice… nice
Hey, thanks for the great WordPress plugin!
I’m a WordPress newbie, but it seems as all the tabs/indentation of my code is lost when I switch back and forth between HTML and formatted view in my WYSIWYG editor when creating a blog post. Is there any workaround for this?
Thanks!
Jonathan
Excellent plugin, works like a charm (on WP 3.0.1 at the moment). Thanks!
i want to add some new code highlight like asp,javascript,.net,vb and etc
how can i do this…?
Brilliant, by far the best code highlighter plugin I’ve tried. Adding javascript highlighting would be the icing on the cake.
Thanks Frank. I’ve use your plugin in my blog. I already schedule to review your post. It will be publish 2 days after tomorrow.
Love the plugin, tried a few others and none worked the way I wanted, this is perfect!
Many thanks.
nice mate – cheers!
Hi,
is there a way we can get this plugin to work with phpBB or just plain HTML?
its really useful..but am missing javascript
How can we use this for JQuery?? Lets say we have a javascript/Jquery code
I tried with following code, but didn’t work
CODEBLOCK+1 for js support
Nice plugin ^_^
woow…really nice plugin
Thanks. It works great on my wordpress blog.
This is a great plug-in, uses the so-familiar colors of Dreamweaver and that’s awesome.
The only issue I have is with the inline comments, somehow the plug-in always adds a newline to it
Love the update. Works much better! I would like to have the code syntax in the settings area to copy and paste.
Hi! Great plugin, but I have one problem. Every time I update post WordPress automaticaly puts there formatting tags like BR and P, so then on front page is my code block with this formatting tags.. Is there some way to update with avoidig to WordPress doing this??
Plugin in action: http://www.fine.sk/blog/ako-upravit-farbu-vyberu-pomocou-css/
thanks for your plugin