diff --git a/src/content/docs/examples/http-to-osc.md b/src/content/docs/examples/http-to-osc.mdx
similarity index 83%
rename from src/content/docs/examples/http-to-osc.md
rename to src/content/docs/examples/http-to-osc.mdx
index 95f97c0..0e77863 100644
--- a/src/content/docs/examples/http-to-osc.md
+++ b/src/content/docs/examples/http-to-osc.mdx
@@ -2,10 +2,12 @@
 title: HTTP > OSC
 ---
 
+import { Code } from '@astrojs/starlight/components';
+
 This config starts an HTTP server listening on port `3000`. Any HTTP request coming into that server will result in a OSC message being sent to `127.0.0.1:8000` with the address set to the path from the incoming HTTP message.
 
-```
-# config.yaml
+
+export const example = `
 modules:
   - id: http
     type: http.server
@@ -24,4 +26,6 @@ routes:
           address: "{{.URL.Path}}"  # template the address from the incoming message
       - type: osc.message.encode    # turn OSC message into bytes
     output: udp
-```
+`
+
+<Code code={example} title="config.yaml" lang="yaml"/>