inline code syntax highlighting: marpit custom engine + css

marp.config.js

@@ -0,0 +1,21 @@
+const { Marp } = require('@marp-team/marp-core');
+const hljs = require('highlight.js');
+
+module.exports = {
+  engine: (opts) => {
+    const marp = new Marp(opts);
+    const md = marp.markdown;
+    const defaultInline = md.renderer.rules.code_inline
+      || ((tokens, idx, options, env, self) => `<code>${md.utils.escapeHtml(tokens[idx].content)}</code>`);
+    md.renderer.rules.code_inline = (tokens, idx, options, env, self) => {
+      const content = tokens[idx].content;
+      try {
+        const highlighted = hljs.highlight(content, { language: 'html', ignoreIllegals: true }).value;
+        return `<code class="hljs language-html">${highlighted}</code>`;
+      } catch (e) {
+        return defaultInline(tokens, idx, options, env, self);
+      }
+    };
+    return marp;
+  }
+};

package.json

@@ -13,11 +13,18 @@
     "deploy": "make deploy",
     "test": "echo \"No tests specified\" && exit 0"
   },
-  "keywords": ["marp", "slides", "hdm", "lectures"],
+  "keywords": [
+    "marp",
+    "slides",
+    "hdm",
+    "lectures"
+  ],
   "author": "Michael Czechowski <mail@librete.ch>",
   "license": "CC-BY-SA-4.0",
   "type": "commonjs",
   "devDependencies": {
-    "@marp-team/marp-cli": "^4.2.3"
+    "@marp-team/marp-cli": "^4.2.3",
+    "@marp-team/marp-core": "^4.3.0",
+    "highlight.js": "^11.11.1"
   }
 }

scripts/dev-server.sh

@@ -41,4 +41,4 @@ echo -e "  ${BLUE}http://localhost:$DEV_PORT${NC}"
 echo -e "  ${BLUE}$SERVE_DIR/${NC}"
 echo ""
 
-PORT=$DEV_PORT exec npx @marp-team/marp-cli --server "$SERVE_DIR/"
+PORT=$DEV_PORT exec npx @marp-team/marp-cli -c marp.config.js --server "$SERVE_DIR/"

slides/223015c/01-geschichte-grundlagen-html.md

@@ -40,11 +40,13 @@ pre code {
   color: inherit;
 }
 code {
-  background: #1a1a2e;
-  color: #d63384;
+  background: #0f0f23;
   padding: 0.15em 0.4em;
   border-radius: 4px;
+  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
 }
+section code:not(.hljs) { color: #d63384 !important; }
+section code.hljs { color: #f8f8f8 !important; }
 a {
   color: var(--color-highlight);
 }
@@ -1281,8 +1283,7 @@ Steuert die Vorschau beim Teilen auf Mastodon, LinkedIn, Signal, MS Teams, Slack
 ![bg right:35%](./assets/demos/input-date.png)
 
 ```html
-<label>Geburtsdatum</label>
-<input type="date" />
+Geburtsdatum <input type="date" />
 ```
 
 | Teil | Bezeichnung |