Help Center Article Editor needs to support (easy) source code formatting
I'm currently testing out the new Help Center before we migrate over. From what I can tell, the new WYSIWYG interface for drafting/editing articles has been cleaned up and hopefully is less buggy than the previous version (e.g., text randomly getting displayed with blue backgrounds). However, one feature has been removed and will undoubtedly cause some serious pain points for our agents in easily creating help articles: formatting options, specifically for source code.
Previously, the WYSIWYG drop-down menu for "Preformatted" would allow us to set in grey-boxed code blocks. Now, the only option is to open up the "Source Code" pop up and edit the HTML, a rather tedious process that seems to format things inconsistently in relation to the previous method. I want to stress that I'm not advocating for the previous article editor. Because our support frequently involves reading/writing code (both inline and block style), the Markdown capability in tickets has been great, and we wish this were an option in the Help Center. Currently, I don't even seen where you can use preset header styling.
Since we're hoping to leverage the Help Center's "Self Service" model more, we really need these features if we want to supply pro-quality support pages that are truly helpful , without it being so cumbersome for our agents to create them. Will Markdown be available at some point? Or better yet, plugin support for additional editor features (code/syntax styling)?
Do you have any suggestions/workarounds that lend themselves to a good workflow in Help Center regarding this type of formatting?
-
Hello,
The stripped down version of TinyMCE available within the Zendesk Guide, is rather underwhelming.
Looking at the comments that have been shared on this post since creation, does not seem that much progress has been made.
Is there a plan to address the lack of functionality of the text editor within the Guide anytime soon?
-
What could be prioritized would be the ability to do the same formatting in Helpcenter as the editor of Support Tickets. Much needed are the inline-codes. Actually, it doesn't quite make sense, that these two editors have different editing options.
-
Best solution I found is to use Prism.js
https://prismjs.com/
Download the code from the Prismjs.com website.
Then Zendesk Admin can inject the code of Prism.js and Prism.css files to the Zendesk Theme of their knowledgebase.
As Admin go to the Knowledgebase. Edit Theme -> Edit Code
Open file: script.js. Insert the prism.js file at the end. click Publish
Open file: style.css Insert the prism.css at the end of the file. click Publish.
Now, you can insert code snippets using the guidelines from prism.js website.
However, it would be great if Zendesk dev team would incorporate Prism.js natively. Especially because the library was released under open source MIT license.
https://github.com/PrismJS
The effort seems minimal. Maybe Product Manager can help here ? -
+1. ZD Support supports something similar, would be great to have that in the KB.
-
The code block from Zendesk is not the same. it doesn't highlight code according to what programming language is used. all it does is to arrange the code in a distinct section. Hard to read the code in this way, especially when the code section is long.
also, there is no option to switch seeing a different code when a different programming language is used, -
This helps: <span class="wysiwyg-color-black"><code>Some code</code></span>
-
We had previously opted out of using the help center for a good portion of our client facing pages, precisely due to the lack of good support for the code block and code snippets. The code block option that is there now is a good start, but still leave room for improvement.
Currently, it doesn't seem to take any tabs/spaces that we copy/paste in from our code editors. This makes the code in the code block a bit tedious to read unless we manually go in an re-edit all the code for better spacing.
-
I moved from Freshdesk to guide, was surprised to see that guide does not have support for code snippets Freshdesk's portal product has very nice code formatting etc when embedding in articles:
Having to embed screenshots is a horrible solution. The reason you embed code in an article is so that the client can copy it from the article. I am missing this feature on a lot of my support portal articles. -
Hey @...
We added support for code block snippets in the editor a little while back. It doesn't natively support code highlighting in the theme, but that can be added with the usage of of prism.js or hightlight.js in your theme. It doesn't yet support inline code snippets if that's what you need.
If this doesn't support your needs, please let me know more about what you need out of it.
Thanks!
-
@RyanMcGrew,
The code snippets that you mentioned are basic. Would be nice if Zendesk KnowledgeBase would support something like prism.js natively and not as part of additions to themes.
Often, the person that tries to edit the knowledge base is not the person that is responsible for the theme of the knowledge base.
In addition, these days, when a code snippet is provided, there is a need to provide several tabs for different languages.
For example, it is impossible to do an API Spec in Zendesk Knowledgebase. It doesn't look good. -
There is a conflict between Prism.js and Zendesk which creates artifacts which deteriorates code reading. Zendesk Support confirmed this conflict but does not support this as Prism.js is a third party software that is not declared as officially compatible...
The fact that we have to deal with Zendesk code and possibly meet compatibility issue is a problem. A web developper is required to tackle all this stuff. And it takes time...
I really think Zendesk Guide should integrate code snippet hightlighting instead of relying on other open-source libraries for this purpose. Freshdesk does it perfectly and it is so easy with it. So why not Zendesk Guide?
-
Have to admit, I am kind of amazed that it does not seem possible to create my own custom styles to be applied via the WYSIWYG drop-down, but am instead stuck with only 4 header styles.
I mean, what do you guys imagine a good help article to look like, format-wise, in 2020? Because I'm guessing it involves more than 4 different header sizes and the occasional bullet point list.
The fact that switching to code view does/can not grab my cursor position is just icing on the time-wasting cake. Hundreds and thousands of human-hours, wasted every day in this product, just scrolling back down through the Code View trying to find the paragraph or header where you need to apply that custom style...
-
We have been using highlight.js quite successfully in the past for our community, the guide, and ticket comments, but since upgrading the Zendesk theme to v2, the highlighting stopped working. This is very unfortunate and difficult to debug because it still works on some browsers/environments...
A native, built-in solution is much appreciated!
-
It looks like your upgraded theme is still dependent on jQuery. You can include the latest version of jQuery in your theme and that should address the issues you're seeing.
Thanks!
-
Adding jQuery did the trick! Thanks, Ryan!
-
Glad I could help Matthias Miltenberger!
Please sign in to leave a comment.
76 Comments