---
title: "Using Code Blocks"
description: "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. ✨"
url: "https://support.helpdocs.io/article/cawCwa96DN-using-syntax-highlighting"
category: "Content Blocks"
updated_at: "2021-01-27T10:21:48Z"
---

# Using Code Blocks

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.

Code Blocks look different depending [on the template](/article/uQDebSnIrD-choosing-a-layout) you're using

### Adding Code Blocks

![](https://files.helpdocs.io/Ytt2uahFxY/articles/cawCwa96DN/1611742845914/code-block.gif)

1. In the article editor click **Blocks**
2. Select **Code Block**
3. **Paste** the code into the code block
4. Click **Automatic** to select and search for a language or leave it for us to decide
5. Hit **Save Changes**

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 💅