How to add syntax highlighting to Eleventy with PrismJS
// markdown
import markdownIt from "markdown-it";
import markdownItClass from "@toycode/markdown-it-class";
import markdownItMathjax from "markdown-it-mathjax3";
// syntax highlighting
import syntaxHighlight from "@11ty/eleventy-plugin-syntaxhighlight";
import codeClipboard from "eleventy-plugin-code-clipboard";
Then, in your Eleventy config function:
const md = markdownIt({ linkify: true, html: true });
md.use(markdownItClass, mapping)
.use(markdownItMathjax)
.use(codeClipboard.markdownItCopyButton, {
// Add nice Icon:
iconifyUrl: 'https://api.iconify.design/ph/copy-bold.svg',
// 2. Adjust the size if necessary
iconStyle: 'width: 30px; height: 30px;',
// Optional: Add Tailwind classes directly to the button if you want to style it
additionalButtonClass: 'hover:opacity-100 transition-opacity animate-ease-in-out',
});
eleventyConfig.setLibrary('md', md);
