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.
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.
- Download the latest build of Prettify from this link or access the files directly online
- Login to your Zendesk dashboard
- Go to Manage> Settings> Extension>Widgets tab
- Add a Global CSS Widget
- Open the prettify.css file in any text editor and copy its contents to the CSS Widget, then save
- 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).
- “<” characters have to be escaped using this method. But I think it is a small price to pay.
- You might have to enable