287

Is there way to switch on syntax highlighting in Google Docs?

Personally I use it for editing and collaborating on C++ files, but PHP or SQL syntax highlighting also would be interesting.

1

13 Answers 13

191

With the new Add-Ons for Google Drive, you can get code highlighting with the Code Blocks add-on.

After installing the add-on, you can access it by selecting the code you want to format, go to _Add-ons → Code Blocks → Start:

Screenshot of invoking the Code Blocks menu item

This pops up a sidebar where you can select the programming language and a theme:

Screenshot of using the add-on

After clicking Format, the result looks like this:

enter image description here

5
  • 16
    @HernánEche: It looks like it needs a full set of permissions in order to install itself in the menu bar: developers.google.com/apps-script/add-ons/… Dec 4, 2015 at 17:14
  • @f01 Yes, sadly it seems so. I have rewritten the answer to suggest another add-on that serves the same purpose. Apr 13, 2020 at 13:55
  • Is there a shortcut (at least for inline code)? Like, the ability to highlight text and convert it to code with a shortcut
    – relidon
    Sep 11, 2021 at 14:31
  • It looks like Code Blocks gets access to all my documents? I don't know who Alex Forsythe is, but that's a huge bridge too far if true? Oct 9, 2022 at 16:04
  • @BrianBulkowski It requests access to documents that "this application has been installed in". Not sure what this exactly means. imgur.com/a/Ynw8xPJ Oct 10, 2022 at 7:28
32

I've found codepad.org which allows to share code snippets. It supports syntax highlighting and even compilation of code. And it supports wide range of programming languages — C, C++, D, Haskell, Lua, OCaml, PHP, Perl, Python, Ruby, Scheme, Tcl. And one more great feature — it does not require to login.

EDIT : Codepad has now moved to https://codepad.co/

3
  • 1
    This is a good answer. A big missing language is Java. Would be nice to see C# there as well. Ruby? Com'on!
    – MikeMurko
    Oct 15, 2014 at 15:26
  • 2
    what's wrong with Ruby ? (especially in 2014) Dec 18, 2018 at 9:22
  • You can use vscode based online editors like bitsimplify.com to get nicer syntax highlighting. e.g., bitsimplify.com/bin/6fd540f7aa4322bd Just paste the code in the editor, and then copy again.
    – A. K.
    Mar 8, 2022 at 17:15
31

You can add-on Code Block for Google Docs.

1*- Google Docs --> Add-ons Tab --> 2*- Get Add-ons ... --> Search For: 'Code Blocks'

3*- Then you go to Add-ons --> Code Block --> Start

4*- Select Theme(50+)

enter image description here

1
  • unable to revert or change the Theme once it has been applied and also vary the highlighting differently on different code block
    – xkeshav
    Sep 22, 2017 at 10:08
12

You can make use of the the question or answer fields on Stack Exchange sites to help out.

  1. Paste your code snippet into a blank text field.
  2. Select it, and use the "code sample" (the one with curly braces) button to ensure it gets formatted as code.
  3. Wait a little while to let the syntax highlighting to do its thing.
  4. Copy the previewed question/answer code-block.
  5. In your Google Doc, on a new line, set the paragraph style to block-quote.
  6. Paste the previewed code-block.
  7. That's it.

Google Docs seems to reset the font for some reason, but preserves the syntax highlighting. Good for including code snippets into documentation.

2
  • 8
    That's very tedious, and you'd have to go through this process again every time you make any non-trivial change to your code.
    – musicfreak
    Feb 10, 2010 at 23:05
  • Probably easier to be writing in and copying from an app like VSCode, which carries over the formatting into Google Docs automatically. Dec 8, 2020 at 14:35
12

Just to be clear for rookies like me,

No, there is no code highlighting natively in Google Docs.

There are add ons that can do code highlighting.

Code Pretty is mentioned above and has adequate reviews.

Code Block is also mentioned and has good reviews.

If you don't want to install add ons it gets harder. http://markup.su/highlighter/ is mentioned above as being good, and it does a pretty good job. You just have to copy and paste the code each time there is a change.

If you want code formatting just for documentation purposes, these solutions will work.

If you want the real time collaboration, there are much better solutions for code than Google Docs.

Check out solutions like https://codeshare.io/

4
  • It is already known. But we're looking for a solution to that.
    – KhoPhi
    Jul 19, 2016 at 19:46
  • I tried Code Pretty recommended in here, it's OK. I wish it were open source so somebody could EASILY program in a hot-key to use like others said. Makes it very useful for the professional world, e.g., coding up how-to or wiki-like documents teaching others how to automate/code things. I tried Code Blocks instead. I like it much more. Much easier to tell code apart from the document for training or writing your own notes when learning another new language. Mar 21, 2018 at 14:35
  • 1
    There is one now (see answer from Dec 2022)
    – IObert
    Jan 5, 2023 at 10:51
  • This answer is now obsolete. Also the first two links are no longer working. Mar 28, 2023 at 0:15
10

I've found out that copying pastes from Pastebin works perfectly, and as an added bonus it adds line numbers that are recognized by Google Docs as numbered list.

You go to Pastebin, create an unlisted paste (if you don't want anyone else to see it), select syntax highlighting from large number of available languages and syntaxes, hit Submit, then select and copy highlighted text into your Google Document.

8

Google Docs launched "Code blocks" on December 14, 2022.

It is available to some accounts (depending on the pricing plan). It is not available to users with personal Google Accounts.

To format and display code in a Doc, select Insert > Building blocks > Code blocks > choose your programming language or search @ > Code blocks > choose your programming language.

demo gif

Google's announcement: https://workspaceupdates.googleblog.com/2022/12/format-display-code-google-docs.html

1
  • I pasted some code from Stack Overflow and saw this new code block thing. Then I started searching for it and saw this answer. Good stuff. Apr 11, 2023 at 9:24
5

I faced this problem too, and I didn't want to add any extension to my Google Docs account. I found http://markup.su/highlighter/ , an online code syntax highlighter, you just past your code and can chose between different styles.

I personally use the style "Dawn", then past the output in a tab in the doc, remove the borders and set a background to this tab. The result is good.

4

You can paste it into VSCode and copy from there, then paste into GDocs, the formatting will be preserved with syntax highlighting and monospace font.

1
  • Unfortunately GDocs isn't preserving the indent level (using spaces). Is there a way to do that with this method? Jun 28, 2023 at 15:52
2

Vim can output its syntax-highlighted buffer to an HTML file:

http://vim.wikia.com/wiki/Pasting_code_with_syntax_coloring_in_emails

or this one is also nice:

https://superuser.com/questions/565050/export-file-syntax-highlighting-to-html-using-vim

This file can be opened in your browser, from where you can copy and paste the text over to Google Docs/Drive.

0

For something simple try rextester. It allows to collaborate real-time on code snippets written in many languages. Go to 'run code', choose your language and then hit 'Live cooperation' button.

3
  • Why would someone want to choose that option?
    – ale
    May 23, 2012 at 17:48
  • @Al Everett Because it allows to collaborate on code snippets real-time. Although this doesn't answer the question directly, but suggests an alternative.
    – ren
    May 23, 2012 at 20:26
  • Then please edit your answer to include that information.
    – ale
    May 24, 2012 at 13:04
0

This is a bit of a roundabout way to get Vim (or any other tool that can save a file in the form of HTML) syntax highlighting in a Google Doc:

  1. Copy your code into gvim
  2. Click on the Syntax menu in gvim, and select, "Convert to HTML".
  3. Save that html version to a file.
  4. Open that file in Chrome using ctrl-o to find it. Then in Chrome, type ctrl-a ctrl-c
  5. In a new Google Doc, click the mouse pointer in it, and type ctrl-v.
  6. If gvim is set to have a custom background color, then in Google Docs, type ctrl-a, select the highlight symbol (the icon that looks like a highlighting marker just to the right of the underlined A), and on the pop-up menu, select None.
-1

I just copy and pasted my code from VS Code into my Google Doc, and it appears beautifully formatted, even with my theme colors.

I just had to change the font and line spacing in the document.

Details:
Running on Mac OS, in March 2021, VS Code version: Version: 1.53.2.

1

Not the answer you're looking for? Browse other questions tagged or ask your own question.