How to Add Syntax Highlighting to Source Code in Google Docs
Developers and programmers have long used text editors as the primary way of entering computer code. Some development environments have their own built-in editors, but developers are usually fond of one editor and stick to that program. One reason for this is that a good coding editor includes syntax highlighting, a feature that formats source code and assigns fonts and colors to keywords and constructs within the code to make it much easier to read. Text editors such as Notepad ++, which are covered in this Tech Junkie guide, are favored by developers for this reason. Most developers don’t look at Google Docs as being a potential coding editor, despite its great workgroup features and cloud integration, because it doesn’t include built-in syntax-highlighting options.
However, you can add syntax highlighting to code in Google Doc documents. There are, in fact, at least a couple of add-ons for Docs that enable you to format various programming and markup languages with syntax highlighting. There are also numerous web apps that you can utilize to insert source code with highlighting in Google Docs. In this article I will show you how to add source code syntax highlighting to your Docs documents.
Format source code with Code Pretty
Code Pretty is an add-on for Google Docs that automatically adds highlighting to selected code. Code Pretty doesn’t include a huge amount of settings for customizing the syntax formatting, but it still adds a handy syntax highlighting option to Docs. You can add CP to Docs by clicking the Free button on this webpage. Then press the Allow button to confirm permissions for the add-on.
<button onclick=”document.getElementById(‘myImage’).src=’pic_bulbon.gif'”>Turn on the light</button>
<img id=”myImage” src=”pic_bulboff.gif” style=”width:100px”>
<button onclick=”document.getElementById(‘myImage’).src=’pic_bulboff.gif'”>Turn off the light</button>
As stated, CP doesn’t include many settings for the syntax highlighting. However, you can adjust the font size of the highlighted code by clicking Add-ons > Code Pretty and Settings. That will open the sidebar shown directly below. Then you can select an alternative default font size for the highlighted code from there.
Format source code with Code Blocks
Code Blocks is an alternative add-on to CP that you can add to Docs. This is actually a slightly better add-on to highlight syntax with as it includes numerous highlighting themes. Press the Free button on this website page to add Code Blocks to Docs.
Copy and Paste Highlighted Source Code into Google Docs
Aside from Code Blocks and Code Pretty Docs, you can also utilize syntax highlighter web apps to format source code. Then you can copy and paste the highlighted source code from a web app back into your Docs document. Textmate is one syntax highlighter web app that formats numerous programming and markup languages.
So, you don’t need a desktop text editor to add syntax highlighting to software and website code. Instead, you can highlight syntax code in Docs documents with the Code Pretty and Code Blocks extensions. Alternatively, copy and paste your code to and from the Textmate web app to insert source code with highlighting in Google Docs.
Have any other ways to add syntax formatting to Google Docs? Share them with us below!