How to insert code block in Google Docs

Whether a code is considered good or bad depends on its format. Word processors tend to mess up your formatting when you're trying to add code to a document.

That's where code blocks can help. These are blocks in the document dedicated to code, allowing you to display your code as intended. They can even automatically apply correct formatting and highlighting to your code. Below is how to insert code blocks in Google Docs.

How to insert code blocks in Google Workspace

If you're running certain versions of Google Workspace, you can insert code blocks right in Google Docs. This feature is only available in the Business Standard, Business Plus, Education Standard, Education Plus, Enterprise Standard, and Enterprise Plus editions of Google Workspace. If you're running a different version, you won't be able to use this feature.

1. Open the Google Doc where you want to insert your code.

2. Click the Insert menu .

How to insert code block in Google Docs Picture 1

3. Hover over the Building Blocks section .

How to insert code block in Google Docs Picture 2

4. If you're running a supported version of Google Workspace, you'll see the Code Block option .

5. Select Code Block and select C/C++, Java, JavaScript, Python or Unset .

6. Enter your code directly into the block. The code will be formatted and highlighted according to the language you selected.

How to insert code blocks in Google Docs using extensions

If you're not using one of the supported versions of Google Workspace, you can still insert code blocks into Google Docs. However, to do so, you will need to install a third-party add-on. There are many options available; This example will use the free Code Blocks extension.

1. Open the document where you want to insert your code.

2. Click the Extensions menu .

How to insert code block in Google Docs Picture 3

3. Hover over Add-ons and select Get Add-ons .

How to insert code block in Google Docs Picture 4

4. Enter Code Blocks in the search field.

How to insert code block in Google Docs Picture 5

5. Select Code Blocks from the results.

How to insert code block in Google Docs Picture 6

6. Click Install and grant relevant permissions.

How to insert code block in Google Docs Picture 7

7. After installing the add-on, click the Extensions menu .

How to insert code block in Google Docs Picture 8

8. Hover over Code Blocks and click Start .

How to insert code block in Google Docs Picture 9

9. The Code Blocks tool will appear in the sidebar.

10. Enter your code into the document and select all.

11. In the sidebar, select Language or leave it on Auto .

How to insert code block in Google Docs Picture 10

12. Choose a Theme for your code block.

How to insert code block in Google Docs Picture 11

13. You can preview your selections by clicking the Preview button .

How to insert code block in Google Docs Picture 12

14. When you are satisfied with your selection, click the Format button .

How to insert code block in Google Docs Picture 13

15. The code in your document will be formatted into a code block.

How to insert code block in Google Docs Picture 14

16. You can add multiple code blocks and use different languages ​​and themes for each block.

17. You can add more text to each code block, but to apply the correct formatting, you will need to select them all and click the Format button again .

18. Any text you add outside of the code block will retain the current text settings for standard text.

Micah Soto

Update 05 December 2023