DEPRECATION WARNING

This documentation is not using the current rendering mechanism and is probably outdated. The extension maintainer should switch to the new system. Details on how to use the rendering mechanism can be found here.

EXT: Source Code Highlighter

Author:Kasper Skårhøj
Created:2002-11-01T00:32:00
Changed:2015-02-12T21:23:44.990000000
Author:Wolfgang Rotschek
Email:typo3@dev-null.at
Info 3:
Info 4:

EXT: Source Code Highlighter

Extension Key: dev_null_geshi

Copyright 2014, Wolfgang Rotschek, <typo3@dev-null.at>

This document is published under the Open Content License

available from http://www.opencontent.org/opl.shtml

The content of this document is related to TYPO3

- a GNU/GPL CMS/Framework available from www.typo3.com

Table of Contents

EXT: Source Code Highlighter 1

Introduction 1

What does it do? 1

Screenshots 2

Users manual 2

Configuration 3

Line numbers 3

External CSS 3

Source container 3

Tab width 3

Styling 3

Known problems 4

To-Do list 4

Changelog 4

Introduction

What does it do?

The source code highlighter is capable of highlighting 70+ different languages and adding line numbers, making it easy to publish source code. The highlighting is done using the GeSHi ( http://qbnz.com/highlighter/ ) highlighting engine.

Information about GeSHi can be found at following locations:

The project is derived from the extensions geshilib and sema_sourcecode.

Screenshots

img-1 The following is an example of some php source formatted with the plugin.

The plugin interface in the backend.

img-2

Users manual

Adding source code to your site using this extension is a trivial task. When creating a new content element, the Souce Code Highlighter plugin should be listed under plugins, alternatively you can create a content element and set its type to “insert plugin”, and then select the Source Code Highlighter in the plugin dropdown list.

In the plugin options, shown for the content element when editing it, you can add the code you want formatted in the code field and select the language the plugin should format you source after. In the “options” tab you can define at which number the line numbering should start. A option to highlight specific lines is also available in the “options” tab, the list of lines should be given in a comma separated format (eg. 1,2,53,1004).

Configuration

The following rendering options can be configured using typoscript in your sites template setup. All options can be set either for all languages, or for a specific language. If you want to configure settings for all languages you can write plugin.tx_devnullgeshi_pi1.default, or if you only want it to apply to formatted latex source then you can useplugin.tx_devnullgeshi_pi1.latex.

Line numbers

Line numbers are enabled/disabled by the linenumbers.enableoption. Three options is supplied for line numbers, no line numbers (0), normal line numbers (1) or fancy line numbers (2). By default normal line numbers is enabled.

The following will enable fancy line numbers for all languages.

plugin.tx_devnullgeshi_pi1.default.linenumbers.enable = 2

External CSS

The CSS styles needed to display the source code is by default placed at the beginning of the html page. If you want to use inline styles in stead you can disable the external CSS by using this option.

plugin.tx_devnullgeshi_pi1.global.external = 0

Source container

By default the formatted source code is wrapped in a pair of PRE tags. It is also possible to wrap the source in DIV tags or not wrapping it at all (if you choose this option you should disable external CSS, or else the source code is not styled correctly). The GeSHi documentation explainers the pros and cons of PRE and DIV tags (see http://qbnz.com/highlighter/geshi-doc.html#the-code-container ).

The following line will set the container type to DIV tags. Other options is PRE and NONE.

plugin.tx_devnullgeshi_pi1.default.view.container = DIV

Notice

Choosing to render the source code without line numbers and using the the PRE tag can results in non-XHTML strict compliant output. Highlighted lines are output as DIV tags which is not allowed inside PRE tags. To use span tags instead use the following setting:

plugin.tx_devnullgeshi_pi1.global.xhtmlcompliant = 1

This setting is experimental, and highlighted lines are not rendered quit as good as when using DIV tags.

Tab width

If you are using the DIV container type, tabs are converted into spaces. This setting determines how many spaces should be used for one tab.

plugin.tx_devnullgeshi_pi1.default.view.tabwidth = 4

Styling

You can change the style of integers, comments and all other elements in the formatted source code. In general all styles can be applied by setting someelement = color:black;. Defining a new style overwrites the old style, if you want to disable this behavior you can setsomeelement.overwrite = 0.

Styling the container

You can set a style for the source container by using the following options.

plugin.tx_devnullgeshi_pi1.default.view = font-weight:bold;

plugin.tx_devnullgeshi_pi1.default.view.overwrite = 0

Styling the code

If you want to change the style of the actual code, and not line numbers and the container then use the following options.

plugin.tx_devnullgeshi_pi1.default.code = font-weight:bold;

plugin.tx_devnullgeshi_pi1.default.code.overwrite = 0

Styling line numbers

Styling line numbers is done nearly the same way as the source container. If you are using the fancy line numbers option, then for each 5 numbers a special “fancy” number is shown, with its own style (normally this has a bold font-weight).

plugin.tx_devnullgeshi_pi1.default.linenumbers = font-color:#000000;

plugin.tx_devnullgeshi_pi1.default.linenumbers.fancy = font- weight:bold;

plugin.tx_devnullgeshi_pi1.default.linenumbers.overwrite = 0

Styling escape characters, symbols, strings and integers.

These elements can be styled with the following options.

plugin.tx_devnullgeshi_pi1.default.escape = ...

plugin.tx_devnullgeshi_pi1.default.escape.overwrite = 0

plugin.tx_devnullgeshi_pi1.default.symbols = ...

plugin.tx_devnullgeshi_pi1.default.symbols.overwrite = 0

plugin.tx_devnullgeshi_pi1.default.strings = ...

plugin.tx_devnullgeshi_pi1.default.strings.overwrite = 0

plugin.tx_devnullgeshi_pi1.default.numbers = ...

plugin.tx_devnullgeshi_pi1.default.numbers.overwrite = 0

Styling comments, keywords and methods.

Styling of these elements is nearly identical to strings and integers, but depending on the language being styled there can be more than one type of element in these categories. These are enumerated from with an integer (starting from 0). For comments there are both inline comments and multiline comments. The following options are available:

plugin.tx_devnullgeshi_pi1.default.comments.0 = color:#000000;

plugin.tx_devnullgeshi_pi1.default.comments.0.overwrite = 0

plugin.tx_devnullgeshi_pi1.default.comments.multi = font- weight:bold;

plugin.tx_devnullgeshi_pi1.default.comments.multi.overwrite = 0

plugin.tx_devnullgeshi_pi1.default.keywords.0 = color:#000000;

plugin.tx_devnullgeshi_pi1.default.keywords.0.overwrite = 0

plugin.tx_devnullgeshi_pi1.default.methods.0 = color:#000000;

plugin.tx_devnullgeshi_pi1.default.methods.0.overwrite = 0

If more than one methods type is defined for the language, the next type can be altered with:

plugin.tx_devnullgeshi_pi1.default.methods.1 = color:#000000;

plugin.tx_devnullgeshi_pi1.default.methods.1.overwrite = 0

The different types is very language specific, so you can either use the trail and error method, or look in the specific language file located in the GeSHi folder for some clues about the correct number. If you have any problems with this then do not hesitate to contact me by email < sema@semaprojects.net >, I will gladly help.

Known problems

It is difficult to copy the published source code when line numbers is shown (the line numbers is copied with the source).

To-Do list

Solve the problem described in the “known problems” section.

Changelog

1.0.0

a

1.0.0

b

Initial version

1.0.1

a

1.0.1

b

Compatibility for 6.2

img-3 EXT: Source Code Highlighter - 10