How to Add Code to Google Docs [2023]

Whether you are a professional developer or learning to code for the first time, you might need to share code with your colleagues. Google Docs is a popular word-processing tool to share code and documentation, but formatting code like regular text isn’t ideal.

This is because every programming language has specific syntaxes (which are helpful for the reader to understand the code). Formatting codes as regular text can take a lot of time which is why you’re probably on this article…

Fortunately, there is a free Google Docs addon called Code Blocks, which will help you better organize your code. This guide will show you how to use it!

Why Should You Add Code Blocks to Google Docs?

First, let’s consider why you should add code blocks to your Google Doc. It has several benefits:

• Code Blocks supports many programming languages, so you can easily format code with a few clicks.
• You don’t need a lot of time to keep the syntax and corresponding highlights correct.
• Codes formatted with Code Blocks won’t lose their formatting if you share the document with others.
• When you use Code Blocks, your code becomes highly readable for the people you share with. 
• Code Blocks is free to use!

How to Add Code Blocks to Google Docs

It’s pretty simple to add code blocks to Google Docs. Here are the steps:

Step 1: In your Google Docs file, click the Extensions menu. Hover on Add-ons and then click on Get add-ons. 

Step 2: This will open the Google Workspace Marketplace in a pop-up window. You need to click the Search icon at the top of the window.

Step 3: In your search bar, write Code Blocks. This will show two versions. Select the first one named Code Blocks.

Step 4: Several add-ons will appear in the search result. You need to click on Code Blocks by Alex Forsythe.

Step 5: On the app screen, you need to click Install to add the tool to Google Docs.

Step 6: The add-on will ask for your permission to be installed. Click on CONTINUE to proceed.

Step 7: A new window will pop up and ask you to choose your Google account. Remember, you can only use the add-on as long as you are signed into your Google account. If you don’t have an account logged in, enter the credentials to log into the account.

Step 8: On the next page, you need to click Allow to give Code Blocks permission to access your Google account.

Step 9: Code Blocks will now be installed on your Google Docs. Once the installation is done, you can start using the add-on.

Step 10: To show you how Code Blocks works, we have written a simple JavaScript code in Google Docs. As you can see, it looks like ordinary text and it’s a bit tricky to understand the syntax.

Step 11: We will now format the code using Code Blocks. To do this, you need to click the Extensions menu again. Hover on Code Blocks at the bottom and then click on Start.

Step 12: The Code Blocks widget will now open on the right side of the window. Select the codes.

Step 13: From the Language drop-down menu, select the correct programming language. In this case, we’re using Javascript.

Step 14: Click on Format to organize the code.

Step 15: Your code is now beautifully formatted with all the syntaxes and highlights. You can also change the formatting theme from the Theme drop-down menu. Simply select a theme and click on Format again to change the theme.

Closing Thoughts…

Code Blocks is a beautiful way to present your codes in any language. Code Blocks use all the necessary syntaxes and highlights related to the language so that the reader can easily understand the code. By installing the free add-on to Google Docs, you can format codes in a few clicks.

We showed how to add code blocks to Google Docs in detailed steps with visual references. If you follow the steps and references, you can organize your code without putting too much time and effort into it. Try it now.