Code samples in Eleventy

This is a dummy post used to sample how code snippets render on the site. Everything here leans on the stock Eleventy setup: plain Markdown fenced blocks, processed at build time by the @11ty/eleventy-plugin-syntaxhighlight plugin. No client-side highlighting and no extra dependencies.

Inline code

Short identifiers, commands and paths can be written inline, like npm run build, eleventy.config.js or src/blog/. The plugin leaves inline code alone, so the background comes from the site styles instead.

Fenced code blocks

A fenced block with a language tag is the whole API. This is a shell example:

npm install
npm run build
npx eleventy --serve

The same fence with js highlights JavaScript:

import syntaxHighlight from "@11ty/eleventy-plugin-syntaxhighlight";

export default async function (eleventyConfig) {
  eleventyConfig.addPlugin(syntaxHighlight);

  eleventyConfig.addCollection("blog", (collection) => {
    return collection
      .getFilteredByGlob("src/blog/*.md")
      .sort((a, b) => b.date - a.date);
  });
}

Structured data

JSON and YAML both have languages bundled with Prism, so they need no configuration either:

{
  "layout": "layouts/post.njk",
  "type": "Blog",
  "tags": "post"
}

title: "Code samples in Eleventy"
date: 2026-09-27
topics: [devops, devex]

CSS works the same way:

pre code {
  background: none;
  color: inherit;
  padding: 0;
  font-size: inherit;
}

Highlighting specific lines

The plugin understands a line range appended to the language. Here lines 2 and 3 are emphasised:

const site = "ruimarques.dev";
const numbers = [1, 2, 3, 4, 5];
const doubled = numbers.map((n) => n * 2);
console.log(site, doubled);

Diffs

The plugin also registers the diff language, so a unified diff reads naturally:

- const output = await eleventy.toJSON();
- await fs.writeFile("cache.json", output);
+ const output = await eleventy.toJSON();
+ await fs.writeFile("cache.json", JSON.stringify(output, null, 2));

Escaping template syntax

One caveat worth knowing: markdownTemplateEngine is set to njk, so Nunjucks runs over the body before Markdown does. Fenced blocks are not exempt. A snippet that contains template syntax must be wrapped in a raw block, otherwise Eleventy evaluates it instead of printing it. For example:

{{ site.title }} was published in {{ site.year }}.

A note on the build

Everything on this page is rendered once, at build time. That keeps the HTML static, the page fast, and the experience intact when JavaScript is unavailable.

• Fenced blocks need a language tag to be highlighted.
• Inline code is styled by the site, not by the plugin.
• Line highlights are opt-in per fence.