Add details to Shiki customization section (#11134)

Co-authored-by: Sarah Rainsberger <[email protected]>

src/content/docs/en/guides/syntax-highlighting.mdx

@@ -111,9 +111,12 @@ export default defineConfig({
 
 ### Customizing Shiki themes
 
-You can follow [Shiki's own theme documentation](https://shiki.style/themes) for more customization options for themes, light vs dark mode toggles, or styling via CSS variables.
+You can follow [Shiki's own theme documentation](https://shiki.style/themes) for more customization options for themes, [light vs dark mode toggles](https://shiki.style/guide/dual-themes), or styling via [CSS variables](https://shiki.style/guide/theme-colors#css-variables-theme).
 
-Astro code blocks are styled using the `.astro-code` class, so you will need to replace the `.shiki` class in the examples with `.astro-code`.
+You will need to adjust the examples from Shiki's documentation for your Astro project by making the following substitutions:
+
+- Code blocks are styled using the `.astro-code` class instead of `.shiki`
+- When using the `css-variables` theme, custom properties are prefixed with `--astro-code-` instead of `--shiki-`
 
 ## Components for code blocks