How to Add Syntax Highlighting to Source Code in Google Docs

Google Docs / By /
958444 How to Add Syntax Highlighting to Source Code in Google Docs

Developers and programmers often need to include source code in documents to illustrate concepts or provide examples. However, plain text code can be difficult to read and understand. Adding syntax highlighting makes the code more readable by color-coding keywords, strings, functions, and other constructs.

There are a few easy ways to add syntax highlighting to source code blocks in Google Docs.

Use the Built-In Code Block Feature

As of December 2022, Google Docs includes a native “Code Block” feature that can automatically apply syntax highlighting to code.

To use it:

  1. Type or paste your code into the document
  2. Select the code
  3. Go to Insert > Building blocks > Code block
  4. Choose the programming language from the dropdown menu (Python, JavaScript, Java, C/C++, etc.)
  5. Select a color theme
  6. Click “Apply”

This will format the selected code with proper spacing and colors based on the language syntax.

Here is an example of JavaScript code formatted using the built-in Code Block feature:

function helloWorld() {
  console.log("Hello World!");
}

helloWorld();

The Code Block option is only available for certain Workspace tiers. If you don’t see it, you likely have a personal Google Account or a legacy GSuite subscription. Consider upgrading if syntax highlighting is important for your documents.

Use the Code Pretty Add-On

If the built-in Code Block feature isn’t available to you, another option is the Code Pretty add-on.

To install:

  1. Click “Add-ons” in the Docs toolbar
  2. Search for “Code Pretty”
  3. Click “Free” to add it

Once installed, to use:

  1. Select your code
  2. Click “Add-ons” > “Code Pretty” > “Format”

This will automatically apply syntax highlighting without any further configuration needed.

The formatting isn’t quite as robust as the native Code Block feature. But Code Pretty is simple to use and provides the basic color-coding needed to make code more readable.

Copy-Paste from an Online Code Playground

You can also use online code playgrounds and editors to add syntax highlighting before pasting into Google Docs.

For example:

  1. Go to a site like Repl.it
  2. Paste your code
  3. Click the “Tidy” button to format it
  4. Copy the color-coded code
  5. Paste into your Google Doc

The formatting will be retained when pasting back into Docs.

Some good code playground options include:

The benefit of this approach is it allows you to preview and test your code while also formatting it for copy-pasting.

Tips for Readable Code Blocks

When including formatted code blocks in documents, keep these tips in mind:

  • Explain the code – Don’t just drop code blocks without context. Explain what the code does in the paragraph before it.
  • Reference code – Refer to specific parts of the code in the text to link explanations to code elements.
  • Multiple blocks – Break code into multiple blocks instead of one massive block.
  • Limit line length – Keep code lines under 100 characters when possible for readability.
  • Omit boilerplate code – Leave out parts of code unrelated to the main example (imports, configs, etc.)
  • Use comments – Consider adding comments in the code to explain parts of complex code examples.

Conclusion

Adding syntax highlighting to code blocks using the built-in Code Block option, Code Pretty add-on, or an online code editor can make your code examples much easier to understand for both developers and non-technical readers.

Color-coded keywords, strings, functions, and other language constructs stand out visually, allowing the structure of the code to be grasped more easily. This improves comprehension, learning, and collaboration.

So don’t leave code examples as plain text! Take advantage of syntax highlighting to enhance readability of code in Google Docs.

Related Posts