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.
Next, open Docs in your browser; and click the Add-ons tab to open its menu. That menu will now include the Code Pretty add-on. To give you an example of how this add-on highlights syntax, select and copy the sample JavaScript code below into a Docs document by pressing Ctrl + C.
<!DOCTYPE html>
<html>
<body>
<h2>What Can JavaScript Do?</h2>
<p>JavaScript can change HTML attributes.</p>
<p>In this case JavaScript changes the src (source) attribute of an image.</p>
<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>
</body>
</html>
Paste that JavaScript sample into Docs by pressing Ctrl + V. Then select the code in the word processor with the cursor. Click Add-ons > Code Pretty and select the Format Selection option from the submenu. That will format the JavaScript as shown in the snapshot directly below.
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.
When you’ve installed Code Blocks, open Docs and copy and paste the same JavaScript code above into the word processor as before. Click Add-ons > Code Blocks and select Start to open the sidebar shown in the shot directly below.
Select just the JavaScript text with your cursor. Make sure you don’t select any empty document space above or below the code. Select JavaScript from the first drop-down menu. Then you can also select a theme from the Theme drop-down menu. Press the Format button to add the syntax highlighting to the code as shown below. Now the JavaScript text is much clearer with its markup tags highlighted.
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.
Click this hyperlink to open Textmate. Then copy and paste the JavaScript text included in this post into Textmate’s source code box with the Ctrl + C and Ctrl + V hotkeys. Select JavaScript from the Language drop-down menu. Select a syntax highlight theme from the Theme drop-down menu. Press the Highlight button to get a preview for the source code’s formatting as shown in the snapshot directly below.
Next, select the highlighted JavaScript in the preview with the cursor and press Ctrl + C. Paste the highlighted code into Google Docs by pressing Ctrl + V. That will add the highlighted JavaScript source code to the Docs document as shown directly below.
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!
Related Posts
How to Add an Outline in Google Docs
How to Add a Footer to Only One Page in Google Docs
How To Add a Page in Google Docs
How To Add Captions to Images in Google Docs
How To Add an Audio Source to OBS
Google Chrome: What Is View Page Source?
How to Install Custom Google Fonts for Google Docs
How To Send a Message on Google Docs
How to Type Exponents in Google Docs
Disclaimer: Some pages on this site may include an affiliate link. This does not effect our editorial in any way.
