289

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.

Improve this question
1

13 Answers 13

Reset to default
192

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:

Code Blocks menu dropdown

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

Sidebar showing options with a preview underneath

After clicking Format, the result looks like this:

JavaScript code with syntax highlighting

Improve this answer
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/…
    – Vidar S. Ramdal
    Commented 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.
    – Vidar S. Ramdal
    Commented 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
    Commented 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?
    – Brian Bulkowski
    Commented 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
    – Vidar S. Ramdal
    Commented Oct 10, 2022 at 7:28
33

I've found Codepad 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.

Improve this answer
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
    Commented Oct 15, 2014 at 15:26
  • 2
    what's wrong with Ruby ? (especially in 2014)
    – vasilakisfil
    Commented 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.
    Commented 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

Improve this answer
1
  • unable to revert or change the Theme once it has been applied and also vary the highlighting differently on different code block
    – xkeshav
    Commented 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.

Improve this answer
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
    Commented 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.
    – Ninjakannon
    Commented 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/

Improve this answer
4
  • It is already known. But we're looking for a solution to that.
    – KhoPhi
    Commented 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.
    – Lance Robbins
    Commented Mar 21, 2018 at 14:35
  • 1
    There is one now (see answer from Dec 2022)
    – IObert
    Commented Jan 5, 2023 at 10:51
  • This answer is now obsolete. Also the first two links are no longer working.
    – Rubén - Volunteer Moderator - ♦
    Commented 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.

Improve this answer
10

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: Easily format and display code in Google Docs

Improve this answer
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.
    – Sнаđошƒаӽ
    Commented 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.

Improve this answer
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.

Improve this answer
1
  • Unfortunately GDocs isn't preserving the indent level (using spaces). Is there a way to do that with this method?
    – Andy Carlson
    Commented 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.

Improve this answer
1
  • This is a really interesting solution! When I copy/paste the HTML from Firefox, it still shows up as unformatted text. What are you doing differently to paste formatted text in Google Docs?
    – Synthead
    Commented Jul 24 at 19:40
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.

Improve this answer
3
  • Why would someone want to choose that option?
    – ale
    Commented 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
    Commented May 23, 2012 at 20:26
  • Then please edit your answer to include that information.
    – ale
    Commented 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.
Improve this answer
-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.

Improve this answer
1

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