How to Highlight Code Syntax in Google Slides

Recently I wanted to include a code snippet in Google Slides. I could have just add a screenshot from the editor, but…

Luckily, there is a way around it. Shiki Syntax highlighter comes to the rescue. There is one prerequisite, though.


You need to use a following user script. It can be used via a browser add-on such as ViolentMonkey or TamperMonkey.

// ==UserScript==
// @name        Select styled playground output
// @namespace   Violentmonkey Scripts
// @match*
// @grant       none
// @version     1.0
// @author      Tymoteusz Makowski (TymekDev)
// @description 2024-04-04 16:06:02 +0200
// ==/UserScript==

const button = document.createElement("button");
button.textContent = "Select with styles";
button.addEventListener("click", () => {
  window.getSelection().selectAllChildren(document.querySelector(".mini-playground span:has(+ textarea)"));
document.querySelector(".mini-playground > div:first-child").appendChild(button);


  1. Follow Setup described above
  2. Head to
  3. Scroll down a playground
  4. Select a programming language
  5. Select a theme
  6. Click Select with styles button
  7. Copy selection with Cmd+C or Ctrl+C
  8. Paste into a text box in Google Slides
  9. Adjust style to your liking

Namely, these are the things I found myself adjusting:

The Result