diff --git a/api/sixtyfps-cpp/docs/_templates/layout.html b/api/sixtyfps-cpp/docs/_templates/layout.html
index 8329f8e83..6cd302f35 100644
--- a/api/sixtyfps-cpp/docs/_templates/layout.html
+++ b/api/sixtyfps-cpp/docs/_templates/layout.html
@@ -2,4 +2,5 @@
 {% block scripts %}
 {{ super() }}
 {% include "../../../sixtyfps-rs/sixtyfps-docs-preview.html" %}
+{% include "../sixtyfps-docs-highlight.html" %}
 {% endblock %}
\ No newline at end of file
diff --git a/api/sixtyfps-cpp/docs/sixtyfps-docs-highlight.html b/api/sixtyfps-cpp/docs/sixtyfps-docs-highlight.html
new file mode 100644
index 000000000..e10714530
--- /dev/null
+++ b/api/sixtyfps-cpp/docs/sixtyfps-docs-highlight.html
@@ -0,0 +1,16 @@
+<!--
+    This file is used to add syntax highlighting of the `.60` snippets in the generated C++ documentation.
+    It is injected in the Sphinx documentation via _templates/layout.html.
+-->
+<link rel="stylesheet" href="https://sixtyfps.io/highlight-default.css">
+<script src="https://sixtyfps.io/highlight.pack.js"></script>
+<script src="https://sixtyfps.io/highlight_60.js"></script>
+<script>
+    window.addEventListener("DOMContentLoaded", () => {
+        // The Sphinx/my_st generated HTML for code blocks does not use <code> tags, so highlight.js'
+        // default selector "pre code" does not match. Let's do it by hand:
+        for (block of document.querySelectorAll("div.highlight-60 div.highlight pre")) {
+            hljs.highlightBlock(block)
+        }
+    });
+</script>
\ No newline at end of file