How to highlight syntax in Google docs without any add-on?

April 27, 2020 / Nirav Shah

DocumentatIon is one of the most important aspects of any successful software project. With the advent of numerous collaborative tools, everyone can contribute their part easily in building a good document irrespective of where and how it would be used. Google Docs is one of such tools that is widely used by teams across the globe.

Now if you are adding any code in Google Doc and want it to show as code rather than plain text, please use bookmark this tool, as it comes very handy in separating code from plain text. Beware of your prejudice as the tool might seem incomplete to you. But believe us, it’s complete and fully functional.

<a class=”linkcolor” href=”http://markup.su/highlighter/” target=”_blank” rel=”noopener”>http://markup.su/highlighter</a>

No rocket science in its steps, simple copy and paste.
<ol>
<li>Copy your code in the source code box and click highlight.</li>
<li>Select the code shown in preview box.</li>
<li>Copy and paste the code from preview box to your Google document.</li>
</ol>
and voila, it will show as well formatted code. You can also use from a number of given highlighting styles. And to make it even more crispy, it even generates the required <mark>HTML code</mark>, which you can directly use in any webpage.

A demo script is given below
<table class=”blueTable”>
<thead>
<tr>
<th>Normal text</th>
<th>Highlighted text</th>
</tr>
</thead>
<tbody>
<tr>
<td>#Legal variable names:</td>
<td><mark>#Legal variable names:</mark></td>
</tr>
<tr>
<td>myvar = “John”</td>
<td><mark>myvar = “John”</mark></td>
</tr>
<tr>
<td>my_var = “John”</td>
<td><mark>my_var = “John”</mark></td>
</tr>
<tr>
<td>_my_var = “John”</td>
<td><mark>_my_var = “John”</mark></td>
</tr>
<tr>
<td>myVar = “John”</td>
<td><mark>myVar = “John”</mark></td>
</tr>
<tr>
<td>MYVAR = “John”</td>
<td><mark>MYVAR = “John”</mark></td>
</tr>
<tr>
<td>myvar2 = “John”</td>
<td><mark>myvar2 = “John”</mark></td>
</tr>
</tbody>
</table>
<style>
table.blueTable {<br />
width: 100%;<br />
}<br />
mark {<br />
color: #000 !important;<br />
background: #ff0 !important;<br />
}<br />
table.blueTable thead tr th {<br />
text-align: center;<br />
padding: 10px;<br />
background-color: #0b5f9e !important;<br />
color: #fff;<br />
border: 1px solid #000;<br />
}<br />
table.blueTable tbody td {<br />
border: 1px solid;<br />
padding: 10px;<br />
}<br />
</style>