Contact Us

How to add a code block to Google Docs with this free extension

Cloud

If you struggle to add well-formatted blocks of code into Google Documents, check out this easy-to-use free add-on from the Google Workspace Marketplace.

Software developer freelancer woman working at night

Image: iStockphoto/monstArrr_,

Must-read developer content

If you’re a developer, an instructor, or anyone in the IT field who might need to include various code blocks to Google documents, what do you do? Do you write the code and format it, using the standard built-in formatting functions in Google Docs? You might, but that’s not always the most efficient way to go. Your code could be malformed, which does you no favors–especially when you’ve spent time crafting elegant and clean code.

Fortunately, there are plenty of tools in the Google Workspace Marketplace that will do the job. The add-on I’ve found to be the best is called Code Blocks. With this extension, you can select a block of code and format it to your liking within your document. It’s easy to use and best of all free. 

The Code Blocks feature set includes:

  • Syntax highlighting
  • Automatic language detection
  • Plenty of color themes to choose from
  • Format code inline or as blocks
  • Preview function

Let me show you how to install and use this add-on to Google Docs so you can include your code in cloud-based documents.

SEE: Top 5 programming languages for systems admins to learn (free PDF) (TechRepublic)

What you’ll need

The only thing you’ll need is a Google account. This add-on will work with either the free version of Google Docs, or that found in Google Workspace.

How to install Code Blocks

Installing Code Blocks is quite simple. Open a browser (one that’s logged in to your Google account) and point it to the Code Blocks page in the Google Workspace Marketplace. Click Install and, when prompted, click CONTINUE. You will be required to select an account for the add-on. Once you’ve selected your account, you’ll then have to accept the necessary permissions for Code Blocks, which include:

  • View and manage documents in the application.
  • Allow the application to run when you are not present.
  • View and manage data associated with the application.
  • Display and run third-party web content in prompts and sidebars inside Google applications.

If you’re OK with those permissions, scroll down and click Allow. Code Blocks will install and is ready to be used.

How to use Code Blocks

Using Code Blocks is equally simple. Open Google Docs and create a new document. With the document open, click Add-ons and select Code Blocks from the menu. A new right sidebar will open (Figure A), where you can make use of the tool.

Figure A

<a href="http://s0x.org/wp-content/uploads/2020/11/how-to-add-a-code-block-to-google-docs-with-this-free-extension-1.jpg" target="_blank" data-component="modalEnlargeImage" data-headline="

Code Blocks is installed and ready to go.

” data-credit rel=”noopener noreferrer nofollow”>codeblocksa.jpgcodeblocksa.jpg

Code Blocks is installed and ready to go.

To use Code Blocks, write or paste your code in the document. Once you have the code in place, select it and then:

  1. Select the language from the Language drop-down.
  2. Select a theme from the Theme drop-down.
  3. Click Preview to view the code in the preview pane (Figure B).
  4. Make any necessary changes (such as selecting a different theme).
  5. When the code looks exactly how you want, click Format.

Figure B

<a href="http://s0x.org/wp-content/uploads/2020/11/how-to-add-a-code-block-to-google-docs-with-this-free-extension-2.jpg" target="_blank" data-component="modalEnlargeImage" data-headline="

Formatting your code in Code Blocks.

” data-credit rel=”noopener noreferrer nofollow”>codeblocksb.jpgcodeblocksb.jpg

Formatting your code in Code Blocks.

The code block should now be formatted, exactly how you like it, in your document (Figure C). You’re ready to move on to the next section of text or a new block of code.

Figure C

<a href="http://s0x.org/wp-content/uploads/2020/11/how-to-add-a-code-block-to-google-docs-with-this-free-extension-3.jpg" target="_blank" data-component="modalEnlargeImage" data-headline="

An in-line code block, generated by the Code Blocks add-on.

” data-credit rel=”noopener noreferrer nofollow”>codeblocksc.jpgcodeblocksc.jpg

An in-line code block, generated by the Code Blocks add-on.

One nice thing about the code block you just added is that you can edit it. Click inside the block and change any text you need.

After you’re done adding your code blocks, click the X in the upper right corner of the Code Blocks add-on to close the sidebar.

And that’s all there is to adding code blocks to your Google Docs cloud-based documents. If you’ve struggled to format your code into presentable blocks, you can now breathe easy and do so with a couple of clicks.

Subscribe to TechRepublic’s How To Make Tech Work on YouTube for all the latest tech advice for business pros from Jack Wallen.

Also see

Privacy Settings
We use cookies to enhance your experience while using our website. If you are using our Services via a browser you can restrict, block or remove cookies through your web browser settings. We also use content and scripts from third parties that may use tracking technologies. You can selectively provide your consent below to allow such third party embeds. For complete information about the cookies we use, data we collect and how we process them, please check our Privacy Policy
Youtube
Consent to display content from Youtube
Vimeo
Consent to display content from Vimeo
Google Maps
Consent to display content from Google
Spotify
Consent to display content from Spotify
Sound Cloud
Consent to display content from Sound