WordPress Plugin – FV Code Highlighter

Posted by Frank | Filed under Wordpress Plugins

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

Select 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

Select Code
1
2
3
4
5
6

<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

Select 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

Select 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!

September 10, 2008

174 thoughts on “WordPress Plugin – FV Code Highlighter”

  1. Stefan Vervoort on September 13, 2008 at 1:18 AM said:

    Awesome plugin my friend! Use it all the time.

  2. Frank Verhoeven on September 14, 2008 at 1:13 PM said:

    Thanks, and thanks again for all your help and support!!

  3. bighead on September 15, 2008 at 7:12 PM said:

    Hi, ur plugin is very nice, i am using it…but this version still not support JAVA. Anyway, i have modify it so that it able to format some simple JAVA code. I am wating for ur next release, hope that coming release ll include JAVA formating.Thanks ya, nice job!

  4. Frank Verhoeven on September 15, 2008 at 8:55 PM said:

    Hey bighead,
    Thanks for the compliment!

    At this moment I don’t know much about Java, but I will try to get it implemented in the next release.

  5. tmax on September 17, 2008 at 8:10 AM said:

    Thank you for a great plugin Frank! :-)

    I got an error I wanted to run by you in case it is a bug. Of course it might just be my fault instead.

    When I use the

    Select Code
    1

    code

    on a code segment it all works well.
    When I use the

    Select Code
    1

    code

    on a code segment I get the error while the blog post is rendering:

    Fatal error: Call to undefined function: htmlspecialchars_decode() in /home/itrating/public_html/wp-content/plugins/fv-code-highlighter/phpHighlighter.php on line 19

    My WordPress engine is version 2.6.1

    Thanks

  6. Frank Verhoeven on September 17, 2008 at 8:51 AM said:

    tmax, thanks!

    I guess you’re running PHP 4, since this function only works on 5.1 and up. However, the problem can be fixed!

    Open the file phpHighlighter.php with notepad or your favorite text editor (it’s in the fv-code-highlighter directory), and search for the next line:

    Select Code
    1
2
3

    <?php
$code = htmlspecialchars_decode($code, ENT_QUOTES);
?>

    It should be line number 19.

    Now replace that line with this line:

    Select Code
    1

    $code = html_entity_decode($code, ENT_QUOTES, 'utf-8');

    And everything should work perfect! :-)

    In the next release this problem will be automatically fixed, since it will get a better PHP highlighter.

  7. tmax on September 17, 2008 at 9:01 PM said:

    Thank you Frank! :-)
    I tried exactly what you said. I now get the following error:
    “Warning: cannot yet handle MBCS in html_entity_decode()! in /home/itrating/public_html/wp-content/plugins/fv-code-highlighter/phpHighlighter.php on line 19″

    Since you mentioned that this will get fixed in the next version I am happy to wait until that comes out instead of pestering you with this, though.

    Thank you for the great plugin! :-)

  8. Frank Verhoeven on September 17, 2008 at 9:23 PM said:

    Too bad it didn’t help you :-(

    I hope to get version 1.1 ready within three weeks.

  9. Crane Machine on September 21, 2008 at 3:45 PM said:

    Very Good~!!

  10. matt on October 2, 2008 at 3:24 AM said:

    plug-in isn’t working for me – I’m running wp 2.6.2

    I inserted the code

    Select Code
    1

    my code here

    but it just displays as plain text. This is within an actual blog post. Is this plugin only for pages? thanks

    1. Frank Verhoeven on October 2, 2008 at 11:07 AM said:

      It should work both in pages and posts, be sure to use the right syntax as described above and download the latest version. If that still doesn’t work, please send me an email with your server details, so I am able to find the problem.

  11. Lee on October 4, 2008 at 5:52 AM said:

    Another satisfied customer! Works great.

  12. WALO on October 29, 2008 at 5:39 PM said:

    hi!
    i can’t use the plugin i have it active but i place the

    Select Code
    1

    
    		

    

    

    

    and i can see the { code} and nothing higlighted
    
what am i doing wrong?
    
				
    
		
				
    
										
									
    
			
    
		
    
	
      
	
    1. 
		
      
			
      
								
      
			
      
			
			
      
				
      
			
				
      
					
						Frank Verhoeven on October 29, 2008 at 9:44 PM said:					
				
      
			
	
								
				
      
					
      Hey,
      
You need to remove the = between code and type. So it becomes {code type=php}.
      
				
      
		
				
      
										
									
      
			
      
		
      
	
      2. 

    

    13. 
	
  13. 
		
    
			
    
								
    
			
    
			
			
    
				
    
			
				
    
					
						abnfire on November 24, 2008 at 12:30 AM said:					
				
    
			
	
								
				
    
					
    how can i put javascript theme in this, now days its more javascript then html.. can we have javascript option too please..
    
				
    
		
				
    
										
									
    
			
    
		
    
	
      
	
    1. 
		
      
			
      
								
      
			
      
			
			
      
				
      
			
				
      
					
						Frank Verhoeven on November 24, 2008 at 4:22 PM said:					
				
      
			
	
								
				
      
					
      As soon as PHP is fixed (it now still has some bugs), I can easily add JavaScript support very easy. So it will come soon :-) 
      
				
      
		
				
      
										
									
      
			
      
		
      
	
      2. 

    

    14. 
	
  14. 
		
    
			
    
								
    
			
    
			
			
    
				
    
			
				
    
					
						Andri yarusman on November 29, 2008 at 12:16 PM said:					
				
    
			
	
								
				
    
					
    Wow… thanks God ! I found You Franks… FV COde Highlighter it’s So helpfull :) 
    
				
    
		
				
    
										
									
    
			
    
		
    
	
    15. 
	
  15. 
		
    
			
    
								
    
			
    
			
			
    
				
    
			
				
    
					
						ThunderWolf on December 12, 2008 at 3:17 PM said:					
				
    
			
	
								
				
    
					
    GREAT PLUGIN!
    
				
    
		
				
    
										
									
    
			
    
		
    
	
    16. 
	
  16. 
		
    
			
    
								
    
			
    
			
			
    
				
    
			
				
    
					
						Eligio on February 10, 2009 at 3:56 AM said:					
				
    
			
	
								
				
    
					
    great plugin, work perfectly on wordpress 2.7. thanks
    
				
    
		
				
    
										
									
    
			
    
		
    
	
    17. 
	
  17. 
		
    
			
    
								
    
			
    
			
			
    
				
    
			
				
    
					
						John Crumpton on February 25, 2009 at 10:46 PM said:					
				
    
			
	
								
				
    
					
    Great plugin! Any news on the js support?
    
				
    
		
				
    
										
									
    
			
    
		
    
	
    18. 
	
  18. 
		
    
			
    
								
    
			
    
			
			
    
				
    
			
				
    
					
						Hiranthi on March 9, 2009 at 12:25 AM said:					
				
    
			
	
								
				
    
					
    I would love to use this plugin, but for some reason it’s giving me a fatal error on activation (Fatal error: Cannot redeclare class FVCodeHighlighting in /…/wp-content/plugins/fv-code-highlighter/FVCodeHighlighter.php on line 13)..
    

    Any idea on what’s going wrong?
    
				
    
		
				
    
										
									
    
			
    
		
    
	
    19. 
	
  19. 
		
    
			
    
								
    
			
    
			
			
    
				
    
			
				
    
					
						Hiranthi on March 9, 2009 at 1:15 AM said:					
				
    
			
	
								
				
    
					
    Okay, the fatal error is fixed now. Apparently I had an extra folder called trunk which caused this (just re-downloaded and there isn’t any trunk folder in that one.. odd..).
    

    Still isn’t working though.. :( 
    
				
    
		
				
    
										
									
    
			
    
		
    
	
    20. 
	
  20. 
		
    
			
    
								
    
			
    
			
			
    
				
    
			
				
    
					
						John on May 13, 2009 at 4:18 AM said:					
				
    
			
	
								
				
    
					
    Great plugin. Cannot wait for PHP to start working. Also is there anything in the works for bash?
    
				
    
		
				
    
										
									
    
			
    
		
    
	
    21. 
	
  21. 
		
    
			
    
								
    
			
    
			
			
    
				
    
			
				
    
					
						American on July 1, 2009 at 11:03 PM said:					
				
    
			
	
								
				
    
					
    I love this Plugin, It’s great…
    

    The colors are great, and its working fine in PHP code…
    

    The only think I will suggest you to add are one or two functions…
    

    A Copy All Button and why not, a Print Button
    

    Well that are just ideas from others plugin…
    

    (Sorry my english, I am from Argentina)
    

    Are you working in more codes like JS C++ and more?
    
				
    
		
				
    
										
									
    
			
    
		
    
	
    22. 
	
  22. 
		
    
			
    
								
    
			
    
			
			
    
				
    
			
				
    
					
						Richard on July 4, 2009 at 6:38 AM said:					
				
    
			
	
								
				
    
					
    NeatHighlighter.com is a very easy to use highlighter and highlights code in standard colors
    
				
    
		
				
    
										
									
    
			
    
		
    
	
    23. 
	
  23. 
		
    
			
    
								
    
			
    
			
			
    
				
    
			
				
    
					
						Martin-Schubert on July 30, 2009 at 12:18 AM said:					
				
    
			
	
								
				
    
					
    This brings me to an idea:…
    
				
    
		
				
    
										
									
    
			
    
		
    
	
    24. 
	
  24. 
		
    
			
    
								
    
			
    
			
			
    
				
    
			
				
    
					
						mores on August 18, 2009 at 6:02 PM said:					
				
    
			
	
								
				
    
					
    Same problem as Hiranthi:
    
Fatal error: Cannot redeclare class FVCodeHighlighting in /home/.sites/***/***/wp-content/plugins/fv-code-highlighter/FVCodeHighlighter.php on line 13
    

    Interestingly enough, the plugin works. All code is being displayed all pretty but the plugin is in the “inactive” category.
    

    Any ideas what went wrong?
    
				
    
		
				
    
										
									
    
			
    
		
    
	
    25. 
	
  25. 
		
    
			
    
								
    
			
    
			
			
    
				
    
			
				
    
					
						Navin Poeran on August 21, 2009 at 9:52 PM said:					
				
    
			
	
								
				
    
					
    I think it doesn’t work with 2.8.4
    
				
    
		
				
    
										
									
    
			
    
		
    
	
    26. 
	
  26. 
		
    
			
    
								
    
			
    
			
			
    
				
    
			
				
    
					
						podarki on August 23, 2009 at 9:04 AM said:					
				
    
			
	
								
				
    
					
    Вообще, на мой взгляд, самое лучшее в личном блоге, так это самопознание.
    
				
    
		
				
    
										
									
    
			
    
		
    
	
    27. 
	
  27. 
		
    
			
    
								
    
			
    
			
			
    
				
    
			
				
    
					
						Ricardo Parente on September 2, 2009 at 4:13 AM said:					
				
    
			
	
								
				
    
					
    Hi Frank, I was wondering if you have intention of extending the code highlight to other languages like ColdFusion (cfml), Flex (mxml).
    
If not, where could I jump in to modify the highlighting ? I’m a ColdFusion developer and I post codes in my blog.
    
Thanks for your attention.
    
				
    
		
				
    
										
									
    
			
    
		
    
	
    28. 
	
  28. 
		
    
			
    
								
    
			
    
			
			
    
				
    
			
				
    
					
						Coochianohoda on September 4, 2009 at 9:12 PM said:					
				
    
			
	
								
				
    
					
    Thanks! Good news :) 
    
				
    
		
				
    
										
									
    
			
    
		
    
	
    29. 
	
  29. 
		
    
			
    
								
    
			
    
			
			
    
				
    
			
				
    
					
						carlo on September 7, 2009 at 8:14 PM said:					
				
    
			
	
								
				
    
					
    thanks  for this!
    

    <p>test
    
				
    
		
				
    
										
									
    
			
    
		
    
	
    30. 
	
  30. 
		
    
			
    
								
    
			
    
			
			
    
				
    
			
				
    
					
						Valiotoovelia on October 10, 2009 at 5:02 AM said:					
				
    
			
	
								
				
    
					
    Silkroad Online (silk road gold) is a fantasy MMORPG set in the 7th century AD, along the Silk Road between China and Europe. The game requires no periodic subscription fee, but players can purchase premium items to customize or accelerate gameplay.
    

    Silkroad Online is noted for silk road gold its “Triangular Conflict System” in which characters can select from the three jobs of trader, hunter, and thief to engage each other in player versus player combat. Thieves attack traders who are protected by hunters. Hunters kill thieves getting experience to level up to a higher level of hunter. Traders silk road gold complete trade runs to get experience to level up to a higher level of trader, and thieves kill traders and hunters to level up. Thieves can also steal goods dropped by traders to take to the thieves’ den to exchange for gold and thief experience.
    
				
    
		
				
    
										
									
    
			
    
		
    
	
    31. 
	
  31. 
		
    
			
    
								
    
			
    
			
			
    
				
    
			
				
    
					
						Simon Johnstone on January 31, 2010 at 10:17 AM said:					
				
    
			
	
								
				
    
					
    Awesome Plugin, had a few niggles but after reading others users comments I had it working in no time CHEERS
    
				
    
		
				
    
										
									
    
			
    
		
    
	
    32. 
	
  32. 
		
    
			
    
								
    
			
    
			
			
    
				
    
			
				
    
					
						ikapeng on February 3, 2010 at 6:12 AM said:					
				
    
			
	
								
				
    
					
    Thanks for the compliment!
    
				
    
		
				
    
										
									
    
			
    
		
    
	
    33. 
	
  33. 
		
    
			
    
								
    
			
    
			
			
    
				
    
			
				
    
					
						Dean Shelton on February 27, 2010 at 6:58 PM said:					
				
    
			
	
								
				
    
					
    Great plugin! One question. Can you adjust the width of the code snippit without hardcoding a css value for the span class?
    
				
    
		
				
    
										
									
    
			
    
		
    
	
    34. 
	
  34. 
		
    
			
    
								
    
			
    
			
			
    
				
    
			
				
    
					
						ateeq on March 4, 2010 at 1:38 PM said:					
				
    
			
	
								
				
    
					
    I have been trying to use this plug-in but have not succeeded. I use the syntax mentioned i.e.

    

    Select Code
    

    

    


    1

    
    		


    CODEBLOCK
    
    		

    

    

    

    . The codeblock is displayed but it is not highlighted. I am currently using wordpress version 2.9.2.
    
				
    
		
				
    
										
									
    
			
    
		
    
	
    35. 
	
  35. 
		
    
			
    
								
    
			
    
			
			
    
				
    
			
				
    
					
						buzzknow on March 21, 2010 at 6:54 PM said:					
				
    
			
	
								
				
    
					
    wonderful plugin!
    

    Thanks a lot :) 
    
				
    
		
				
    
										
									
    
			
    
		
    
	
    36.