On any Notion page, you can create a code block to display code so that it's broken out from the rest of your content and formatted by language. We support proper syntax coloring for a number of programing languages. For example, here's a Code block displaying JavaScript:

for (i = 0; i < 5; i++) {
  text += "The number is " + i + "<br>";
}

Code blocks are useful to demonstrate programing concepts, share code with other developers, or maintain your own library of code snippets. They also make it a breeze to copy any amount of code to your clipboard to use elsewhere.

• Add a code block
• Arrange code blocks
• Wrap your code
• Copy code to clipboard
• Comment on or add a caption to code blocks
• Delete a code block
• Related guides

Add a code block

• Click the + that appears to the left when you hover over a new line. Choose Code and press enter. Alternatively, type /code and press enter.
• With your new code block in place, click inside it to type or paste your code.

Arrange code blocks

• Use drag-and-drop to move code blocks around your page. Hover over the block, then use the ⋮⋮ icon that appears as a handle to drag it.
• You can also drag and drop your code blocks into columns.

Wrap your code

To eliminate side scrolling and create a line break at the edge of your code block:

• Hover over the code block and click ••• at the top right or ⋮⋮ on the left. You can also right click on the block itself.
• Switch on the Wrap code option.

Copy code to clipboard

• Hover over your code block to reveal the Copy button at the top right.
• Click it, and your code is ready to paste into your editor or wherever you want to share it.

Comment on or add a caption to code blocks

You can leave a comment on a code block, just like any other type of content block:

• Hover over the code block and click ••• at the top right or ⋮⋮ on the left. You can also right click on the block itself.
• Select Comment and enter whatever you want to say about the code.

You can also caption code blocks! Hover over your code block to reveal the Caption button at the top right.

Delete a code block

• Hover over your code block and click ••• at the top right or ⋮⋮ on the left. You can also right click on the block itself.
• Choose Delete.

Related guides

Something we didn't cover? Message us in the app by clicking ? at the bottom right on desktop (or in your sidebar on mobile). Or email us at team@makenotion.com ✌️