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

Introduction of Code Syntax Highlighter

If you are a programmer or are using wordpress, you must have known there are many code syntax highlighters, Syntax Highlighter is a famous one and support almost all the common languages, many highlighter plugins are developed basing on Syntax Highlighter. such as Google syntax highlighter, Syntax Highlighter and Code Colorizer, SyntaxHighlighter Evolved,Syntax Highlighter and Code Colorizer, etc. (There are also some syntax highlighters are based on Geshi library.)

Notes:

  • Corresponding highlighter‘s usage may be accomplished automatically by itself, for most people, they do not need to add them manually. 
  • For most people, he/she do not need to know about this, just download and install the highlighter plugin in wordpress dashboard.
  • This article only tell us these highlighters how to work for your develpment reference.
  • If you want to transplant code syntax highlighter to your website manually, this article may be good getting started.

1. There are many popular highlighter plugins

Different highlighter may use different alias or identification tags, their features are usually different. for example:

  • Some highlighters are using a visual design. the plugin usually can be bulit-in with wordpress editor. you can add/remove or edit your source code in a friendly pop-up window.
  • Some highlighters may need you add the identifiation tags manually, these highlighters need some professional skills who must acquaint with web development language.

You should look for the usage of one highlighter for the first time if you want to use it. Usually, these syntax highlighters may support many languages, such as, Syntax highlighter support C++, C#, css, delphi, java, javascript, php, python, ruby, sql, html, etc, 

2. Sample codes of Highlight Code Syntax

Here are some usage I have met, one of them can be used in almost highlighters. Usually they support addition arguments from the class attribue.

You can get details from http://code.google.com/p/syntaxhighlighter/wiki/Configuration. yes, you may find some other identifiers determined by that plugin. 

A. Google Syntax Highlighter use <pre> tag with a class attribute to identify.

Code Region(the class is just the alias above):

<pre name="code" class="php">
... your php code ...
</pre>

Support Region:

<link type="text/css" rel="stylesheet" href="css/SyntaxHighlighter.css"></link>
<script language="javascript" src="js/shCore.js"></script>
<script language="javascript" src="js/shBrushPhp.js"></script>
<script language="javascript">
dp.SyntaxHighlighter.ClipboardSwf = '/js/clipboard.swf';
dp.SyntaxHighlighter.HighlightAll('code');
</script>

B. usage in SyntaxHighlighter

Code Region(the class is just the alias above):

<pre class="brush:php>
... your php code ...
</pre>

Support Region:

<script class="javascript" src="js/shCore.js"></script>
<script class="javascript" src="js/shBrushPhp.js"></script>
<script class="javascript">
SyntaxHighlighter.ClipboardSwf = 'js/clipboard.swf';
SyntaxHighlighter.all();
</script>

Comments(0)  

Leave a Reply

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

Subscriptions

  • Enter Email Address:

Recent Post

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