We use the highlight.js library for the code formatting. This library lets you easily provide high-quality syntax highlighting without requiring a lot of effort on your part. It can work with pretty much any markup, doesn’t depend on any other frameworks, and has automatic language detection.

HTML code

<!DOCTYPE HTML>
<html>
 <head>
  <meta charset="utf-8">
  <title>HTML</title>
 </head>
 <body>
  <p>Lorem ipsum dolor sit amet. </p>
 </body>
</html>
  <pre><code class="html">&lt;!DOCTYPE HTML&gt;
&lt;html&gt;
 &lt;head&gt;
  &lt;meta charset="utf-8"&gt;
  &lt;title&gt;HTML&lt;/title&gt;
 &lt;/head&gt;
 &lt;body&gt;
  &lt;p&gt;Lorem ipsum dolor sit amet. &lt;/p&gt;
 &lt;/body&gt;
&lt;/html&gt;</code></pre>

Ruby code

# The Greeter class
class Greeter
  def initialize(name)
    @name = name.capitalize
  end

  def salute
    puts "Hello #{@name}!"
  end
end

g = Greeter.new("world")
g.salute
<pre><code class="ruby"># The Greeter class
class Greeter
  def initialize(name)
    @name = name.capitalize
  end

  def salute
    puts "Hello #{@name}!"
  end
end

g = Greeter.new("world")
g.salute</code></pre>

Theming

highlight.js comes with a lot of different light and dark themes.

For example, if you want to use the Atom Dark theme you need to find the following line in the document_head.hbs file:


<link rel="stylesheet" href="//cdn.jsdelivr.net/gh/highlightjs/cdn-release@10.7.2/build/styles/github.min.css">

And replace the file name from github.min.css to atom-one-dark.min.css:


<link rel="stylesheet" href="//cdn.jsdelivr.net/gh/highlightjs/cdn-release@10.7.2/build/styles/atom-one-dark.min.css">

You can find the file names of all highlight.js themes in its repository.

Extensions Bundle

Get 6 most popular extensions for your help center with a total price of $1,218 for $548 only.

  • Side Navigation
  • Prev Next Buttons
  • Table of Contents
  • Community Hot Posts
  • Alerts
  • Server Status
Learn More
Did this answer your question?
Still can’t find what you’re looking for?

Hire an expert

Our consultants and developers are Zendesk Guide certified.
Free up your time for your business while we take care of your help center.

Get a Quote

Ask a question

Not sure how something works or how to make changes?
Don’t worry, we’ll answer all your questions.

Contact Us