poops 1.9.7 → 1.9.8

package/README.md

@@ -1023,6 +1023,20 @@ The language argument is optional. If omitted, highlight.js will attempt to auto
 
 Registered languages: `javascript`/`js`, `typescript`/`ts`, `css`, `scss`, `html`, `xml`, `json`, `bash`/`sh`, `shell`, `python`/`py`, `ruby`/`rb`, `php`, `java`, `c`, `cpp`, `csharp`/`cs`, `go`, `rust`/`rs`, `yaml`/`yml`, `markdown`/`md`, `sql`, `diff`.
 
+**Fence info strings.** Only the first word names the language. Anything after it is carried onto the `<code>` element instead of being dropped: a bare word becomes a class, a `key=value` token becomes a `data-` attribute. This is how a fence marks itself for a later stage — a post-`markup` `exec` script that turns `code.preview` blocks into live demos, for example — without a marker comment in the markdown.
+
+````md
+```html preview tab=options widths=375,768
+<my-element></my-element>
+```
+````
+
+```html
+<pre><code class="hljs language-html preview" data-tab="options" data-widths="375,768">…</code></pre>
+```
+
+Values are single tokens — no quotes, no spaces. A trailing `=` with nothing after it emits a valueless attribute (`expanded=` → `data-expanded=""`), for a flag you want to read with `hasAttribute` rather than as a class. The same applies to the `{% highlight %}` tag and the `highlight` filter.
+
 #### Custom Filters
 
 All filters are available in both engines. The only syntax difference is how arguments are passed: Nunjucks uses parentheses `| filter("arg")`, Liquid uses a colon `| filter: "arg"`.

package/lib/markup/engines/liquid.js

@@ -1,7 +1,7 @@
 import fs from 'node:fs'
 import path from 'node:path'
 import { Liquid } from 'liquidjs'
-import { highlightCode } from '../highlight.js'
+import { highlightCode, codeBlock } from '../highlight.js'
 import { marked, renderMarkdownCached } from '../renderer.js'
 import { discoverImageVariants, parseFrontMatter, groupby, buildImageTag, buildPaginationTag, renderToc, buildJsonLd, buildOpenGraph, buildCanonical, buildBreadcrumb } from '../helpers.js'
 import { getImageExif, listImages } from '../image-cache.js'
@@ -131,11 +131,7 @@ export default class LiquidEngine {
     engine.registerFilter('canonical', (page, site) => buildCanonical(page, site))
     engine.registerFilter('breadcrumb', (page, site, prefix) => buildBreadcrumb(page, site, prefix))
     engine.registerFilter('groupby', (arr, key, datePart) => groupby(arr, key, datePart))
-    engine.registerFilter('highlight', (code, lang) => {
-      const highlighted = highlightCode(code, lang)
-      const langClass = lang ? ` language-${lang}` : ''
-      return `<pre><code class="hljs${langClass}">${highlighted}</code></pre>`
-    })
+    engine.registerFilter('highlight', (code, lang) => codeBlock(highlightCode(code, lang), lang))
   }
 
   registerTags(getOutputDir) {
@@ -347,10 +343,7 @@ function registerHighlightTag(engine) {
     },
     * render(ctx) {
       const code = yield this.liquid.renderer.renderTemplates(this.templates, ctx)
-      const lang = this.lang
-      const highlighted = highlightCode(code, lang)
-      const langClass = lang ? ` language-${lang}` : ''
-      return `<pre><code class="hljs${langClass}">${highlighted}</code></pre>`
+      return codeBlock(highlightCode(code, this.lang), this.lang)
     }
   })
 }

package/lib/markup/engines/nunjucks.js

@@ -6,7 +6,7 @@ import path from 'node:path'
 import { discoverImageVariants, parseFrontMatter, groupby, buildImageTag, buildPaginationTag, renderToc, buildJsonLd, buildOpenGraph, buildCanonical, buildBreadcrumb } from '../helpers.js'
 import { getImageExif, listImages } from '../image-cache.js'
 import { toPosix } from '../../utils/helpers.js'
-import { highlightCode } from '../highlight.js'
+import { highlightCode, codeBlock } from '../highlight.js'
 import { marked, renderMarkdownCached } from '../renderer.js'
 import { slugify, humanize } from 'book-of-spells'
 import dayjs from 'dayjs'
@@ -197,11 +197,7 @@ export default class NunjucksEngine {
     env.addFilter('canonical', (page, site) => new nunjucks.runtime.SafeString(buildCanonical(page, site)))
     env.addFilter('breadcrumb', (page, site, prefix) => new nunjucks.runtime.SafeString(buildBreadcrumb(page, site, prefix)))
     env.addFilter('groupby', (arr, key, datePart) => groupby(arr, key, datePart))
-    env.addFilter('highlight', (code, lang) => {
-      const highlighted = highlightCode(code, lang)
-      const langClass = lang ? ` language-${lang}` : ''
-      return new nunjucks.runtime.SafeString(`<pre><code class="hljs${langClass}">${highlighted}</code></pre>`)
-    })
+    env.addFilter('highlight', (code, lang) => new nunjucks.runtime.SafeString(codeBlock(highlightCode(code, lang), lang)))
   }
 
   registerTags(getOutputDir) {
@@ -335,12 +331,7 @@ export class HighlightExtension {
   }
 
   run(context, lang, body) {
-    const code = body()
-    const highlighted = highlightCode(code, lang)
-    const langClass = lang ? ` language-${lang}` : ''
-    return new nunjucks.runtime.SafeString(
-      `<pre><code class="hljs${langClass}">${highlighted}</code></pre>`
-    )
+    return new nunjucks.runtime.SafeString(codeBlock(highlightCode(body(), lang), lang))
   }
 }
 

package/lib/markup/highlight.js

@@ -58,20 +58,53 @@ function escapeHtml(str) {
   return str.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/"/g, '&quot;')
 }
 
-export function highlightCode(code, language) {
-  if (language) {
-    const lang = language.toLowerCase().trim()
-    if (hljs.getLanguage(lang)) {
-      return hljs.highlight(code, { language: lang }).value
+// A fence's info string is everything after the backticks — the language plus
+// any meta words (```html preview). Only the first word names the language, so
+// the rest has to come off before a hljs lookup or a `language-` class: with it
+// attached, getLanguage misses and the block silently falls to auto-detection.
+export function fenceLang(info) {
+  return String(info || '').trim().split(/\s+/)[0].toLowerCase()
+}
+
+// Everything after the language is the fence's own markup for a later stage:
+// a bare word becomes a class (```html preview → code.preview), `key=value`
+// becomes a data attribute (tab=options → data-tab="options"). Values are
+// single tokens — no quotes, no spaces — which keeps the parser a split and is
+// enough for settings; anything longer belongs in the markdown around the fence.
+export function fenceAttrs(info) {
+  const [lang, ...rest] = String(info || '').trim().split(/\s+/).filter(Boolean)
+  const classes = ['hljs']
+  if (lang) classes.push(`language-${lang.toLowerCase().replace(/[^\w-]/g, '')}`)
+  let data = ''
+  for (const token of rest) {
+    const eq = token.indexOf('=')
+    if (eq < 0) {
+      const name = token.replace(/[^\w-]/g, '')
+      if (name) classes.push(name)
+      continue
     }
+    const key = token.slice(0, eq).replace(/[^\w-]/g, '')
+    if (key) data += ` data-${key}="${escapeHtml(token.slice(eq + 1))}"`
+  }
+  return ` class="${classes.join(' ')}"${data}`
+}
+
+// The one place a highlighted fence becomes html. Every renderer and engine
+// goes through it, so they cannot drift on what a fence produces again.
+export function codeBlock(highlighted, info) {
+  return `<pre><code${fenceAttrs(info)}>${highlighted}</code></pre>`
+}
+
+export function highlightCode(code, language) {
+  const lang = fenceLang(language)
+  if (lang && hljs.getLanguage(lang)) {
+    return hljs.highlight(code, { language: lang }).value
   }
   return hljs.highlightAuto(code).value
 }
 
 export const highlightRenderer = {
   code({ text, lang }) {
-    const highlighted = highlightCode(text, lang)
-    const langClass = lang ? ` language-${escapeHtml(lang)}` : ''
-    return `<pre><code class="hljs${langClass}">${highlighted}</code></pre>\n`
+    return `${codeBlock(highlightCode(text, lang), lang)}\n`
   }
 }

package/lib/markup/renderer.js

@@ -3,7 +3,7 @@ import { markedGithubEmoji } from 'marked-github-emoji'
 import { markedGithubAlerts } from 'marked-github-alerts'
 import { markedGithubFootnote } from 'marked-github-footnote'
 import { slugify } from 'book-of-spells'
-import { highlightRenderer, highlightCode } from './highlight.js'
+import { highlightRenderer, highlightCode, codeBlock } from './highlight.js'
 import { decodeTemplateEntities } from './helpers.js'
 
 const RAW_BLOCK_RE = /\{%-?\s*raw\s*-?%\}([\s\S]*?)\{%-?\s*endraw\s*-?%\}/g
@@ -36,8 +36,7 @@ export const markdownRenderer = {
   // never splits the delimiters, so it needs no special casing.
   code({ text, lang }) {
     const highlighted = mapRawSegments(text, (s) => s && highlightCode(s, lang), (s) => highlightCode(s, lang))
-    const langClass = lang ? ` language-${lang.replace(/[^\w-]/g, '')}` : ''
-    return `<pre><code class="hljs${langClass}">${highlighted}</code></pre>\n`
+    return `${codeBlock(highlighted, lang)}\n`
   },
   // Give every heading a slug id + a permalink anchor. The anchor is empty on
   // purpose — themes reveal a "#" via `.heading-anchor::before`, so a site with

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "poops",
   "description": "Straightforward, no-bullshit bundler for the web.",
-  "version": "1.9.7",
+  "version": "1.9.8",
   "license": "MIT",
   "type": "module",
   "main": "poops.js",