Formatting content

Code blocks

The <code> and <pre> elements are for displaying inline and multiline blocks of code.

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.

Inline code

The <code> and <pre> elements are for displaying inline and multiline blocks of code.

The <code> and <pre> elements are for displaying inline and multiline blocks of code.

HTML code

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

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.