Copy code with syntax highlighting intact using your browser's developer tools

When you copy code from a website, the colors usually disappear — you get plain black text on white. The color coding (called syntax highlighting) helps you read the code by showing different parts in different colors: keywords in blue, strings in green, comments in gray. You can preserve those colors by copying from your browser's developer tools instead of the visible webpage.

The simplest method works in Chrome, Firefox, Safari, and Edge: right-click the code on the page, select Inspect or Inspect Element, find the colored code in the developer panel that opens, select it, copy it, and paste it into a document that supports rich text — like Google Docs, Microsoft Word, or most code editors. The colors come with it.

This works because the developer tools show you the actual HTML and CSS that creates the colors. When you copy from there, you are copying the formatting instructions along with the text.

Key Takeaways

  • Right-click code on a webpage and select Inspect to open the developer tools, which display the code with its original colors intact.
  • Paste colored code into rich-text documents like Google Docs or Word, or directly into most code editors, and the colors will remain.
  • If you need the code as plain text without colors, copy from the developer tools but paste into a plain-text editor like Notepad instead.
  • Some websites use JavaScript to create the colors, so the developer tools may show the code differently than it appears on the page — inspect the actual HTML element containing the code, not the page source.

Finding the code in the developer tools

After you right-click and select Inspect, a panel opens at the bottom or side of your browser showing the page's code. You will see a lot of HTML — this is normal. Look for the section that contains the colored code you want to copy. Usually it is inside a <pre> tag (which stands for "preformatted") or a <code> tag.

If the panel is confusing, use the element picker tool. In Chrome and Edge, click the arrow icon in the top-left corner of the developer panel. In Firefox, click the icon that looks like a cursor in a box. Then click directly on the colored code on the webpage. The developer tools will jump to that exact section of HTML and highlight it for you.

Once you have found the right section, you can see the HTML that creates the colors. Each colored word or symbol is usually wrapped in a <span> tag with a class name like keyword or string. These class names tell the browser's CSS what color to use. When you copy this HTML, the colors travel with it.

Copying and pasting into different programs

Select the code in the developer tools by clicking at the start, holding Shift, and clicking at the end. Or triple-click to select a whole line, then extend the selection. Use Ctrl+C (Windows) or Command+C (Mac) to copy.

In Google Docs, paste with Ctrl+V or Command+V. The colors appear automatically. In Microsoft Word, paste normally and the colors come through. In Visual Studio Code, Sublime Text, or most other code editors, paste and the colors appear because these programs understand HTML formatting.

If you paste into Notepad or plain-text editors, the colors disappear — these programs strip out all formatting. That is fine if you only need the text itself. But if you want to keep the colors, use a rich-text program or a code editor instead.

When the colors do not copy correctly

Some websites use JavaScript to add colors after the page loads, which means the HTML in the developer tools might not include the color information. If you copy and the colors do not appear, try a different approach: copy the code as plain text, then paste it into your code editor, which will add its own syntax highlighting automatically based on the programming language.

Another reason colors might not copy is if the website uses a custom font or background color that does not translate well to your document. In that case, your document's default colors take over. This is usually fine — the code is still readable, just in your document's color scheme instead of the website's.

If you need the exact colors from the website, you can also take a screenshot of the code and paste the image into your document. This preserves everything — colors, fonts, spacing — but you cannot edit the text afterward.

Copying code from GitHub and documentation sites

GitHub, Stack Overflow, and most programming documentation sites have a copy button built into the code block — usually a small icon in the top-right corner of the colored code. Click it and the code copies to your clipboard as plain text, without colors. This is intentional: these sites want you to copy the code itself, not the formatting, so you can paste it into your editor and let your editor's syntax highlighting take over.

If you want the colors from these sites, use the Inspect method instead of the copy button. Right-click the code block, select Inspect, and copy from the developer tools as described above. The colors will come through when you paste into a rich-text document.

Using color-preserving paste in your code editor

Most modern code editors — Visual Studio Code, Sublime Text, JetBrains IDEs — have their own syntax highlighting built in. When you paste plain code into them, they automatically color it based on the programming language. You do not need to copy colored code from the website; the editor does the coloring for you.

This is actually better than copying colors from a website, because your editor's colors are consistent with your theme and your other code. If you paste code with website colors mixed in, it can look messy.

The exception is if you are pasting code into a document for sharing or teaching — a Word document, a Google Doc, a presentation, or an email. In those cases, copying colored code from the developer tools makes the code easier to read for someone who does not have a code editor open.

Frequently Asked Questions

Why do colors disappear when I copy code normally?

The colors you see on a website are created by CSS, which is separate from the text itself. When you copy text, you only copy the text, not the CSS instructions that color it. The developer tools show both the text and the CSS together, so copying from there preserves the colors.

Can I copy code with colors from my phone or tablet?

Mobile browsers have developer tools, but they are harder to use. On iPhone, you cannot access developer tools at all. On Android Chrome, long-press the code and select Inspect, but the interface is small. For mobile, taking a screenshot is usually easier than trying to copy colored code.

Will the colors stay if I paste into email?

Most email programs strip out HTML formatting when you paste, so colors disappear. Gmail and Outlook sometimes preserve colors, but it depends on whether you are using the web version or the app. If colors are important, take a screenshot and paste the image instead.

What if I want to copy code but remove the colors?

Copy from the developer tools, then paste into Notepad or another plain-text editor. This removes all formatting and leaves you with plain text. Or copy the code normally from the webpage (not from the developer tools), which gives you plain text without colors to begin with.

Do I need to know HTML to use the Inspect method?

No. You only need to find the colored code in the developer panel and select it. You do not need to understand the HTML around it — just select the part you want and copy it. The browser handles the rest.