Zendesk Logo

Syntax highlighting in Zendesk

There has been a whole lot of talk on how to implement code syntax highlighting into Zendesk, both into the forums frontend and the ticket system. While the intergration of Markdown into the backend now offers a decent solution for tickets, the same cannot be said of the frontend forums section. As suggested in this angry post, the only method in which you can get away with it for now is by using PasteBin or Github. This is of course not a viable solution for professionals who boast to offer custom solutions and honestly, I’m not a big fan of it as an individual either.

Since I had to force syntax highlighting to somehow appear in my Zendesk frontend for work, I thought I should share my method with the rest of the world. The solution is of course to use some already consecrated JavaScript highlighting plugin. Unfortunately, I could not make Alex Gorbatchev’s elegant syntax highlighter to work (it kept crashing my frontend, probably because of some function conflicts?) .

However, I got everything to work with Google Code Prettify, which (according to the website) powers both code.google.com and stackoverflow.com. Sounds just as good to me. So, here goes.

How-to

  1. Download the latest build of Prettify from this link or access the files directly online
  2. Login to your Zendesk dashboard
  3. Go to Manage> Settings> Extension>Widgets tab
  4. Add a Global JavaScript Widget
    javascript
  5. Open the prettify.js file in any text editor and copy its contents to the JavaScript Widget, then save
  6. Add a Global CSS Widget
    custom_css_widget
  7. Open the prettify.css file in any text editor and copy its contents to the CSS Widget, then save
  8. Create some new forum post and add a prettified <pre> tag to it from the HTML editor. I chose a C# code snippet. The Prettify script detects the language automatically.
<pre class="prettyprint linenums: 1">
Dictionary message = new Dictionary();
message.Add("start", "Hello World");
message.Add("finish", "Goodbye World");
</pre>

You can also see it live here (custom colors, looks and all).

Disadvantages

  • “<” characters have to be escaped using this method. But I think it is a small price to pay.
  • You might have to enable 

Ana Todor is a Computer Scientist with a playful and literary twist. She has a Bachelor of Science degree in Engineering and a Bachelor of Arts degree in Cultural Studies. She is currently studying towards obtaining a Master of Science degree in Computer Science, Digital Interactive Entertainment. Areas of specialty: programming, web design and development, video game development, literary criticism, and creative writing. Notable hobbies: photography.

Leave a Reply

2 Comments

  1. Tried it, but not having much luck unfortunately. works but the actual code highlighting does not. Not sure what I’m missing, is this still working for you?

  2. Great article. This is exactly what I needed.
    I had to add prettyPrint(); to the bottom of the global JavaScript Widget so that the prettifier would run on my page.

Next ArticleThe Sims 3 Review