How to highlight code in google docs ?


๐Ÿ‘คย Diwas Poudel ย ย  ๐Ÿ•’ 30 May 2022 ย ย  ๐Ÿ“ FIX

Syntax highlighting is one of the standard features of modern IDE. Syntax Highlighting helps easier for a coder to differentiate keywords and variable names. This helps to grab readers' attention quicker and enhance the reading process. But this feature is not present in popular applications in MS Word and Google Docs. When you copy the code written in various programming languages like Python, Java, C++, Html, etc. in google docs then your codes look uglier as it does not preserve coloring and formatting.

Reading the code without syntax highlight is difficult. It does not have syntax highlighting, code indentation, loss of text format, do not highlight syntax errors, or miss-spelling. So it's not the right way of inserting code in google docs.

Also if you want to send code in google docs to your colleagues, the boss, or even want to keep yourself for future reference then you feel unhappy and search for a way to highlight the code.

Benefits of Syntax Highlights in Google Docs

  • The formatting and color scheme of the code remain unchanged.
  • It is beneficial for Developers and project managers who write technical documentation

Let's discuss some of the ways for highlighting syntax in Google Drive.

Method 1:Hightlight syntax in Google Docs using Online Tools

To use the online tool you only need the internet and web browser which every Google Docs user has. Using Online tools we can easily highlight syntax in Google Docs.

1 Goto this linkย 
ย 
2ย  Paste the code in the text field and select the programming language of the code.

3 Click on "Highlight!"

syntax-highlighting-example-Google-Docs.
fig. Process for Generating Syntax Highlight Code

5 This will generate code with syntax highlights on the fly and just copy it.

copy-generated-syntax-highlighted-codeย 6 Just copy and paste it into Google Docs as shown below.

google-docs-highlighted-code
fig. Google Docs highlighted Code

Method 2: Highlight syntax in Google Docs with the help of modern IDE

Suppose you are a programmer then you will use a text editor. For example, suppose I want to write HTML and CSS code then I will use either VS Code, Atom, Sublime, etc. You just have to copy the code from that editor and paste it into Google Docs then Google Docs will automatically take the format as of text editor as shown below.

Here I am using VS Code for writing HTML and CSS code.ย 

1 Insert table(1*1) in google docs.

Go to Google Docs and select Insert > Table >ย  (1 *ย  1) table cell.

2 Select the background to black or any color you like.

3 Copy the code from your favorite text editor and paste it into a table cell.

Method 3: Highlight syntax in Google Docs using Add-ons

Google docs have lots of quick add-ons and some of the popular ones are Translate+, Grammarly, Word Count, FlatforIcons, SpeakD, etc. Similarly, Google has Codeblock for highlighting syntax in google docs. Let's go step by step to install it and use it.

Steps:

1 Select "Add-ons" from the title bar and click on "Get add-ons"

google-docs-addons
fig. Insert add-onsย 

2 Search "Code Blocks" in the search field and select "Code Blocks" by Alex Forsythe and it will install it as add-ons in google docs.

install-code-blocks
fig.ย 

3 In the next screen, click on the "Install" button.

install-code-block-button

4 Click on Continue.

continue-to-install

Then in the next screen select your google account and will give the message "Code Blocks has been installed". and click on the "Done" button.

5. Paste the code in google docs and select the code.

6. Click on "Add-ons" from the title bar and then select "Code Blocks" and then "Start"

7. Select Programming Language.

Here, my code is C# so I will select C# from the programming language dropdown.

8. Your Codes get highlighted.

That's it. It's easy, isn't it?

ย 

ย 

ย 

ย 

ย