vowel 0.8.0 → 0.8.1

package/config.js

@@ -1,8 +1,8 @@
 import path from "node:path"
-import { readFileSync } from "node:fs"
 import { resolveProjectFolder } from "votive"
 import { systemDirectoryFor } from "./systemPaths.js"
 import { secretRouter } from "./secretPaths.js"
+import { VOWEL_VERSION } from "./version.js"
 import vowelImagesPlugin from "./plugins/images/index.js"
 import vowelStylesPlugin from "./plugins/styles/index.js"
 import vowelReadMarkdownPlugin from "./plugins/markdown/index.js"
@@ -32,13 +32,6 @@ import vowelCheckPlugin from "./plugins/check/index.js"
  * the values), and a hex digest is lowercase already.
  * @param {string} sourcePath
  */
-/**
- * Vowel's part of the cache key (votive's cacheKey.js): a warm start
- * reuses the build cache only if this same version of vowel made it, so
- * an upgrade that changes a bundled stylesheet or how pages render is
- * seen without a `--clear`.
- */
-const VOWEL_VERSION = JSON.parse(readFileSync(new URL("./package.json", import.meta.url), "utf8")).version
 
 function vowelRouter(sourcePath) {
   return secretRouter(sourcePath).toLowerCase()
@@ -116,6 +109,10 @@ function createConfig(sourceFolder = ".", overrides = {}) {
     databasePath: path.join(systemDirectory, ".votive.db"),
     cacheDirectory: path.join(systemDirectory, ".cache"),
     plugins: [...defaultPlugins, ...(extraPlugins ?? [])],
+    // Vowel's part of the cache key (votive's cacheKey.js): a warm start
+    // reuses the build cache only if this same version of vowel made it,
+    // so an upgrade that changes a bundled stylesheet or how pages
+    // render is seen without a `--clear`.
     cacheKey: `vowel@${VOWEL_VERSION}`,
     ...rest
   }

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "vowel",
   "type": "module",
-  "version": "0.8.0",
+  "version": "0.8.1",
   "engines": {
     "node": ">=26"
   },
@@ -81,6 +81,7 @@
     "secretPaths.js",
     "systemPaths.js",
     "utils.js",
+    "version.js",
     "plugins",
     "skills",
     "stylesheets",

package/plugins/atproto/body.js

@@ -6,6 +6,7 @@ import { gfmTaskListItemToMarkdown } from "mdast-util-gfm-task-list-item"
 import { toText } from "hast-util-to-text"
 import { emojiFor } from "../markdown/emoji.js"
 import { alertLabel } from "../html/editor/directives.js"
+import { fenceWithTitle } from "../markdown/codeFence.js"
 
 /**
  * A page's body as a record carries it, from the rendered
@@ -185,10 +186,13 @@ function block(node, base) {
   if (tag === "picture") return [paragraph([node], base)]
   if (tag === "aside" && hasClass(node, "alert")) return [alert(node, base)]
   if (tag === "blockquote") return [{ type: "blockquote", children: blocks(node.children ?? [], base) }]
-  if (tag === "pre") {
-    const code = (node.children ?? []).find(child => is(child, "code")) ?? node
-    const language = classes(code).find(name => name.startsWith("language-"))?.slice("language-".length)
-    return [{ type: "code", lang: language ?? null, value: toText(code).replace(/\n$/, "") }]
+  if (tag === "pre") return [codeBlock(node)]
+  if (tag === "figure") {
+    const [caption, pre, ...rest] = (node.children ?? []).filter(child => child.type === "element")
+    if (is(caption, "figcaption") && is(pre, "pre") && !rest.length) {
+      const code = codeBlock(pre)
+      return [{ ...code, ...fenceWithTitle(code.lang, toText(caption).trim()) }]
+    }
   }
   if (tag === "ul" || tag === "ol") return [list(node, base)]
   if (tag === "table") return [table(node, base)]
@@ -196,6 +200,18 @@ function block(node, base) {
   return blocks(node.children ?? [], base)
 }
 
+/**
+ * A `<pre>` as a fenced block, in the language its `<code>` is marked
+ * with. A titled block is a `<figure>` with the title as its caption
+ * (markdown/index.js), and the title goes back into the fence.
+ * @param {any} node
+ */
+function codeBlock(node) {
+  const code = (node.children ?? []).find(child => is(child, "code")) ?? node
+  const language = classes(code).find(name => name.startsWith("language-"))?.slice("language-".length)
+  return { type: "code", lang: language ?? null, meta: null, value: toText(code).replace(/\n$/, "") }
+}
+
 /**
  * An alert, `<aside class="alert note">` with its heading first, back in
  * GFM's form: `> [!NOTE]`, then the text on the next line. A heading the

package/plugins/html/bundle/index.js

@@ -19690,7 +19690,7 @@ ${fallback_html}`;
 	delegate(['click']);
 
 	const rampSettings = [
-	  { key: "heading-size", variable: "--fontsize-delta", label: "Heading size", hint: "How much larger h1 is than body text", unit: "x", min: 0.25, max: 4, step: 0.05, default: 2 },
+	  { key: "heading-size", variable: "--fontsize-scale", label: "Heading size", hint: "How much larger h1 is than body text, as a multiple of it", unit: "", min: 0.25, max: 4, step: 0.05, default: 1.5 },
 	  { key: "heading-size-decay", variable: "--fontsize-decay", label: "Size decay", hint: "Higher makes subheadings smaller", unit: "", min: 0.5, max: 6, step: 0.1, default: 3 },
 	  { key: "h1-letter-spacing", variable: "--letterspacing-h1", label: "h1 letter spacing", unit: "ch", min: -0.1, max: 0.1, step: 0.005, default: -0.01 },
 	  { key: "h6-letter-spacing", variable: "--letterspacing-h6", label: "h6 letter spacing", unit: "ch", min: -0.1, max: 0.1, step: 0.005, default: 0 },
@@ -19705,7 +19705,6 @@ ${fallback_html}`;
 	function rampValue(setting, value) {
 	  const clamped = Math.min(setting.max, Math.max(setting.min, value));
 	  const number = String(Number(clamped.toFixed(4)));
-	  if (setting.unit === "x") return `calc(${number} * var(--fontsize-root))`
 	  return `${number}${setting.unit}`
 	}
 	function typographyVariables(theme) {
@@ -20080,6 +20079,9 @@ ${fallback_html}`;
 	    const params = globParams(classes);
 	    return params && globDirective(params)
 	  }
+	  if (element.tagName === "A" && element.children.length === 1 && classList(element.firstElementChild).includes("reference")) {
+	    return element.getAttribute("href")
+	  }
 	  if (element.tagName === "ARTICLE" && classes.includes("reference")) {
 	    const link = element.querySelector("a[href]");
 	    return link && link.getAttribute("href")

package/plugins/html/bundle/live-reload.js

@@ -0,0 +1,153 @@
+(function () {
+  'use strict';
+
+  const empty = { path: null, markdown: null, settings: { path: "settings.md", markdown: null }, editor: false };
+  let current = null;
+  function seed() {
+    if (current) return current
+    const element = document.getElementById("vowel-source");
+    try {
+      current = element ? { ...empty, ...JSON.parse(element.textContent) } : { ...empty };
+    } catch {
+      current = { ...empty };
+    }
+    return current
+  }
+  function updateFromTarget(target) {
+    const source = seed();
+    if (typeof target.source === "string") source.path = target.source;
+    if (typeof target.metadata?.markdown === "string") source.markdown = target.metadata.markdown;
+  }
+
+  function openSocket() {
+    console.info("Socket opened");
+    const socket = new WebSocket(`ws://${window.location.host}`);
+    socket.addEventListener('open', () => {
+      socket.send('opened');
+    });
+    socket.addEventListener("close", () => {
+      console.info("Socket closed");
+      socket.close();
+      setTimeout(() => {
+        console.info("socket closed refresh");
+        location.reload();
+      }, 1000);
+    });
+    function isOpen() {
+      return socket.readyState === 1
+    }
+    socket.addEventListener('message', e => {
+      if (!isOpen()) return
+      const target = JSON.parse(e.data);
+      if (target.extension !== ".html") {
+        retryImages("/" + target.path);
+        return
+      }
+      const regex = new RegExp(window.location.pathname + "(index)?(\\.html)");
+      if (!("/" + target.path).match(regex)) return
+      updateFromTarget(target);
+      if (!target.data) {
+        location.reload();
+        return
+      }
+      const next = new DOMParser().parseFromString(target.data, "text/html");
+      patchHead(document.head, next.head);
+      patchBody(document.body, next.body);
+    });
+  }
+  function patchHead(head, nextHead) {
+    const nextTitle = nextHead.querySelector("title");
+    if (nextTitle && document.title !== nextTitle.textContent) document.title = nextTitle.textContent;
+    const isTitle = element => element.tagName === "TITLE";
+    const remaining = new Map();
+    for (const element of head.children) {
+      if (isTitle(element)) continue
+      const key = element.outerHTML;
+      if (!remaining.has(key)) remaining.set(key, []);
+      remaining.get(key).push(element);
+    }
+    const keep = new Set();
+    const pending = [];
+    const place = (clone, before) => {
+      before ? head.insertBefore(clone, before) : head.appendChild(clone);
+      keep.add(clone);
+    };
+    for (const element of nextHead.children) {
+      if (isTitle(element)) continue
+      const matches = remaining.get(element.outerHTML);
+      const existing = matches && matches.shift();
+      if (existing) {
+        pending.forEach(clone => place(clone, existing));
+        pending.length = 0;
+        keep.add(existing);
+        continue
+      }
+      pending.push(document.importNode(element, true));
+    }
+    pending.forEach(clone => place(clone, null));
+    for (const element of [...head.children]) {
+      if (isTitle(element) || keep.has(element)) continue
+      element.remove();
+    }
+  }
+  function patchBody(body, nextBody) {
+    const editing = document.documentElement.dataset.vowelEditing === "true";
+    const keyOf = element => element.id ? `${element.tagName}#${element.id}` : element.tagName;
+    const incoming = [...nextBody.children].filter(wasProduced);
+    const produced = new Set(incoming.map(keyOf));
+    const current = new Map();
+    for (const element of body.children) {
+      if (!wasProduced(element)) continue
+      const key = keyOf(element);
+      if (produced.has(key) && !current.has(key)) current.set(key, element);
+    }
+    const placed = new Set();
+    let cursor = null;
+    for (const element of incoming) {
+      const key = keyOf(element);
+      const existing = current.get(key);
+      if (existing && editing && existing.tagName === "MAIN") {
+        placed.add(existing);
+        cursor = existing;
+        continue
+      }
+      const fresh = document.importNode(element, true);
+      if (existing) {
+        existing.replaceWith(fresh);
+      } else if (cursor) {
+        cursor.after(fresh);
+      } else {
+        body.prepend(fresh);
+      }
+      placed.add(fresh);
+      cursor = fresh;
+    }
+    for (const [, element] of current) {
+      if (!placed.has(element) && element.isConnected) element.remove();
+    }
+    for (const element of [...body.children]) {
+      if (!produced.has(keyOf(element)) && wasProduced(element)) element.remove();
+    }
+  }
+  function retryImages(url) {
+    const failed = [...document.images].filter(img => img.complete && img.naturalWidth === 0);
+    const elements = failed.map(img => img.parentElement?.tagName === "PICTURE" ? img.parentElement : img);
+    const naming = elements.filter(element => urlsOf(element).includes(url));
+    for (const element of naming) element.replaceWith(element.cloneNode(true));
+  }
+  function urlsOf(element) {
+    const nodes = [element, ...element.querySelectorAll("source, img")];
+    return nodes.flatMap(node => {
+      const candidates = (node.getAttribute("srcset") ?? "").split(",").map(candidate => candidate.trim().split(/\s+/)[0]);
+      return [node.getAttribute("src"), ...candidates].filter(Boolean)
+    })
+  }
+  function wasProduced(element) {
+    if (element.tagName === "SCRIPT") return false
+    if (element.hasAttribute("data-vowel-client")) return false
+    return ["HEADER", "MAIN", "ASIDE", "FOOTER", "NAV"].includes(element.tagName) || Boolean(element.id)
+  }
+
+  openSocket();
+
+})();

package/plugins/html/editor/ingest.js

@@ -62,6 +62,13 @@ function expansionDirective(element) {
     return params && globDirective(params)
   }
 
+  // A reference card is `<a href><article class=reference>` as the
+  // build writes it (writeRules.js), or the older article around its
+  // link.
+  if (element.tagName === "A" && element.children.length === 1 && classList(element.firstElementChild).includes("reference")) {
+    return element.getAttribute("href")
+  }
+
   if (element.tagName === "ARTICLE" && classes.includes("reference")) {
     const link = element.querySelector("a[href]")
     return link && link.getAttribute("href")

package/plugins/html/editor/live-reload.js

@@ -0,0 +1,8 @@
+import openSocket from "./socket.js"
+
+// The live-reload client alone, for every previewed page. The editor's
+// bundle (main.js, which opens the same socket) replaces it only when
+// the dev server was started with `vowel --editor`: without the flag a
+// page carried Svelte, Svedit and the editor, 730 KB inline, to run
+// this one call.
+openSocket()

package/plugins/html/editor/rollup.config.js

@@ -3,14 +3,24 @@ import resolve from "@rollup/plugin-node-resolve"
 import css from "rollup-plugin-import-css"
 import cleanup from "rollup-plugin-cleanup"
 
-// Compiles the Svedit editor into a single inlineable bundle,
-// committed at ../bundle/index.js -
-// vowel/plugins/html/index.js reads that file's contents once at plugin
-// load time and injects it into every previewed page's
-// handlePreviewRequest, the same way it already inlines votive's
-// openSocket() reload client. Rebuild with `npm run build:editor` from
-// vowel's root after editing anything in this folder.
-export default {
+// Two inlineable bundles, both committed in ../bundle/:
+// live-reload.js, the live-reload client alone, which every previewed
+// page gets, and index.js, the Svedit editor with the same client in
+// it, which replaces it under `vowel --editor`.
+// vowel/plugins/html/index.js reads them and injects one into each
+// previewed page in handlePreviewRequest. Rebuild with
+// `npm run build:editor` from vowel's root after editing anything in
+// this folder.
+const liveReload = {
+  input: "live-reload.js",
+  output: {
+    file: "../bundle/live-reload.js",
+    format: "iife"
+  },
+  plugins: [cleanup()]
+}
+
+const editor = {
   input: "main.js",
   output: {
     file: "../bundle/index.js",
@@ -33,3 +43,5 @@ export default {
     cleanup()
   ]
 }
+
+export default [liveReload, editor]

package/plugins/html/externalLinks.js

@@ -0,0 +1,40 @@
+/**
+ * A link to another site opens in a new tab (per Sam, Nov 7) and says
+ * it leaves: `rel=external`, the HTML link type for exactly that, and
+ * the CSS hook (`a[rel~=external]`). `noopener noreferrer` as link
+ * previews already had: the new page can't reach this one through
+ * `window.opener`, and isn't told where the visitor came from.
+ *
+ * Another site is an http(s) url whose host isn't the site's own
+ * `domain`, `www.` or not. A path, an anchor, `mailto:` and the like are
+ * not links to another site.
+ */
+
+const EXTERNAL_REL = ["external", "noopener", "noreferrer"]
+
+/** @param {string} host */
+const bareHost = (host) => host.toLowerCase().replace(/^www\./, "")
+
+/**
+ * @param {unknown} href
+ * @param {unknown} domain - the site's `domain` setting, if any
+ */
+export function isExternalURL(href, domain) {
+  if (typeof href !== "string" || !/^(https?:)?\/\//i.test(href)) return false
+  const url = URL.parse(href, "https://placeholder.invalid")
+  if (!url) return false
+  if (typeof domain !== "string" || !domain) return true
+  const own = URL.parse(/^[a-z]+:\/\//i.test(domain) ? domain : `https://${domain}`)
+  return !own || bareHost(url.hostname) !== bareHost(own.hostname)
+}
+
+/**
+ * An `<a>`'s properties with the new tab and the rel tokens added, any
+ * rel it had kept first (`me`, on a social link).
+ * @param {Record<string, any>} properties
+ */
+export function externalProperties(properties) {
+  const had = [properties.rel ?? []].flat().flatMap(value => String(value).split(/\s+/)).filter(Boolean)
+  const rel = [...new Set([...had, ...EXTERNAL_REL])]
+  return { ...properties, target: "_blank", rel }
+}

package/plugins/html/headingIds.js

@@ -0,0 +1,35 @@
+/**
+ * A heading's id is `heading_` and its slug: `## Kerning` is
+ * `#heading_kerning` (per Sam, Nov 7). Unprefixed, a heading called
+ * "Content", "Logo" or "Backlinks" took the id of one of the page's own
+ * elements (`section#content`, `img#logo`, `#backlinks`). `_` because
+ * what follows is the author's, as in `fm_date`.
+ *
+ * A link written in a page, `[x](#kerning)` or `./post.md#kerning`,
+ * follows: its anchor is a heading's unless it names one of the ids a
+ * page has besides its headings, which an author can't add to (raw
+ * HTML isn't rendered): Vowel's own, and GFM's footnotes'.
+ */
+
+export const HEADING_ID_PREFIX = "heading_"
+
+const PAGE_IDS = new Set(["content", "backlinks", "logo", "wordmark", "title", "copyright", "shoutout", "footnote-label", "vowel-source"])
+
+/**
+ * The anchor an author wrote, as the id it means.
+ * @param {string} fragment - without the `#`
+ */
+export function headingAnchor(fragment) {
+  if (!fragment || PAGE_IDS.has(fragment) || fragment.startsWith("user-content-") || fragment.startsWith(HEADING_ID_PREFIX)) return fragment
+  return HEADING_ID_PREFIX + fragment
+}
+
+/**
+ * A url's `#anchor`, if it has one, as `headingAnchor` reads it.
+ * @param {string} suffix - `?query#anchor`, `#anchor`, or ""
+ */
+export function withHeadingAnchor(suffix) {
+  const at = suffix.indexOf("#")
+  if (at === -1) return suffix
+  return suffix.slice(0, at + 1) + headingAnchor(suffix.slice(at + 1))
+}

package/plugins/html/index.js

@@ -26,7 +26,10 @@ import { pageRecordURI } from "../atproto/record.js"
 import { STATUSES } from "../markdown/frontmatter.js"
 import { themeStylesheets, isVowelStylesheet } from "../styles/theme.js"
 import { displayPath } from "../../secretPaths.js"
+import { VOWEL_VERSION } from "../../version.js"
 import { socialLinksNav } from "./socialLinks.js"
+import { isExternalURL, externalProperties } from "./externalLinks.js"
+import { HEADING_ID_PREFIX } from "./headingIds.js"
 import { writeWalk } from "./writeRules.js"
 import { ASIDE_PARTIAL, navPartialPath, backlinksPartialPath, createPartialStubs, expandPartial, withCurrent, partialsProcessor } from "./partials.js"
 
@@ -35,10 +38,13 @@ import { ASIDE_PARTIAL, navPartialPath, backlinksPartialPath, createPartialStubs
 
 const VOWEL_DIR = path.normalize(path.join(import.meta.dirname, "../../"))
 
-// Compiled from ./editor/main.js via rollup.config.js (`npm run
-// build:editor` from vowel's root) - the Svedit editor and reload client
-// for previewed pages, read once here and inlined into every previewed
-// page. See tasks/desktop-app-architecture.md, Part 3.
+// Compiled from ./editor via rollup.config.js (`npm run build:editor`
+// from vowel's root), read once here and inlined into previewed pages:
+// the live-reload client alone (live-reload.js, 6 KB) on every one, or
+// under `vowel --editor` the Svedit editor, which carries the same
+// client (main.js, 730 KB). See tasks/desktop-app-architecture.md,
+// Part 3.
+const liveReloadScript = readFileSync(path.join(import.meta.dirname, "bundle/live-reload.js"), "utf-8")
 const editorClientScript = readFileSync(path.join(import.meta.dirname, "bundle/index.js"), "utf-8")
 
 /**
@@ -501,6 +507,11 @@ function writeFile(target, { settings, api, config }) {
       name: "viewport",
       content: "width=device-width, initial-scale=1.0"
     }),
+    // What made the page, as WordPress and Hugo say it: name and version.
+    h("meta", {
+      name: "generator",
+      content: `Vowel ${VOWEL_VERSION}`
+    }),
     h("meta", {
       "http-equiv": "X-UA-Compatible",
       content: "ie-edge"
@@ -680,8 +691,10 @@ function writeFile(target, { settings, api, config }) {
   ])
 
 
+  // Every heading's id is prefixed (headingIds.js), so none can be the
+  // page's own: a heading called "Content" was section#content's.
   const slugger = unified()
-    .use(slug)
+    .use(slug, { prefix: HEADING_ID_PREFIX })
     .use(toc, {
       // No class per level, item and link: the nesting is the <ol>
       // structure, and `nav[aria-label=Contents]` is the hook. An empty
@@ -750,7 +763,7 @@ function writeFile(target, { settings, api, config }) {
   // The aside tree is one partial, the same on every page. Without a
   // nav worth rendering there is no aside at all.
   const asidePartial = api.target(ASIDE_PARTIAL)
-  const asideNav = navWithChoices(asidePartial ? asidePartial.metadata.hast : null)
+  const asideNav = navWithChoices(asidePartial ? withCurrent(asidePartial.metadata.hast, metadata.prettyURL) : null)
   const treeAside = asideNav ? h("aside", asideNav) : null
 
   const treeFooter = h('footer', [
@@ -758,9 +771,9 @@ function writeFile(target, { settings, api, config }) {
     h('section#copyright', `© ${new Date().getFullYear()}`),
     h('section#shoutout', [
       "Made with ",
-      h('a', {
-        href: "https://vowel.cc"
-      }, "Vowel"),
+      h('a', isExternalURL("https://vowel.cc", settings.lastNonNull("fm_domain"))
+        ? externalProperties({ href: "https://vowel.cc" })
+        : { href: "https://vowel.cc" }, "Vowel"),
     ])
   ])
 
@@ -829,7 +842,7 @@ function makeTable(classes, properties, targets, api) {
 
   // In a <figure>, like a markdown table (markdown/index.js). The
   // directive's parameters stay on the <table>, where the editor reads them.
-  return h("figure", h("table", { class: classes }, [
+  return h("figure.table", h("table", { class: classes }, [
     h("thead", h("tr", properties.map(name => h("th", name)))),
     h("tbody", targets.map(target => h("tr", properties.map(name => cell(target, name)))))
   ]))
@@ -859,10 +872,9 @@ function previewSource(target, settings, config) {
     path: target?.source ?? null,
     markdown: target?.metadata?.markdown ?? null,
     settings: { path: "settings.md", markdown: rootSettings?.at(-1) ?? null },
-    // The in-page editor is not part of 1.0: it mounts only when the
-    // dev server was started with `vowel --editor` (config.editor).
-    // The client bundle is injected regardless, because it is also
-    // the live-reload client.
+    // The in-page editor is not part of 1.0: its bundle, and this, are
+    // in the page only when the dev server was started with
+    // `vowel --editor` (config.editor).
     editor: config?.editor === true
   }
 }
@@ -870,6 +882,10 @@ function previewSource(target, settings, config) {
 function handlePreviewRequest(body, { target, settings, config } = {}) {
   const html = body.toString("utf-8")
   const fileSplit = html.split("</body>")
+  if (config?.editor !== true) {
+    fileSplit.splice(1, 0, `<script type="module">${liveReloadScript}</script>`)
+    return fileSplit.join("")
+  }
   // "<" escaped so a "</script>" inside the markdown cannot end the tag.
   const source = JSON.stringify(previewSource(target, settings, config)).replaceAll("<", "\\u003c")
   fileSplit.splice(1, 0, `<script type="application/json" id="vowel-source">${source}</script><script type="module">${editorClientScript}</script>`)

package/plugins/html/markdownGrammar.js

@@ -41,10 +41,13 @@ export function extendMarkdown(refractor) {
   markdown["front-matter-block"].lookbehind = false
 
   // Three or more backticks or tildes, closed by the same character at
-  // least as many times. The parts stay in the order Prism's
-  // after-tokenize hook expects (fence, language, newline, block,
-  // newline, fence): it reads the language from them, and highlights
-  // the block in it.
+  // least as many times. Prism's after-tokenize hook reads the language
+  // from the parts and highlights the block in it, and it finds them by
+  // position: the language second, the block fourth. So the language is
+  // the first word only, never a quoted title (codeFence.js), and the
+  // rest of the line, a title and its newline, is one token in third
+  // place, where the newline would be: fence, language, meta, block,
+  // newline, fence.
   markdown.code[1] = {
     pattern: /^(([`~])\2{2,})[^\r\n]*(?:\r\n?|\n)(?:[\s\S]*?(?:\r\n?|\n))??\1\2*[ \t]*$/m,
     greedy: true,
@@ -54,10 +57,14 @@ export function extendMarkdown(refractor) {
         lookbehind: true
       },
       "code-language": {
-        pattern: /^(`{3,}|~{3,})[^\s`~][^\r\n]*/,
+        pattern: /^(`{3,}|~{3,})[^\s`~"'][^\s]*/,
         lookbehind: true
       },
-      punctuation: /`{3,}|~{3,}/
+      punctuation: /`{3,}|~{3,}/,
+      "code-meta": {
+        pattern: /^[ \t]*[^\s][^\r\n]*(?:\r\n?|\n)$/,
+        inside: { string: /"[^"]*"|'[^']*'/ }
+      }
     }
   }