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

• I use dark theme in the editor; slides were light theme
• Making font size just right with an image is tedious

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

Setup

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       https://shiki.style/*
// @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);

Steps

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

Namely, these are the things I found myself adjusting:

• Changing line height to 1
• Changing font to monospace
• Removing space after and before a paragraph
• Setting font size
• Removing background from text

The Result