prismjs

eleventy.config.js

@@ -13,6 +13,7 @@ import site from "./site/_data/site.js";
 import { feedPlugin } from "@11ty/eleventy-plugin-rss";
 import { execSync } from 'child_process';
 import eleventyAutoCacheBuster from "eleventy-auto-cache-buster";
+import mdPrism from "markdown-it-prism";
 
 dayjs.extend(utc);
 
@@ -44,7 +45,8 @@ export default (config) => {
         target: "_blank",
         rel: "noopener",
       },
-    });
+    })
+    .use(mdPrism);
   mdLib.renderer.rules.render_footnote_anchor = (tokens, idx, options, env, slf) => {
     let id = slf.rules.footnote_anchor_name(tokens, idx, options, env, slf)
     if (tokens[idx].meta.subId > 0) id += `:${tokens[idx].meta.subId}`

package-lock.json

@@ -18,6 +18,7 @@
         "eleventy-plugin-clean": "^2.0.1",
         "markdown-it-anchor": "^9.0.1",
         "markdown-it-link-attributes": "^4.0.1",
+        "markdown-it-prism": "^3.0.0",
         "prettier": "^3.3.1"
       },
       "devDependencies": {
@@ -1973,6 +1974,18 @@
       "integrity": "sha512-pg5OK0jPLg62H4k7M9mRJLT61gUp9nvG0XveKYHMOOluASo9OEF13WlXrpAp2aj35LbedAy3QOCgQCw0tkLKAQ==",
       "license": "MIT"
     },
+    "node_modules/markdown-it-prism": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/markdown-it-prism/-/markdown-it-prism-3.0.0.tgz",
+      "integrity": "sha512-M0LQsbVzjbzufV95nYdtbs99Sm/8f7zLnqFblb5yQZtFTGLM+y6hxMZ8BdujY3FFqVvTbnZ52/uoicQUqZUYbg==",
+      "license": "MIT",
+      "dependencies": {
+        "prismjs": "1.30.0"
+      },
+      "engines": {
+        "node": ">=20.0.0"
+      }
+    },
     "node_modules/markdown-it/node_modules/argparse": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/argparse/-/argparse-2.0.1.tgz",
@@ -2519,6 +2532,15 @@
         "url": "https://github.com/prettier/prettier?sponsor=1"
       }
     },
+    "node_modules/prismjs": {
+      "version": "1.30.0",
+      "resolved": "https://registry.npmjs.org/prismjs/-/prismjs-1.30.0.tgz",
+      "integrity": "sha512-DEvV2ZF2r2/63V+tK8hQvrR2ZGn10srHbXviTlcv7Kpzw8jWiNTqbVgjO3IY8RxrrOUF8VPMQQFysYYYv0YZxw==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=6"
+      }
+    },
     "node_modules/promise": {
       "version": "7.3.1",
       "resolved": "https://registry.npmjs.org/promise/-/promise-7.3.1.tgz",

package.json

@@ -22,6 +22,7 @@
     "eleventy-plugin-clean": "^2.0.1",
     "markdown-it-anchor": "^9.0.1",
     "markdown-it-link-attributes": "^4.0.1",
+    "markdown-it-prism": "^3.0.0",
     "prettier": "^3.3.1"
   },
   "devDependencies": {

site/_includes/css/prism-gh.css

@@ -0,0 +1,121 @@
+/**
+ * GHColors theme by Avi Aryan (http://aviaryan.in)
+ * Inspired by Github syntax coloring
+ */
+
+ code[class*="language-"],
+ pre[class*="language-"] {
+   color: #393A34;
+   direction: ltr;
+   text-align: left;
+   white-space: pre;
+   word-spacing: normal;
+   word-break: normal;
+   font-size: .9em;
+   line-height: 1.2em;
+
+   -moz-tab-size: 4;
+   -o-tab-size: 4;
+   tab-size: 4;
+
+   -webkit-hyphens: none;
+   -moz-hyphens: none;
+   -ms-hyphens: none;
+   hyphens: none;
+ }
+
+ pre > code[class*="language-"] {
+   font-size: 1em;
+ }
+
+ pre[class*="language-"]::-moz-selection, pre[class*="language-"] ::-moz-selection,
+ code[class*="language-"]::-moz-selection, code[class*="language-"] ::-moz-selection {
+   background: #b3d4fc;
+ }
+
+ pre[class*="language-"]::selection, pre[class*="language-"] ::selection,
+ code[class*="language-"]::selection, code[class*="language-"] ::selection {
+   background: #b3d4fc;
+ }
+
+ /* Code blocks */
+ pre[class*="language-"] {
+   padding: 1em;
+   margin: .5em 0;
+   overflow: auto;
+   border: 1px solid #dddddd;
+   background-color: white;
+ }
+
+ /* Inline code */
+ :not(pre) > code[class*="language-"] {
+   padding: .2em;
+   padding-top: 1px;
+   padding-bottom: 1px;
+   background: #f8f8f8;
+   border: 1px solid #dddddd;
+ }
+
+ .token.comment,
+ .token.prolog,
+ .token.doctype,
+ .token.cdata {
+   color: #999988;
+   font-style: italic;
+ }
+
+ .token.namespace {
+   opacity: .7;
+ }
+
+ .token.string,
+ .token.attr-value {
+   color: #e3116c;
+ }
+
+ .token.punctuation,
+ .token.operator {
+   color: #393A34; /* no highlight */
+ }
+
+ .token.entity,
+ .token.url,
+ .token.symbol,
+ .token.number,
+ .token.boolean,
+ .token.variable,
+ .token.constant,
+ .token.property,
+ .token.regex,
+ .token.inserted {
+   color: #36acaa;
+ }
+
+ .token.atrule,
+ .token.keyword,
+ .token.attr-name,
+ .language-autohotkey .token.selector {
+   color: #00a4db;
+ }
+
+ .token.function,
+ .token.deleted,
+ .language-autohotkey .token.tag {
+   color: #9a050f;
+ }
+
+ .token.tag,
+ .token.selector,
+ .language-autohotkey .token.keyword {
+   color: #00009f;
+ }
+
+ .token.important,
+ .token.function,
+ .token.bold {
+   font-weight: bold;
+ }
+
+ .token.italic {
+   font-style: italic;
+ }

site/_includes/css/site.css

@@ -521,14 +521,16 @@ a.header-anchor {
   margin-bottom: 1rem;
 }
 
-p > code {
+p > code, pre {
-  display: inline-block;
   font-family: "Commit Mono", monospace;
   background-color: var(--c-text-background-light);
   padding: 0.1em;
-  margin: -0.1em;
   border-radius: 0.5em;
 }
+p > code {
+  margin: -0.1em;
+  display: inline-block;
+}
 
 body #isso-thread {
   margin-top: 4rem;
@@ -569,7 +571,8 @@ body .isso-input-wrapper label {
 body .isso-input-wrapper input,
 input[type='text'],
 body .isso-textarea,
-body .isso-preview {
+body .isso-preview,
+pre {
   color: inherit;
   font-size: 1rem;
   background-color: transparent;

site/css.njk

@@ -4,3 +4,4 @@ permalink: /site.css
 {%include "css/inter.css"%}
 {%include "css/ftaurebesh.css"%}
 {%include "css/site.css"%}
+{%include "css/prism-gh.css"%}

site/posts/2025-06-15-replacing-github-pages.md

@@ -77,7 +77,6 @@ In my home directory I defined two hook scripts:
 
 `~/webhooks/update-pages.sh`
 ```bash
-
 #!/bin/bash
 # parameter 1 is repo name, parameter 2 is clone url
 [[ "$1" == *"/"* ]] && exit 1;