nibula 2.2.1 → 2.3.0

package/.eleventy.js

@@ -1,6 +1,7 @@
 const { RenderPlugin } = require("@11ty/eleventy");
 const markdownItAnchor = require("markdown-it-anchor");
 const markdownItAttrs = require("markdown-it-attrs");
+const syntaxHighlight = require("@11ty/eleventy-plugin-syntaxhighlight");
 const Image = require("@11ty/eleventy-img");
 const fs = require("fs");
 const path = require("path");
@@ -14,7 +15,6 @@ const ANCHOR_PERMALINK_PLACEMENT = "after";
 const MARKDOWN_BASE_PATH = "src/frontend/components/";
 
 module.exports = function (eleventyConfig) {
-
   // ---------------------------------------------------------------------------
   // Utilities
   // ---------------------------------------------------------------------------
@@ -42,6 +42,10 @@ module.exports = function (eleventyConfig) {
 
   eleventyConfig.addPlugin(RenderPlugin);
 
+  eleventyConfig.addPlugin(syntaxHighlight, {
+    templateFormats: ["md"],
+  });
+
   eleventyConfig.amendLibrary("md", (markdownLibrary) => {
     markdownLibrary
       .use(markdownItAnchor, {
@@ -76,10 +80,16 @@ module.exports = function (eleventyConfig) {
     "src/frontend/hosting/web.config": "web.config",
   });
 
-  // node_modules dependencies
+  // Prism syntax highlighting theme
+  eleventyConfig.addPassthroughCopy({
+    "node_modules/prismjs/themes/prism-tomorrow.css": "css/prism.css",
+  });
+
+  // CSS frameworks — uncomment the one you are using
   eleventyConfig.addPassthroughCopy({
     // Bootstrap
-    "node_modules/bootstrap/dist/js/bootstrap.bundle.min.js": "js/bootstrap.bundle.min.js",
+    "node_modules/bootstrap/dist/js/bootstrap.bundle.min.js":
+      "js/bootstrap.bundle.min.js",
     "node_modules/bootstrap-icons/font/fonts": "css/fonts",
 
     // Foundation
@@ -96,7 +106,10 @@ module.exports = function (eleventyConfig) {
   // Shortcodes
   // ---------------------------------------------------------------------------
 
-  eleventyConfig.addFilter("markdownPath", (name) => `${MARKDOWN_BASE_PATH}${name}`);
+  eleventyConfig.addFilter(
+    "markdownPath",
+    (name) => `${MARKDOWN_BASE_PATH}${name}`,
+  );
 
   eleventyConfig.addShortcode("image", async function (src, alt) {
     const metadata = await Image(src, {
@@ -143,4 +156,4 @@ module.exports = function (eleventyConfig) {
       data: "data",
     },
   };
-};
+};

package/CHANGELOG.md

@@ -5,6 +5,23 @@ All notable changes to Nibula are documented here.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.1.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## [2.3.0] - 2026-08-19
+
+### Added
+- **Code blocks in Markdown are syntax highlighted.** `@11ty/eleventy-plugin-syntaxhighlight`
+  runs PrismJS at build time — no client-side JavaScript — and a Prism theme is
+  copied to `css/prism.css` and linked in `base.njk`. Adding a language to the
+  fence (```` ```json ````) colours the block; leaving the fence bare renders it
+  plain, which is what you want for a command meant to be copied.
+
+## [2.2.2] - 2026-08-19
+
+### Fixed
+- The commented `renderFile` example in the page template now passes `"md"` as
+  the format argument. Without it Eleventy also ran the file through Nunjucks, so
+  a `.md` containing template syntax — a code sample with `{{ }}` or `{% %}` in
+  it — broke the build instead of rendering as text.
+
 ## [2.2.1] - 2026-08-18
 
 ### Fixed

package/bin/create.js

@@ -158,6 +158,7 @@ const PROJECT_PACKAGE = {
     dependencies: {
         '@11ty/eleventy':     '^3.1.2',
         '@11ty/eleventy-img': '^6.0.4',
+        '@11ty/eleventy-plugin-syntaxhighlight': '^5.0.2',
         'bootstrap':          '^5.3.8',
         'bootstrap-icons':    '^1.13.1',
         'bulma':              '^1.0.4',

package/docs/Components.md

@@ -13,8 +13,6 @@ src/frontend/components/
 ├── global/
 │   ├── header.njk
 │   └── footer.njk
-├── modals/
-│   └── privacyModal.njk
 ├── not-found.njk
 ├── welcome.njk
 ```
@@ -88,7 +86,7 @@ Open the page's file in `src/frontend/routes/` and add this line to its body:
 
 ```html
 <article class="markdown-body">
-    {% renderFile "article.md" | markdownPath, { site: site } %}
+    {% renderFile "article.md" | markdownPath, { site: site }, "md" %}
 </article>
 ```
 
@@ -100,6 +98,7 @@ Four parts to it:
 | `renderFile` | turns the Markdown into HTML and puts it in the page |
 | `markdownPath` | fills in the `src/frontend/components/` part of the path for you |
 | `{ site: site }` | hands the file your site settings — see below |
+| `"md"` | specifies that the rendering should be done as Markdown, ignoring the njk engine associated by default with the file extension |
 
 Subfolders work the same way as with components:
 `"legal/privacy.md" | markdownPath`

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "nibula",
-  "version": "2.2.1",
+  "version": "2.3.0",
   "description": "A beginner-friendly static site generator built on Eleventy that stays close to vanilla HTML, CSS and JS — with a page-management CLI, an optional PHP backend, and SEO files generated for you.",
   "keywords": [
     "11ty",
@@ -56,6 +56,7 @@
   "devDependencies": {
     "@11ty/eleventy": "^3.1.2",
     "@11ty/eleventy-img": "^6.0.4",
+    "@11ty/eleventy-plugin-syntaxhighlight": "^5.0.2",
     "bootstrap": "^5.3.8",
     "bootstrap-icons": "^1.13.1",
     "bulma": "^1.0.4",

package/src/frontend/layouts/base.njk

@@ -82,6 +82,9 @@
         ║       CSS        ║
         ╚══════════════════╝#}
 
+        {# Syntax highlighting for code blocks #}
+        <link rel="stylesheet" href="{{ '/css/prism.css' | url }}">
+
         {# Page CSS #}
         <link rel="stylesheet" href="{{ ('/css/pages/' + title + '.css') | url }}"/>
 

package/src/frontend/routes/404.njk

@@ -10,6 +10,6 @@ layout: base.njk
 {# Markdown files live in components/ too. Pass the data the file needs #}
 {#
 <article class="markdown-body">
-    {% renderFile "your-file.md" | markdownPath, { site: site } %}
+    {% renderFile "your-file.md" | markdownPath, { site: site }, "md" %}
 </article>
 #}

package/src/frontend/routes/index.njk

@@ -10,6 +10,6 @@ layout: base.njk
 {# Markdown files live in components/ too. Pass the data the file needs #}
 {#
 <article class="markdown-body">
-    {% renderFile "your-file.md" | markdownPath, { site: site } %}
+    {% renderFile "your-file.md" | markdownPath, { site: site }, "md" %}
 </article>
 #}

package/tools/res/templates/template.njk

@@ -10,6 +10,6 @@ layout: base.njk
 {# Markdown files live in components/ too. Pass the data the file needs #}
 {# 
 <article class="markdown-body">
-    {% renderFile "your-file.md" | markdownPath, { site: site } %}
+    {% renderFile "your-file.md" | markdownPath, { site: site }, "md" %}
 </article>
 #}