Difference between revisions of "GeSHi"

From University of Washington - Ubicomp Research Page
Jump to: navigation, search
 
Line 1: Line 1:
[http://qbnz.com/highlighter/index.php GeSHi] or the Generic Syntax Highlighter is a PHP program which enables you to have your code highlighted in color, like you would see in Emacs, Visual Studio, Matlab, etc.
+
__TOC__
  
To use GeSHi you simply type the name of the language you would like to use in brackets before/after the code, like so <tt><myLanguage> for i=1 blah return </myLanguage></tt>.  
+
== Overview==
 +
[http://qbnz.com/highlighter/index.php GeSHi] or the Generic Syntax Highlighter is a PHP program which enables you to have your code highlighted in color, like you would see in Emacs, Visual Studio, Matlab, etc. Once you have it installed, it's really simple to use the code highlighting feature while writing your pages. Simply place the name of the language you would like to use in brackets before/after the code, like so <tt><myLanguage> for cur=1 blah return </myLanguage></tt>.  
  
 
+
===Example===
See the GeshiHighlight.php section below to see Geshi in action. The code from GeshiHighlight.php was simply pasted in between a block with:
+
<ul>
 +
If we have some Matlab code we want to include in our page we would just need to place it within a <tt>Matlab</tt> block, like so:
 
<pre>
 
<pre>
<php>  
+
<Matlab>for cur=1
... the code goes here ...
+
  blah
</php>
+
return
 +
</Matlab>  
 
</pre>
 
</pre>
 +
Which would give you the following:
 +
<matlab>for cur=1
 +
  blah
 +
return
 +
</matlab>
 +
<i>Note:</i> The first line of code was placed on the same line as the <tt>Matlab</tt> block to avoid a leading carriage return.
  
The following languages are currently supported:
+
See the [[GeSHi#GeshiHighlight.php|GeshiHighlight.php]] section in the installation instructions for another example of code highlighting with PHP.
 +
</ul>
 +
 
 +
===Supported Languages===
 +
<ul>
 +
The following languages are currently supported by GeSHi:
 
<pre>
 
<pre>
 
"actionscript-french"  "actionscript"    "ada"            "apache"
 
"actionscript-french"  "actionscript"    "ada"            "apache"
Line 28: Line 42:
 
"vb"                  "vhdl"            "visualfoxpro"  "xml"
 
"vb"                  "vhdl"            "visualfoxpro"  "xml"
 
</pre>
 
</pre>
 +
</ul>
 +
 +
 +
 +
== Installation ==
 +
To install the GeSHi plugin you need to:
 +
# Download the latest version of GeSHi from the [http://qbnz.com/highlighter/ GeSHi homepage]
 +
# Extract the .tar.gz into your <tt>extensions</tt> directory (you should end up with <tt>extensions/geshi</tt>)
 +
# Create a new file named <tt>GeSHiHighlight.php</tt> your <tt>extensions</tt> directory. And paste in the code from the [[GeSHi#GeshiHighlight.php|GeshiHighlight.php]] section (everything between <tt><?php ?></tt>)
 +
#*If you need to change the location of your GeSHi installation be sure to change <tt>extensions/geshi/geshi/</tt>, on lines 12 and 48, to the appropriate directory.
 +
# Ensure that your directory structure looks similar to [[GeSHi#Directory Structure|Directory Structure]]
 +
# Edit your wiki's LocalSettings.php file and add the line
 +
:<php>include_once( 'extensions/GeSHiHighlight.php' );</php>
 +
:I typically add this above the <tt>$wgSiteName</tt> line.</li>
 +
:*Make sure that the filename and path match your configuration (i.e. if you didn't do the fancy GeSHi capitalization or put it in another directory)
 +
* Done, if you want to change the colors a particular language is using you can edit the definitions inside the geshi directory.
 +
 +
 +
Your extensions directory should now look something like this (see [[GeSHi#Directory Structure|Directory Structure]] for more detailed output)
 +
<bash>myWiki/extensions/geshi/ ] ls
 +
contrib  docs  geshi  geshi.php
 +
</bash>
 +
 +
===Directory Structure===
 +
<ul>
 +
For example if have the <tt>tree</tt> command you would see something similar to this inside your extensions directory:
 +
<bash>tree extensions/
 +
extensions/
 +
|-- GeSHiHighlight.php
 +
`-- geshi
 +
    |-- contrib
 +
    |  |-- cssgen.php
 +
    |  `-- example.php
 +
    |-- docs
 +
    |  |-- BUGS
 +
    |  |-- CHANGES
 +
    |  |-- COPYING
 +
    |  |-- README
 +
    |  |-- THANKS
 +
    |  |-- TODO
 +
    |  |-- api
 +
    |  |  |-- __filesource
 +
    |  |  |  |-- fsource_core__contribcssgen.php.html
 +
    |  |  |  | ...  <snip> ...
 +
    |  |  |  `-- fsource_core__geshixml.php.html
 +
    |  |  |-- blank.html
 +
    |  |  |-- classtrees_core.html
 +
    |  |  |-- core
 +
    |  |  |  |-- GeSHi.html
 +
    |  |  |  |-- _contrib_cssgen_php.html
 +
    |  |  |  | ...  <snip> ...
 +
    |  |  |  `-- _geshi_xml_php.html
 +
    |  |  |-- elementindex.html
 +
    |  |  |-- elementindex_core.html
 +
    |  |  |-- errors.html
 +
    |  |  |-- index.html
 +
    |  |  |-- li_core.html
 +
    |  |  |-- media
 +
    |  |  |  |-- banner.css
 +
    |  |  |  |-- images
 +
    |  |  |  |  |-- AbstractClass.png
 +
    |  |  |  |  | ...  <snip> ...
 +
    |  |  |  |  `-- up_button.png
 +
    |  |  |  |-- lib
 +
    |  |  |  |  `-- classTree.js
 +
    |  |  |  `-- stylesheet.css
 +
    |  |  |-- packages.html
 +
    |  |  `-- todolist.html
 +
    |  |-- geshi-doc.html
 +
    |  `-- geshi-doc.txt
 +
    |-- geshi
 +
    |  |-- actionscript-french.php
 +
    |  | ...  <snip> ...
 +
    |  `-- xml.php
 +
    `-- geshi.php
 +
 +
10 directories, 241 files
 +
</bash>
 +
</ul>
  
==GeshiHighlight.php==
+
===GeshiHighlight.php===
 +
<ul>
 
The code for adding GeSHi to MediaWiki is shown below (with some slight modifications) and can also be found at <tt>http://www.wickle.com/wiki/index.php/Geshi_Syntax_Highlight_extension</tt> and <tt>http://meta.wikimedia.org/wiki/User_talk:Coffman/Geshi_Syntax_Highlight_extension</tt>.
 
The code for adding GeSHi to MediaWiki is shown below (with some slight modifications) and can also be found at <tt>http://www.wickle.com/wiki/index.php/Geshi_Syntax_Highlight_extension</tt> and <tt>http://meta.wikimedia.org/wiki/User_talk:Coffman/Geshi_Syntax_Highlight_extension</tt>.
 
<php><?php
 
<php><?php
Line 90: Line 184:
 
?>
 
?>
 
</php>
 
</php>
 
==Installation==
 
To install the plugin you need to:
 
<ul>
 
<li>Create a new file called <tt>GeSHiHighlight.php</tt> and paste the code from the above section into this file; everything between <tt><?php and ?></tt>
 
<ul>
 
<li>If you need to change the location of your GeSHi installation be sure to change <tt>extensions/geshi/geshi/</tt>, on lines 12 and 48, to the appropriate directory.
 
</ul>
 
<li>Install GeSHI by going to [http://qbnz.com/highlighter/ GeSHi homepage] and downloading the latest version. Extract it to your <tt>extensions/geshi</tt> directory. Make sure that when you extract GeSHi you end up with a <tt>geshi</tt> directory inside your <tt>extensions</tt> directory.
 
<li>Edit your wiki's LocalSettings.php file and add the line
 
<php>include_once( 'extensions/GeSHiHighlight.php' );</php>
 
I typically add this above the <tt>$wgSiteName</tt> line.</li>
 
<ul>
 
<li>Make sure that the filename and path match your configuration (i.e. if you didn't do the fancy GeSHi capitalization or put it in another directory)
 
 
</ul>
 
</ul>
</ul>
 
 
 
Your extensions directory should look something like this:
 
<pre>
 
myWiki/extensions/geshi/ ] ls
 
contrib  docs  geshi  geshi.php
 
</pre>
 
 
For example if have the <tt>tree</tt> command you would see something similar to this:
 
<bash>
 
tree extensions/
 
extensions/
 
|-- GeSHiHighlight.php
 
`-- geshi
 
    |-- contrib
 
    |  |-- cssgen.php
 
    |  `-- example.php
 
    |-- docs
 
    |  |-- BUGS
 
    |  |-- CHANGES
 
    |  |-- COPYING
 
    |  |-- README
 
    |  |-- THANKS
 
    |  |-- TODO
 
    |  |-- api
 
    |  |  |-- __filesource
 
    |  |  |  |-- fsource_core__contribcssgen.php.html
 
    |  |  |  | ...  <snip> ...
 
    |  |  |  `-- fsource_core__geshixml.php.html
 
    |  |  |-- blank.html
 
    |  |  |-- classtrees_core.html
 
    |  |  |-- core
 
    |  |  |  |-- GeSHi.html
 
    |  |  |  |-- _contrib_cssgen_php.html
 
    |  |  |  | ...  <snip> ...
 
    |  |  |  `-- _geshi_xml_php.html
 
    |  |  |-- elementindex.html
 
    |  |  |-- elementindex_core.html
 
    |  |  |-- errors.html
 
    |  |  |-- index.html
 
    |  |  |-- li_core.html
 
    |  |  |-- media
 
    |  |  |  |-- banner.css
 
    |  |  |  |-- images
 
    |  |  |  |  |-- AbstractClass.png
 
    |  |  |  |  | ...  <snip> ...
 
    |  |  |  |  `-- up_button.png
 
    |  |  |  |-- lib
 
    |  |  |  |  `-- classTree.js
 
    |  |  |  `-- stylesheet.css
 
    |  |  |-- packages.html
 
    |  |  `-- todolist.html
 
    |  |-- geshi-doc.html
 
    |  `-- geshi-doc.txt
 
    |-- geshi
 
    |  |-- actionscript-french.php
 
    |  | ...  <snip> ...
 
    |  `-- xml.php
 
    `-- geshi.php
 
 
10 directories, 241 files
 
</bash>
 

Revision as of 00:53, 10 October 2006

Overview

GeSHi or the Generic Syntax Highlighter is a PHP program which enables you to have your code highlighted in color, like you would see in Emacs, Visual Studio, Matlab, etc. Once you have it installed, it's really simple to use the code highlighting feature while writing your pages. Simply place the name of the language you would like to use in brackets before/after the code, like so <myLanguage> for cur=1 blah return </myLanguage>.

Example

    If we have some Matlab code we want to include in our page we would just need to place it within a Matlab block, like so:
    <Matlab>for cur=1
       blah 
    return 
    </Matlab> 
    

    Which would give you the following: <matlab>for cur=1

      blah 
    

    return </matlab> Note: The first line of code was placed on the same line as the Matlab block to avoid a leading carriage return.

    See the GeshiHighlight.php section in the installation instructions for another example of code highlighting with PHP.

Supported Languages

    The following languages are currently supported by GeSHi:
    "actionscript-french"  "actionscript"     "ada"            "apache"
    "applescript"          "asm"              "asp"            "bash"
    "blitzbasic"           "caddcl"           "cadlisp"        "c_mac"
    "c"                    "cpp"              "csharp"         "css"
    "delphi"               "diff"             "div"            "dos"
    "d"                    "eiffel"           "freebasic"      "gml"
    "html4strict"          "ini"              "inno"           "java"
    "javascript"           "lisp"             "lua"            "matlab"
    "mpasm"                "mysql"            "nsis"           "objc"
    "ocaml-brief"          "ocaml"            "oobas"          "oracle8"
    "pascal"               "perl"             "php-brief"      "php"
    "python"               "qbasic"           "ruby"           "scheme"
    "sdlbasic"             "smarty"           "sql"            "vbnet"
    "vb"                   "vhdl"             "visualfoxpro"   "xml"
    


Installation

To install the GeSHi plugin you need to:

  1. Download the latest version of GeSHi from the GeSHi homepage
  2. Extract the .tar.gz into your extensions directory (you should end up with extensions/geshi)
  3. Create a new file named GeSHiHighlight.php your extensions directory. And paste in the code from the GeshiHighlight.php section (everything between <?php ?>)
    • If you need to change the location of your GeSHi installation be sure to change extensions/geshi/geshi/, on lines 12 and 48, to the appropriate directory.
  4. Ensure that your directory structure looks similar to Directory Structure
  5. Edit your wiki's LocalSettings.php file and add the line
<php>include_once( 'extensions/GeSHiHighlight.php' );</php>
I typically add this above the $wgSiteName line.</li>
  • Make sure that the filename and path match your configuration (i.e. if you didn't do the fancy GeSHi capitalization or put it in another directory)
  • Done, if you want to change the colors a particular language is using you can edit the definitions inside the geshi directory.


Your extensions directory should now look something like this (see Directory Structure for more detailed output) <bash>myWiki/extensions/geshi/ ] ls contrib docs geshi geshi.php </bash>

Directory Structure

    For example if have the tree command you would see something similar to this inside your extensions directory: <bash>tree extensions/ extensions/ |-- GeSHiHighlight.php `-- geshi |-- contrib | |-- cssgen.php | `-- example.php |-- docs | |-- BUGS | |-- CHANGES | |-- COPYING | |-- README | |-- THANKS | |-- TODO | |-- api | | |-- __filesource | | | |-- fsource_core__contribcssgen.php.html | | | | ... <snip> ... | | | `-- fsource_core__geshixml.php.html | | |-- blank.html | | |-- classtrees_core.html | | |-- core | | | |-- GeSHi.html | | | |-- _contrib_cssgen_php.html | | | | ... <snip> ... | | | `-- _geshi_xml_php.html | | |-- elementindex.html | | |-- elementindex_core.html | | |-- errors.html | | |-- index.html | | |-- li_core.html | | |-- media | | | |-- banner.css | | | |-- images | | | | |-- AbstractClass.png | | | | | ... <snip> ... | | | | `-- up_button.png | | | |-- lib | | | | `-- classTree.js | | | `-- stylesheet.css | | |-- packages.html | | `-- todolist.html | |-- geshi-doc.html | `-- geshi-doc.txt |-- geshi | |-- actionscript-french.php | | ... <snip> ... | `-- xml.php `-- geshi.php 10 directories, 241 files </bash>

GeshiHighlight.php

    The code for adding GeSHi to MediaWiki is shown below (with some slight modifications) and can also be found at http://www.wickle.com/wiki/index.php/Geshi_Syntax_Highlight_extension and http://meta.wikimedia.org/wiki/User_talk:Coffman/Geshi_Syntax_Highlight_extension. <php><?php
    1. GeshiHighlight.php
    2. By: E. Rogan Creswick (aka: Largos)
    3. largos@ciscavate.org
    4. ciscavate.org/wiki/
    5. Loosely based on SyntaxHighlight.php by Coffman, (www.wickle.com)
    6. Code arranged and packaged by Coffman (www.wickle.com) ;) 10-nov-2004
    7. Bug fix by Douglas McLaughlin (www.stricq.com) 9-Oct-2005
    include('extensions/geshi/geshi.php'); global $lang; class GeshiSyntaxSettings { }; $wgGeshiSyntaxSettings = new GeshiSyntaxSettings; $wgExtensionFunctions[] = "wfGeshiSyntaxExtension"; function wfGeshiSyntaxExtension() { global $wgParser;
    1. $langArray = array("actionscript","ada","apache","asm","asp","bash",
    2. "caddcl","cadlisp","c","cpp","css","delphi",
    3. "html4strict","java","javascript","lisp", "lua",
    4. "nsis","oobas","pascal","perl","php-brief","php",
    5. "python","qbasic","sql","vb","visualfoxpro","xml");
    $langArray = array( "actionscript-french", "actionscript", "ada", "apache", "applescript", "asm", "asp", "bash", "blitzbasic", "caddcl", "cadlisp", "c_mac", "c", "cpp", "csharp", "css", "delphi", "diff", "div", "dos", "d", "eiffel", "freebasic", "gml", "html4strict", "ini", "inno", "java", "javascript", "lisp", "lua", "matlab", "mpasm", "mysql", "nsis", "objc", "ocaml-brief", "ocaml", "oobas", "oracle8", "pascal", "perl", "php-brief", "php", "python", "qbasic", "ruby", "scheme", "sdlbasic", "smarty", "sql", "vbnet", "vb", "vhdl", "visualfoxpro", "xml" ); foreach ($langArray as $lang){ $func = create_function('$text','$geshi = new GeSHi($text,"'.$lang.'","extensions/geshi/geshi/"); return $geshi->parse_code();');
    1. If GeSHI doesn't work then try commenting out the previous line and uncomment this next line to
    2. see the errors that GeSHI is encountering. This will output the error stream rather than the parsed stream
    3. $geshi->error();');
    $wgParser->setHook($lang,$func); } } ?> </php>