diff --git a/package-lock.json b/package-lock.json
index b05e71318..3298c77e4 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -12,6 +12,7 @@
                 "@aw-labs/icons": "0.0.0-55",
                 "@aw-labs/ui": "0.0.0-55",
                 "echarts": "^5.3.3",
+                "highlight.js": "^11.6.0",
                 "tippy.js": "^6.3.7",
                 "web-vitals": "^2.1.4"
             },
@@ -4304,6 +4305,14 @@
             "integrity": "sha512-8Rf9Y83NBReMnx0gFzA8JImQACstCYWUplepDa9xprwwtmgEZUF0h/i5xSA625zB/I37EtrswSST6OXxwaaIJQ==",
             "dev": true
         },
+        "node_modules/highlight.js": {
+            "version": "11.6.0",
+            "resolved": "https://registry.npmjs.org/highlight.js/-/highlight.js-11.6.0.tgz",
+            "integrity": "sha512-ig1eqDzJaB0pqEvlPVIpSSyMaO92bH1N2rJpLMN/nX396wTpDA4Eq0uK+7I/2XG17pFaaKE0kjV/XPeGt7Evjw==",
+            "engines": {
+                "node": ">=12.0.0"
+            }
+        },
         "node_modules/html-encoding-sniffer": {
             "version": "3.0.0",
             "resolved": "https://registry.npmjs.org/html-encoding-sniffer/-/html-encoding-sniffer-3.0.0.tgz",
@@ -11379,6 +11388,11 @@
             "integrity": "sha512-8Rf9Y83NBReMnx0gFzA8JImQACstCYWUplepDa9xprwwtmgEZUF0h/i5xSA625zB/I37EtrswSST6OXxwaaIJQ==",
             "dev": true
         },
+        "highlight.js": {
+            "version": "11.6.0",
+            "resolved": "https://registry.npmjs.org/highlight.js/-/highlight.js-11.6.0.tgz",
+            "integrity": "sha512-ig1eqDzJaB0pqEvlPVIpSSyMaO92bH1N2rJpLMN/nX396wTpDA4Eq0uK+7I/2XG17pFaaKE0kjV/XPeGt7Evjw=="
+        },
         "html-encoding-sniffer": {
             "version": "3.0.0",
             "resolved": "https://registry.npmjs.org/html-encoding-sniffer/-/html-encoding-sniffer-3.0.0.tgz",
diff --git a/package.json b/package.json
index 2409815ef..93a6b36e5 100644
--- a/package.json
+++ b/package.json
@@ -22,6 +22,7 @@
         "@aw-labs/icons": "0.0.0-55",
         "@aw-labs/ui": "0.0.0-55",
         "echarts": "^5.3.3",
+        "highlight.js": "^11.6.0",
         "tippy.js": "^6.3.7",
         "web-vitals": "^2.1.4"
     },
diff --git a/src/lib/components/code.svelte b/src/lib/components/code.svelte
new file mode 100644
index 000000000..76860d59c
--- /dev/null
+++ b/src/lib/components/code.svelte
@@ -0,0 +1,15 @@
+<script context="module">
+    import 'highlight.js/scss/default.scss';
+</script>
+
+<script lang="ts">
+    import Highlight from 'highlight.js';
+    import { onMount } from 'svelte';
+
+    let container: HTMLElement;
+    onMount(() => {
+        Highlight.highlightElement(container);
+    });
+</script>
+
+<pre><code class="language-js" bind:this={container}><slot /></code></pre>
diff --git a/src/routes/console/project-[project]/overview/platforms/+page.svelte b/src/routes/console/project-[project]/overview/platforms/+page.svelte
index b679ee92e..740c0a0a4 100644
--- a/src/routes/console/project-[project]/overview/platforms/+page.svelte
+++ b/src/routes/console/project-[project]/overview/platforms/+page.svelte
@@ -1,6 +1,7 @@
 <script lang="ts">
     import { page } from '$app/stores';
     import { GridItem1 } from '$lib/components';
+    import Code from '$lib/components/code.svelte';
     import { Button } from '$lib/elements/forms';
     import { toLocaleDateTime } from '$lib/helpers/date';
     import { project } from '../../store';
@@ -11,6 +12,14 @@
     const path = `/console/project-${$page.params.project}/overview/platforms`;
 </script>
 
+<Code
+    >{`
+document.addEventListener('DOMContentLoaded', (event) => {
+  document.querySelectorAll('pre code').forEach((el) => {
+    hljs.highlightElement(el);
+  });
+});
+`}</Code>
 <div class="common-section u-flex u-gap-12">
     <h3 class="heading-level-7">Platforms</h3>
     <span class="u-margin-inline-start-auto">