BIOS,Windows, Linux, Software,Security, Domains, Web Hosting

Top Five Code Syntax Highlighter

Here I list ten syntax highlighter plugins for wordpress and other website or hosting(Apache, Mozilla, Freshbook, etc), nor all the plug-edge test.  If you are using WordPress, most of them can be found in Wordpress dashboard->plugins, and can be download and install online, if you have a better recommendation, please feel free to let me know.

1. Crayon Syntax Highlighter

Crayon Syntax Highlighter built in PHP and jQuery, supports most customizable languages. Crayon makes it easy to manage language files and define custom language elements with regular expressions. Sample style:

2. Syntax Highlighter

Support plain text way to view the code, support Copy and Print.  Use <pre> Tags(label)  and it's Class attribue, usage:

  1. Contains shCore.js and shBrushYourBrush.js file
  2. Contains shCore.css and shThemeDefault.css two style files
  3. Using <pre /> create code area or <script />
  4. Called SyntaxHighlighter.all () JS method can be

Sample style:

3. SyntaxHighlighter Evolved

SyntaxHighlighter Evolved plugin comes from Syntax Highlighter.  It have several useful functions (display code, copy, print) in a toolbar if you move your mouse over, support word wrap, the effect was good. It still support for the wordpress visual configuration, such as whether to display line numbers, whether to display the toolbar, URL link processing. This plug-in use language tag which like a UBB tag to surround the codes, such as [php]code here[/php], [CSS]code here[/CSS], etc. you can refer to How to Highlight Your Code Syntax in WordPress for more language support.

In addition, there is another plug-in called Syntax Highlighter Plus, the author seems to be the same person, Syntax Highlighter Plus using tags: [sourcecode language = 'css'] code here [/ sourcecode], where language = 'css' changed to their needs display language. Example style:

4. Google Syntax Highlighter

This plug-in is more populer in wordpress, but it seems that this plug-in has a bug(or mistake?), if you edit your codes in visual mode, it will make the name attribue of <pre> tag lost. You need add again manually.

  1. Using<pre> </pre> tags to surround the code, it supports <textarea>, too, but that may cause some JS code can not perform, the official site recommend <pre> label. Support extended style configuration.
  2. Html format codes need to be convert, for example, "<"to "&lt;"
  3. Add javascript initialization codes behind the code region, or before the end of the page.
<link type="text/css" rel="stylesheet" href="css/SyntaxHighlighter.css" mce_href="css/SyntaxHighlighter.css"> </ link>
<script language="javascript" src="js/shCore.js" mce_src="js/shCore.js"> </script>
<script language="javascript" src="js/shBrushCSharp.js" mce_src="js/shBrushCSharp.js"> </script>
<script language="javascript" src="js/shBrushXml.js" mce_src="js/shBrushXml.js"> </script>
<script language="javascript">
dp.SyntaxHighlighter.ClipboardSwf = '/flash/clipboard.swf';
dp.SyntaxHighlighter.HighlightAll ('code');
</ Script>

Example style:

4. WP-Chili

WP-Chili and Chili are relatively simple, use a standard code tag, code area required escape characters manually. It seems the two plug-ins do not  update synchronized with each other, visiting the official web site to down is recommendation. Chili support jquery customize, such as display line numbers, starting line number, etc. Usage: A. Write your codes between <code class="lang"> and </code>, replace "lang" with your actual language alias. It support css/php/script/html/mysql and other language display. Example: <code> echo "<script> alert ('Hello' + $ name); </ script >";</ code> <code> alert ('Hello' + $ name); </ code> B. Then call Chili's javascript in your page(article):

<script type="text/javascript" src="SOMEWHERE_ELSE/jquery.js" mce_src="SOMEWHERE_ELSE/jquery.js"> </ script>
<script type="text/javaScript" src="SOMEWHERE/jquery.chili-2.2.js" mce_src="SOMEWHERE/jquery.chili-2.2.js"> </ script>
<script type="text/javascript">
ChiliBook.recipeFolder = "SOMEWHERE /";
</ Script>

(Please download the latest version from WP-Chili 2.2) Example style:

5. WP-SynHighlight

WP-SynHighlight is a WordPress plug-in, easy to highlight your code syntax, it's usage is more like a BBCode tag, and has a good compatibility. In the visual mode, you can paste any codes without any escape manually. WP-SynHighlight using the tag is [codesyntax], used in WordPress, you can automatically from the visual mode, and more, please refer to the official home page. Last Updated: 2010.05 Example style:


6. WP-Syntax

WP - Syntax is also a label with the language format using <pre> block code area, compatibility is also very good. Last Updated: 2009.06 There are also some others highlighter plug-ins,  some of them have fallen. You can try any highlighter plug-in at the test period, if you are using one of them, do not change your highlighter plug-in again is recommended. Because different plug-ins may have different agreements.If you changed, you should make sure if you need to modify all your articles to ensure they will work on proper.


Leave a Reply

Subscribe to BootBeta Comments RSS feed to receive notification of latest comments posted.


  • Enter Email Address:

Recent Post

Copyright@ 2010-2014 Bootbeta All Rights Reserved.
HooBlog Ver 1.5 Build 20140530