Formatting your Google Docs documents is a breeze until code blocks sneak in. Google Docs does not offer a default way of adding code blocks, and if you copy and paste them directly, the default formatting gets messed up.

To format code snippets properly in Google Docs, we have to either use different manual workarounds or take the help of an add-on.

This article will show you how to format code blocks in Google Docs manually and using add-ons.

How to Format Code Blocks Manually in Google Docs

There are numerous ways to format code blocks in Google Docs. Nevertheless, all the methods involve third-party tools. This means that if you want to format code blocks in Google Docs without leaving the workspace, it's not going to happen.

The following are three methods for manually formatting code blocks in Google Docs:

1. How to Format Code Blocks in Google Docs Using Syntax Highlighter

With a syntax highlighter, one can easily change the style of its text or code. Many syntax highlighters are available; however, we will use syntax highlighter by pinetools for this example.

Here is how you can use it to format code blocks in Google Docs:

  1. Copy the unhighlighted code from your Google Docs document that you intend to format.
  2. Go to Syntax Highlighter by pinetools.
  3. Paste the code into the Unhighlighted Code box.
  4. Under Options in the right-hand pane, select Autodetect if you want the tool to guess the language automatically, or select your desired one by clicking on Select one and choosing the language from the Select Language dropdown menu.
  5. Choose your preferred style from the Select style dropdown menu.
  6. Click the green Highlight button.
    Highlighting the Code Block in Syntax Highlighter

The above steps will provide you with the highlighted code with its HTML.

Even though you can paste the highlighted code directly into Google Docs, it will only highlight the code, and the whitespace will still appear between code lines. Hence, the final format seems messy, as shown below.

Messy Formatting of Code Blocks With Whitespace In Between Code Lines in Google Docs

To make the formatting more appealing, follow the below steps:

  1. Copy the highlighted code from the syntax highlighter.
  2. Select the Google Docs document where you would like to add the code.
  3. Go to Insert > Table and select a 1x1 table.
    Inserting a 1X1 Table in Google Docs
  4. Right-click the table box and go to Table properties.
  5. Match the Cell background colour to the background color in the syntax highlighter style.
    Changing the Cell Background Color to Black in Google Docs

We have chosen Ir Black for style and Black for the background color to make the final output look like the following.

Final Output Formatting of Code Blocks in Google Docs

If you're really struggling to find a suitable format for your document, you can use a template. Check out our article covering different templates you can use in Google Docs to make your life easier.

2. How to Format Code Blocks in Google Docs Using HTML Code

The second way to format code blocks in Google Docs is by using HTML code. To do so, follow these steps:

  1. Copy the HTML code of the highlighted text in the syntax highlighter output.
  2. Copy and paste the HTML code into the Notepad.
    Copying the HTML Code and Pasting It in NotePad
  3. Save the file as .HTML.
    Saving Notepad File in HTML Format in Computer
  4. Open the .HTML file directly in Google Docs.
    Code File Containing HTML Executed in Google Docs

Google Docs will open the file in its original format after executing the HTML code rather than simple HTML, as we did in the Notepad file.

You can copy the code, paste it into your original document, and remove white spacing from the code lines using the steps mentioned above. As a result, you will find that the final output is nearly identical to method one.

If you don't like changing the formatting with table properties, there is another way to do it. The goal is to format codes placed in Google Docs using a Microsoft Word document. Here is how you can go about it.

3. How to Format Code Blocks in Google Docs Using Microsoft Word

Microsoft Word allows you to copy the highlighted code from the syntax highlighter directly in the document, and it keeps the background consistent without any white space between the lines.

Therefore, it is possible to leverage this flexibility by formatting all code blocks in a Microsoft Word document and then uploading that document to Google Docs later.

To do that, follow these steps:

  1. Open the downloaded Google Docs document in Microsoft Word or a blank Microsoft Word document.
  2. To get the highlighted code from the syntax highlighter, follow the same steps as explained in method one.
  3. Pasting the highlighted code directly into a Microsoft Word document will format the code block automatically.
    Copying the Highlighted Code From Syntax Highlighter to Microsoft Word Document
  4. Save the Microsoft Word document and upload it to Google Docs.

Code added to Google Docs can be copied to other Docs documents while retaining the formatting. So, either you can use this method to format Google Docs files or format only the codes in a separate file and then copy-paste them into the original file.

Disadvantages of Manually Formatting Code Blocks in Google Docs

The major disadvantage of manually formatting code blocks in Google Docs is that all three methods will consume a significant amount of your time. In addition, changing any code style requires starting over from scratch.

There are minor chances of error as well if the syntax highlighter does not support the programming language you're trying to format.

To overcome these limitations, you can use Google Docs add-ons. There are a variety of add-ons available for this job, but we'll use Code Blocks in this instance.

Let's see how you can use the add-on to format code blocks and what benefits it offers.

How to Format Code Blocks in Google Docs Using Code Blocks Add-on

To format code blockers with the add-on, follow these steps:

  1. Go to the Google Docs document.
  2. Navigate to Add-ons > Get add-ons.
  3. In the search bar, type "Code Blocks" and hit Enter.
    Searching for Code Blocks Add-on in Google Workspace Marketplace
  4. Choose the first add-on shown above and click Install.
    Installing Code Blocks Add-on from Google Workspace Marketplace
  5. Navigate to Add-ons > Code Blocks > Start.
  6. Select the code text, and choose your preferred language and theme in the right-sidebar.
  7. Click the Format button.
    Formatting Code Blocks With Code Blocks Add-on In Google Docs

The steps above will format code blocks as we did manually. Checking the No background checkbox just above the Format button allows you to display the formatted code blocks in plain text with no background.

Benefits of Formatting Code Blocks Using Add-on

Add-on simplifies how you format code blocks, which saves you a lot of time. Moreover, you can quickly format code blocks in different languages in the same document without changing the formatting settings in the syntax highlighter significantly.

Hence, if you would like to save time and have better formatting control, using the add-on would be the way to go.

Even though Google Docs offer greater flexibility, there are many other online word processing tools to choose from if you don't like the look and feel of it.

Format Code Blocks in Google Docs With Ease

Format your code blocks in Google Docs, either manually or with the add-on to make your documents look appealing and easier to read. If you discover an add-on that is buggy or does not format as you expect, the manual methods are your best bet.

Code Blocks is just one of many add-ons to help you better control formatting and make your documents more professional. There are many more that you should explore.