Help Center Formatting

47 Comments

  • Vinicius Souza
    Comment actions Permalink

    has not yet been implemented?

    2
  • Emylou Mavic
    Comment actions Permalink

    Hello,

    We also need this.

    Building a customer facing community for a technical product based on Linux is simply not possible as Linux is all about code blocks...

    Markdown or the plugin suggested before would be simple, efficient an enough for all our need.

    0
  • Marie O'Brien
    Comment actions Permalink

    +1 

    Would very much like this - Markdown as suggested above would be sufficient (or anything similar). 

    0
  • David Boeke
    Comment actions Permalink

    +11  We just signed up, i wish I would have known that this is not supported before I did that.  What is worse is that it had been a known issue for the Zendesk team for 2 years?  It seems like such a small thing to implement, and would add tremendous value for your technology focused companies.  I am at a loss at what to do, given more than 80% of our help articles have code blocks...  

    I am seriously considering recommending that our company go a different direction for our knowledge base.

    0
  • David Boeke
    Comment actions Permalink

    Now that this has been moved to Product Feedback, can everyone who is following this request please upvote, so it gains visibility.

    0
  • Erin Longhurst
    Comment actions Permalink

    I've been waiting for this since we were forced to switch over to Help Center instead of Web Portal, about two years ago. Please implement this. :)

    0
  • Nicole - Community Manager
    Comment actions Permalink

    Hi Erin - 

    Could you give us more detail on what exactly you're looking for? Are you speaking specifically to code blocks? 

    0
  • Erin Longhurst
    Comment actions Permalink

    Hi Nicole,

     

    Yes, having code blocks I don't have to surround with Pre-Formatted tags and carefully space would be nice -- right now, it feels like making old-school ascii art when I'm trying to set up code blocks in documentation. I CAN do it, but it's messy and doesn't adjust to different screen widths at all, and would be pretty easily solved with code block support.

    0
  • Marie O'Brien
    Comment actions Permalink

    Erin,

     

    I am starting into doing the same thing. Could I ask how you currently do it? It would save me a lot of faffing trying to figure it out -  if I knew how someone else had worked-around this issue? :)

     

    Many thanks,

    Marie

    0
  • Erin Longhurst
    Comment actions Permalink

    Marie-

     

    I basically have to surround my code blocks with < pre > tags and space it really carefully. It lacks line numbers and the ability to colour the text. I'm not certain it'd copy/paste well for users, either, but it does LOOK something like a code block.

    There are apparently workarounds using Prettify and a few other things, but I've never managed to get them to work.

    0
  • Ryan McGrew
    Comment actions Permalink

    Hey all,

    Today we've rolled out an ability to insert code blocks as pre-formatted text in the article editor. It's a small change and doesn't include syntax highlighting, but will hopefully will make it a little easier to insert code into your articles.

    We will continue to take more advanced functionality as a product feedback.

    Thanks!

    4
  • Pete Holborow
    Comment actions Permalink

    That's a good step in the right direction! Syntax highlighting in the works?

    0
  • Jeremy Heath
    Comment actions Permalink

    Just started using this and its a shocker how difficult it is to get it to hold the format

    We have resorted to copy text and code from onenote then pasting into notepad to remove all formatting then moving to guide and try to set it up after that.

    Cmon guys get a better editor sorted plz

    0
  • Marie O'Brien
    Comment actions Permalink

    Hi Ryan,


    Can you explain how we can change the background colour of the code block? Otherwise it just looks like the same text as the article. I'm struggling to make it appear in a box in the manner that you have,

     

    Thanks,

    Marie

     

     

    0
  • Fabien RIC
    Comment actions Permalink

    Hi,

    For those looking for a way to integrate code syntax highlighting in Zendesk, here is how I did.

    I use highlight.js (https://highlightjs.org), which is powerful and quite easy to integrate in Zendesk. This is a javascript library and CSS which will auto-detect code in your page and syntax highlight it. It comes with support for tons of languages and color styles.

    Here are the steps to follow:

    • Add highlight.js JS and CSS files in your document_head.hbs theme file like this (feel free to change the style to suit your needs) :
    {{!-- highlight.js integration for code blocks --}}
    <link rel="stylesheet"
    href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.13.1/styles/atom-one-dark.min.css">
    <script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.13.1/highlight.min.js"></script>
    • You then have to call highlight.js on every piece of code you may have in your article. To make things simple, I call it on all <pre> elements. To do that, modify the script.js file of your theme by adding the highlight.js call at the end:
    $(document).ready(function() {

    existing stuff...

    //Highlight code in <pre> tags created with the content editor
    $('pre').each(function(i, block) {
    hljs.highlightBlock(block);
    });
    });
    • Finally, to make sure the highlight.js styling is correctly applied, modify your style.css theme file as follow, to remove the default CSS on the <code> and <pre> elements. I kept the default style on <pre class="nohlghlight">, which enables to have regular <pre> blocks (without syntax highlighting) if needed.
    /* Disabled as we use highlight.js for code highlighting

    .article-body code {
    background: darken($background_color, 3%);
    border: 1px solid #ddd;
    border-radius: 3px;
    padding: 0 5px;
    margin: 0 2px;
    }
    */

    /* nohighlight only */
    .article-body pre.nohighlight {
    background: darken($background_color, 3%);
    border: 1px solid #ddd;
    border-radius: 3px;
    padding: 10px 15px;
    overflow: auto;
    white-space: pre;
    }

    That's it for the integration, now if you want to add a code block to an article :

    1. Go in the article editor and create a code block (which is a <pre> tag)
    2. Paste some code inside
    3. Save the article and preview it :)

    Highlight.js tries to detect the language used in the block ; however you can set the language directly by going in the HTML source of your article in the editor and set the class as follow: <pre class="java"> for example.

    I recommend having a look at the following page if needed: https://highlightjs.org/usage/

    Hope it's helpful for other tech companies working with Zendesk.

     

     

     

     

     

    2
  • Jaïs Pingouroux
    Comment actions Permalink

    +1 for having inline code in Guide Article

    0
  • Justin Maxwell
    Comment actions Permalink

    re

    I use highlight.js (https://highlightjs.org), which is powerful 
    and quite easy to integrate in Zendesk.

    Has anyone achieved something similar for Markdown?  Or tried and failed?  If it's doable for highlight.js then my instinct is it ought to be equally straightforward for a markdown renderer?

    0

Please sign in to leave a comment.

Powered by Zendesk