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: 6 پلاگين براي نمايش كد در نوشته ها | آوا دانلود
Love the update. Works much better! I would like to have the code syntax in the settings area to copy and paste.
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 🙁
Pingback: Web Designer Blog» Blog Archive » WordPress Plugins to Display and Highlight Code within your Blog- All About Graphics and web designing
Pingback: Best WordPress Plugins to Display and Highlight Code within your Blog - Freelancer Gang
Pingback: ৬টি গুরুত্বপূর্ণ Syntax Highlighter - বাংলাদেশী ওয়েব ডিজাইনার এন্ড ডেভেলপার ব্লগ : বাংলাদেশী ওয়েব ডিজাইনার
Thanks. It works great on my wordpress blog. 😀
Pingback: How to Display the Source Code on WordPress
Pingback: 6 important Wordpress plugins highlight source code | Watpads - Blogging Tips and References
woow…really nice plugin 🙂
Pingback: 10 WordPress Code Editor Plugin « DownGraf – Design weblog for designers
Nice plugin ^_^
Pingback: Code Snippet Overview | Cork Events
Pingback: Code Snippet Overview — Appmatic
Pingback: WordPress Plugin to Display and Highlight Code
Pingback: Code Snippet Overview | My Blog
Pingback: Apache solve | Linux tutorials
Pingback: Code Snippet Overview — MKProgramming | Website Design, Development and SEO | Rochester, NY
+1 for js support
Pingback: 12 WordPress Plugins to Display and Highlight Code | Xuan Luat's Blog
How can we use this for JQuery?? Lets say we have a javascript/Jquery code
I tried with following code, but didn’t work
its really useful..but am missing javascript 🙂
Pingback: Code Snippet OverviewKosher Penguin LLC | Kosher Penguin LLC
Hi,
is there a way we can get this plugin to work with phpBB or just plain HTML?
Pingback: Posting Source Code in WordPress | Moniroth
Pingback: Code Snippet Overview — Mobile Bees
nice mate – cheers!
Love the plugin, tried a few others and none worked the way I wanted, this is perfect!
Many thanks.
Pingback: » Die besten Wordpress Codehighlighter im Test
Pingback: 6个重要的语法高亮wordpress插件
Pingback: 10 Best Syntax Highlighter Wordpress Plugins | TutorialChip
Pingback: Our New Website Launches!Creative at Heart | Creative at Heart
Pingback: How to highlight text/link/para/code in box inside post in wordpress | Techbrail
Pingback: Plugins ,WordPress,google
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.