06 Feb 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
- 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 JavaScript Widget
- Open the prettify.js file in any text editor and copy its contents to the JavaScript Widget, then save
- 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.
|
1 2 3 |
Dictionary message = new Dictionary(); message.Add("start", "Hello World"); message.Add("finish", "Goodbye World"); |
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
Justin Dupree
Posted at 16:40h, 31 JulyTried 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?
James R
Posted at 18:51h, 28 NovemberGreat 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.