FREE Drupal 8 Site Building Course (over 4 hours of video)

Highlight Code With GeSHi Filter

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.

About the Author

Ivan is the founder of Web Wash and spends most of his time consulting and writing about Drupal. He's been working with Drupal for 10 years and has successfully completed several large Drupal projects in Australia.

Leave a Reply 14 comments

Ajit - July 17, 2012 Reply

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?

    Ivan Zugec - July 17, 2012 Reply

    You should be able to adjust the code block with CSS.

Bahar - April 7, 2013 Reply

Thanks a lot Ivan, the filter processing order tip helped me get it finally working in my tutorials 🙂

Cheers!

ha.azizi - April 22, 2013 Reply

hi
i use this tutorials and work geshi without editor wysiwyg.
how to use geshi in tinymce or cheditor?

    Ivan Zugec - April 22, 2013 Reply

    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

    dave bruns - April 7, 2014 Reply

    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.

      dave bruns - April 8, 2014 Reply

      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.

        Ivan Zugec - April 9, 2014 Reply

        Cool, thanks for the update.

ha.azizi - April 23, 2013 Reply

hi
I use wysiwyg-geshi module ,but don’t work.
😐
thanks for best article.

Valery - April 6, 2015 Reply

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 🙂

    Ivan Zugec - April 6, 2015 Reply

    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.

Fiki Firmansyah - December 29, 2016 Reply

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.

Leave a Reply: