WordPress Plugin – FV Code Highlighter
Posted by Frank on September 10, 2008The 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 an awesome code highlighter plugin. I just couldn’t find one that was working for me.
I thought maybe more people were looking for a plugin that simply publishes codes that look 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 more. 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 WP Admin section of your blog.
Features
- Easy to use
- Renders PHP, HTML, CSS, XML, Javascript and more
- Customizable look of the code boxes
How to use this plugin?
- Upload the folder
fv-code-highlighter
to the/wp-content/plugins/
directory. - Make sure the cache dir
/wp-content/plugins/fv-code-highlighter/cache
is writable by your webserver. - Activate the plugin through the ‘Plugins’ menu in WordPress.
- Choose your preferred settings on the options page: WP Admin > Appearance > Code Highlighter.
- Place your code between
<pre lang=codetype>...</pre>
tags to use the highlighter.
Example
General Code
<pre>...</pre>
:
extension String { |
|
var banana : String { |
|
let shortName = String(characters.dropFirst(1)) |
|
return "\(self) \(self) Bo B\(shortName) Banana Fana Fo F\(shortName)" |
|
} |
|
} |
|
|
|
let bananaName = "Jimmy".banana |
CSS Code
<pre lang="css">...</pre>
:
/* 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
<pre lang="html">...</pre>
:
<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.php" style="border: 1px solid #eee;"> |
|
<input type="submit" value="Press Me"> |
|
</form> |
|
<p>Text</p> |
|
</td> |
|
<script type="text/javascript"> |
|
if (document.getElementById('hi')) { |
|
window.alert('Hello World!'); |
|
} |
|
</script> |
JavaScript Code
<pre lang="javascript">...</pre>
:
/* 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
<pre lang="php">...</pre>
:
<?php |
|
/* Connect to a MySQL database using driver invocation */ |
|
$dsn = 'mysql:dbname=testdb;host=127.0.0.1'; |
|
$user = 'dbuser'; |
|
$password = 'dbpass'; |
|
|
|
try { |
|
$conn = new PDO($dsn, $user, $password); |
|
$sql = 'SELECT name, color, calories FROM fruit ORDER BY name'; |
|
|
|
/* @var array $row */ |
|
foreach ($conn->query($sql) as $row) { |
|
displayFruit($row['name'], $row['color'], $row['calories']); |
|
} |
|
} catch (PDOException $e) { |
|
echo 'Connection failed: ' . $e->getMessage(); |
|
} |
|
?> |
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: https://frankverhoeven.me/
CURRENT VERSION: 2.1.2
WORDPRESS VERSION: 4.0+
PHP VERSION: 7.0+
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!
Pingback: Freehtml | FV Code Highlighter
Pingback: Why WordPress? — Heart Digital
Pingback: Code Snippet Overview — MIL Technologies Inc.
Pingback: Code Snippet Overview — ikamobile.com
Pingback: Code Snippet Overview — Apple iPhone Insurance
Pingback: Code Snippet OverviewWebtivist: the open source online activism system | Webtivist: the open source online activism system
Brilliant, by far the best code highlighter plugin I’ve tried. Adding javascript highlighting would be the icing on the cake.
Pingback: Blog Post One — illuminaralight
i want to add some new code highlight like asp,javascript,.net,vb and etc
how can i do this…?
Excellent plugin, works like a charm (on WP 3.0.1 at the moment). Thanks!
Pingback: Code Edit Plugins For WordPress « WordPress Pro Host
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
Pingback: Code Snippet Overview — Zingybill
Pingback: Demo Title 1 — CFI Properties
Pingback: Code Snippet Overview — Codigo
Pingback: Code Snippet Overview — Velra | Think Different!
Pingback: Code Snippet Overview — B@kerBytes
Pingback: Mostrare codice su Wordpress : 6 plugins che fungono da Syntax Highlighter | Pecciola
Pingback: Code Snippet Overview | Oportunidad de Negocios | Baja Inversión - Alato Rendimiento | Páginas5
Pingback: Code Snippet Overview — Wavetalent
Pingback: شش افزونه جهت متمایز کردن کد با نوشته ~ طراحی های کوتاه
nice… nice 😛
Pingback: Code Snippet Overview — The Developer
Pingback: Blog's Xuan Luat » Blog Archive » 12 WordPress Plugins to Display and Highlight Code within your Blog
Works great so far thanks!
Nice job, thanks for share !
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
Pingback: مرموز – marmooz » 12 پلاگین برای مدیریت و هایلایت کردن کدها در وردپرس
Nice work! and thank you very much for this wonderful plugin…
Pingback: 12 plugin để làm nổi bật code trong WordPress – Jin9x's Blog
Pingback: Top 10 Little Known Wordpress Plugins | TrafficHoss.com
Pingback: كيف تظهر الكود بشكل جيد في تدويناتك؟؟
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. 🙂
I want use it.But wordpress told me the header have a mistake.