How to Insert and Format Code Blocks with Syntax Highlighting in Google Docs

Documenting software architectures, sharing scripts, and reviewing algorithms in team documents traditionally posed a formatting headache in word processors. Historically, pasting code into Google Docs resulted in proportional fonts, erratic tab spacing, automated curly quotes, and unwanted spell-check red underlines, forcing developers to resort to fragile third-party add-ons or external screenshot utilities.

Google Docs features native Code Blocks integrated into its Smart Canvas building blocks system. This allows you to embed code snippets directly into your documents with automated syntax highlighting, language-specific keyword recognition, custom indentation, and clean background shading.


Supported Programming Languages in Google Docs

Google Docs includes dedicated syntax highlighters for the most prevalent programming and markup languages:

Language Key Syntax Features Highlighted Ideal Documentation Use Case
Python Keywords (def, class, import), decorators, strings, and docstrings. Data science workflows, backend API specifications, and automation scripts.
JavaScript / TypeScript Functions, asynchronous keywords (async, await), arrow functions, and template literals. Frontend architecture, Web APIs, and Node.js backend documentation.
C / C++ Preprocessor directives (#include, #define), pointers, data types, and struct definitions. Systems programming, embedded firmware guides, and performance algorithms.
Java Access modifiers (public, static), annotations, class signatures, and interfaces. Enterprise backend designs, Spring Framework docs, and Android architectures.
HTML / CSS / Unset HTML tags, attributes, CSS selectors, properties, or neutral unstyled monospace blocks. UI mockups, web templates, configuration snippets, and shell terminal outputs.

How to Insert a Code Block in Google Docs

You can add a code block using the standard application menu or via the rapid @-mention Smart Canvas shortcut.

Method 1: Using the Insert Menu

  1. Open your document in Google Docs.
  2. Place your cursor where you wish to insert the snippet.
  3. Click Insert in the top menu bar.
  4. Hover over Building blocks and select Code block.
  5. Choose your programming language from the submenu (C/C++, Java, JavaScript, Python, or Unset).

Method 2: Using the @-Mention Menu (Fastest)

  1. In a blank paragraph line, type @code.
  2. The Smart Canvas dropdown menu will filter down immediately to Building blocks > Code block.
  3. Press Enter or click the language you need.

Google Docs inserts a shaded container with a monospaced font family (such as Courier New or Roboto Mono) and a floating language selector badge in the top-left corner.


Pasting and Editing Code Inside the Container

To preserve indentation and prevent unwanted rich-text conversion when importing code from your IDE (such as VS Code, PyCharm, or Android Studio):

  1. Copy your code from your code editor.
  2. Click inside the newly created code block in Google Docs.
  3. Press Ctrl + Shift + V (or Command + Shift + V on macOS) to Paste without formatting.

Pasting plain text allows Google Docs’ native parser to apply syntax colouring dynamically across keywords, strings, variables, and comments according to the selected language rules.


Switching Languages and Customising the Container

If you need to change the programming language of an existing block:

  • Click inside the code block container to reveal the language badge at the top.
  • Click the drop-down menu and select a different language. The parser recalculates syntax tokenisation instantaneously.
  • To format shell terminal output, Dockerfiles, or SQL snippets, choose Unset. This maintains clean monospace alignment and disables spell-checking without applying inapplicable syntax colours.

Managing Soft Line Wrapping

Unlike code editors that support horizontal scrolling, word processor margins wrap long lines automatically. To prevent fragmented statements from confusing readers:

  • Break long function signatures or database queries across multiple logical lines before pasting.
  • Use a slightly smaller font size (such as 9.5 pt or 10 pt) for the code block text using the standard font-size toolbar to preserve readability across paginated margins.

Get the best tech tips delivered straight to your inbox.

Join thousands of readers mastering Apple, Google, Microsoft, and Linux.