LB - Blog Logo

My Blog

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);