Formatting content

Code blocks

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.