If you want to quickly highlight code syntax on your web pages without reading through the PrismJS documentation for integration, this is the solution for you. Here’s the script link:
<script src="https://cdn.jsdelivr.net/gh/vespaiach/[email protected]/dist/prismjs-loader.js"
integrity="sha384-fQ8ZFrFH+LbIS8XcKxvpBaapsqCkg93NVlsLk2+xmNfkFHWwHsRfm3BcYORlbOhY"
crossorigin="anonymous" defer>
</script>Note: Place it at the end of your body tag.
This script automatically downloads the following:
- PrismJS core package
- Autoloader plugin package
- Line number plugin package
- Default Prism theme file
Once all resources are loaded, the autoloader plugin determines which language grammar packages should be fetched next.
All requests occur after the page finishes rendering, so your page’s SEO score remains unaffected.
If you want to load themes other than the default, you can specify them in the class attribute of the script tag.
<!-- Load the prism-coy theme in dark mode; otherwise, load the prism-funky theme -->
<script src="https://cdn.jsdelivr.net/gh/vespaiach/[email protected]/dist/prismjs-loader.js"
integrity="sha384-fQ8ZFrFH+LbIS8XcKxvpBaapsqCkg93NVlsLk2+xmNfkFHWwHsRfm3BcYORlbOhY"
crossorigin="anonymous" defer
class="dark:prism-coy prism-funky">
</script>Note: Use prefix dark: or light: to load themes based on the browser's prefers-color-scheme
Available Prism Themes:
- prism (default)
- prism-coy
- prism-dark
- prism-funky
- prism-okaidia
- prism-solarizedlight
- prism-tomorrow
- prism-twilight