If you’re writing some type of article or blog post that’s displaying code, a syntax highlighter can be very useful. I searched through Drupal’s modules and found a few, Syntax Highlighter, GeSHi Filter and JavaScript Syntax Highlighter. Both the “Syntax Highlighter” and “JavaScript Syntax Highlighter” are written in JavaScript, the code highlighting is handled by the browser.
GeSHi on the other hand is written in PHP and the code is highlighted when the content is saved in Drupal. In this article, I’ll demonstrate how to install and configure the GeSHi Filter module on a Drupal 7 site.
How to install GeSHi
Installing the GeSHi Filter module is relatively easy. All that’s required is the 7.x-2.x branch of the Libraries API and the GeSHi library itself. When downloading the GeSHi library make sure you download one of the 1.0.x version, the 1.1.x version is not supported by the module yet. You can download the library from this link.
Go ahead and download the GeSHi Filter and install it.
Next, download and install Libraries API. Make sure you download the 7.x-2.x version of Libraries API.
Finally, download the GeSHi library and copy into sites/all/libraries or where ever your “libraries” directory is located.
Configuring GeSHi
Once you have installed all the required modules and libraries go to admin/config/content/formats/geshifilter to configure GeSHi.
The first important item you’ll need to configure is which languages you want enabled. Click on the “Languages” tab from the GeSHi configuration page.
To enable extra languages simply click on the “All” or “Disabled” to view other languages. Take note of the “Tag/Language attribute value” we’ll use that value to wrap our code with when we need to highlight some code. For example, if you want to highlight some PHP code, then wrap it with <php></php>. Same goes for JavaScript, simply wrap it with <javascript></javascript>.
So far we haven’t made any changes to the default configuration, next we’ll configure a filter to get GeSHi working. Go to admin/config/content/formats and add GeSHi filter to a specific text format. If you are using the “Limit allowed HTML tags” filter, make sure GeSHi is run after that particular filter.
Using GeSHi
Now that we have installed and configured GeSHi, it’s time to take it for a test run. Go ahead and create a piece of content with some PHP code within the text.
If everything has been configured corrected, you should see some highlighted PHP code once you save the form.
If no highlighting occurred, double check the order of your filters.
Using The GeSHi Field
The GeSHi filter ships with another module called “GeSHi field”. This module provides a field which allows users to paste code into a text area. This can be useful if you don’t want to allow users to paste code within the body field.
To use the GeSHi field, to go admin/structure/types and add the field to an article or page content type.
Once the new field has been created, create a piece of content and add some PHP code within the newly created field.
Save the form and view the highlighted code.
Thank you so much of the article. It helped a lot!
Just wanted to know if there is a way in which I could add scroll-bar in code (horizontal and vertical), and fix the size of code block?
You should be able to adjust the code block with CSS.
Thanks a lot Ivan, the filter processing order tip helped me get it finally working in my tutorials 🙂
Cheers!
hi
i use this tutorials and work geshi without editor wysiwyg.
how to use geshi in tinymce or cheditor?
I have never used geshi within an editor because it has never worked well.
I would look at the following module:
http://drupal.org/project/wysiwyg-geshi
I haven’t yet tried it, but I noticed this project today while gathering a list of links: https://drupal.org/project/wysiwyg_geshi
This module extends the Wysiwyg module and provides a new button for adding source code to be highlighted with the GeSHi Filter module. Only CKEditor is supported at the moment.
Just reporting back to say that I was able to get wysiwyg_geshi to work with CKeditor 4.x and wysiwyg 7.2 dev. It seems that one of the main things it does (apart for making it convenient to insert a language block) is disable some entity processing in the editor. It comes with a ckeditor.config.js file that does:
CKEDITOR.editorConfig = function(config) {
config.entities = false;
config.basicEntities = false;
config.htmlEncodeOutput = false;
}
Note that the names of this project and the one mentioned by Ivan above are slightly different. This one uses an underscore (wysiwyg_geshi) whereas the other project uses a hyphen.
Cool, thanks for the update.
hi
I use wysiwyg-geshi module ,but don’t work.
😐
thanks for best article.
Hi, Ivan!
Are you faced with the problem of displaying bash commands in GeSHi? For example, wget…
If you use the tag “code”, everything is fine. But when I add a language attribute (bash – for theming), GeSHi treats the address as a link with the addition of tag “a”.
Example:
input code – wget http://sourceforge.net/projects/geshi/files/geshi/GeSHi%201.0.8.11/GeSHi-1.0.8.11.tar.gz
mapping – wget a href=”http://sourceforge.net/projects/geshi/files/geshi/GeSHi%201.0.8.11/GeSHi-1.0.8.11.tar.gz…
GeSHi adds a hyperlink and hides angle brackets 🙂
Are you using the “Convert URLs into links” filter? This will convert URLs, which are in code, into links.
Try adjusting the order of the filters or you may have to remove the “Convert URLs into links” filter all together.
Ivan, thanks!
edit ckeditor.config.js and change:
“// config.protectedSource.push(/
[\s\S]*?/gi);"into
"config.protectedSource.push(/
[\s\S]*?/gi);"tang are not protected in drupal 7+ anymore.Thanks Fiki.