Integrate_Geshi - e107inc/e107v1 GitHub Wiki

title: Integrate Geshi permalink: /Integrate_Geshi/

What is Geshi?

Geshi (GEneric Syntax HIghlighter) is a syntax highlighter for HTML, written in PHP. It has many powerful and unique features, including:

  • Easy-to-use syntax highlighting for virtually any language
  • The ability to change the styles of any highlighted element on the fly
  • Use of CSS classes to reduce the amount of output produced (GeSHi can also produce a stylesheet to be used with a language on the fly)
  • XHTML 1.0 Strict + CSS2 compliance
  • Auto-caps/noncaps of keywords
  • Line numbering

Downloading Geshi

Geshi can be downloaded from its homepage GeSHi - Generic Syntax Highlighter.

Please note: e107 v7 currently supports Geshi v1.0.7.10 released May 2006 and not the latest release.

Installing Geshi

When you download and extract Geshi to your computer, the directory structure is as follows:

+ geshi [Folder]*
    |----+ contrib [Folder]
    |----+ docs [Folder]
    |----+ geshi [Folder]
    |----- geshi.php

Upload the folder marked * above, along with all its contents, to the e107_plugins directory on your website. Next, go to your admin area, and select preferences, and in the menu to the right, select text rendering. There will be an option at the bottom asking you if you want to Use Geshi for syntax highlighting?. Select this to on, and in the box underneath, enter whatever code you wish Geshi to use by default.

If you cannot see either of these options in the preference area it means that your Geshi folder hasn't uploaded correctly or you have the wrong version installed. You should check this using your FTP client, and verify that the correct folder is uploaded to the e107_plugins directory and that you have downloaded Geshi v1.0.7.10.

Using Geshi

Below is an example of some code that Geshi will highlight and format:

You can insert that into all textareas where bbcodes are used. The [code=parameter] is the important text, it tells Geshi to start highlighting and formatting, whilst [/code] tells Geshi to stop. The parameter tells Geshi which syntax to use. It can be any name of the configured programming languages list. If no parameter is specified, the default one you set in the previous step is used.

What code does Geshi Support?

Below is a full list of all the code syntax that Geshi supports. You can use any of these in your e107 installation.

  • Actionscript
  • ADA
  • Apache Log
  • ASM
  • ASP
  • Bash
  • C
  • C for Macs
  • C#
  • C++
  • CAD DCL
  • CadLisp
  • CSS
  • Delphi
  • HTML
  • Java
  • Javascript
  • Lisp
  • Lua
  • Microprocessor ASM
  • NSIS
  • Objective C
  • OpenOffice BASIC
  • Oracle 8 SQL
  • Pascal
  • Perl
  • PHP
  • Python
  • Q(uick)BASIC
  • Smarty
  • SQL
  • VB.NET
  • Visual BASIC
  • Visual Fox Pro
  • XML

Adjusting your theme to support Geshi

Most themes have a separate style called .code to present the [code] in a different way. From the style.css just copy your .code style, paste it and rename it to .php

E.g. the style from default layout 'e107v4a' adds a border around the code and uses a specific background color:

.php{
    border: #9F9F9F 1px solid;
    padding: 8px;
    background-color: #EEECEC;
    font: 12px courier, arial, verdana, tahoma, helvetica, sans-serif;
    color:#000040;
}

Howto improve Geshi

see http://e107.org/e107_plugins/forum/forum_viewtopic.php?131712 for more information

Category:Development Category:API Category:Theming Category:PluginWriting Category:HOWTOs Category:FAQ