Using Code Blocks

Jake Peters Updated by Jake Peters

HelpDocs comes loaded with automatic code blocks with syntax highlighting. There's nothing to set up or configure—it'll automatically highlight your code based on the language you insert.

Adding Code Blocks

  1. Paste in your code block in the text editor
  2. Highlight the code block
  3. In the toolbar, click the Block button
  1. Select Code Block

Now your code will look beautiful and readable to all those developers out there. 😍 Here's an example:

function randomString() {
var chars = '0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ',
length = 32,
result = '';
for (var i = length; i > 0; --i) result += chars[Math.floor(Math.random() * chars.length)];
return result;
Code blocks are only highlighted when your articles are viewed, not when they're written. Don't worry when they look plain and boring in the article editor!

Manually Override the Syntax Highlighting Language

Code blocks are usually pretty smart when it comes to detecting the language, but sometimes it does get it wrong. Luckily, there's a way to manually override the syntax highlighting language.

  1. Head to the Code Block
  2. In the upper right corner you'll see a dropdown
  3. Select the desired language (e.g. Javascript)
  4. Press Save

What did you think of this doc?

Embedding Audio Files

Adding an HTML Block

Get in touch