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"><!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>HTML</title>
</head>
<body>
<p>Lorem ipsum dolor sit amet. </p>
</body>
</html></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.