@peaceroad/markdown-it-renderer-fence 0.6.1 → 0.8.0

package/src/fence/render-markup.js

@@ -8,18 +8,23 @@ import {
   commentLineClass,
   emitFenceDecision,
   finalizeFenceTimings,
+  getCommentLineFlags,
   getLogicalLineCount,
   getNowMs,
   normalizeEmphasisRanges,
   orderTokenAttrs,
   preWrapStyle,
   resolveAdvancedLineNumberPlan,
+  resolveLineNotesPlan,
   splitFenceBlockToLines,
+  wrapFencePreWithLineNotes,
 } from './render-shared.js'
 import {
   parsePreCodeWrapper,
 } from '../utils/pre-code-wrapper-parser.js'
 
+const markupPassthroughDisabledFeatures = Object.freeze(['setLineNumber', 'line-number-skip', 'line-number-set', 'setEmphasizeLines', 'lineEndSpanThreshold', 'comment-mark', 'line-notes', 'samp'])
+
 const renderFenceMarkup = (context, md, opt, slf) => {
   const token = context.token
   const lang = context.lang
@@ -33,8 +38,10 @@ const renderFenceMarkup = (context, md, opt, slf) => {
   const wrapEnabled = context.wrapEnabled
   const preWrapValue = context.preWrapValue
   const commentMarkValue = context.commentMarkValue
+  const lineNotes = context.lineNotes
+  const lineNoteIdPrefix = context.lineNoteIdPrefix
 
-  const isSamp = opt._sampReg.test(lang)
+  const isSamp = context.isSamp
   const sourceContent = token.content
   let content = sourceContent
   let commentLines
@@ -76,7 +83,7 @@ const renderFenceMarkup = (context, md, opt, slf) => {
       passthrough: true,
       passthroughReason: 'pre-code-parse-failed',
       hasHighlightPre: false,
-      disabledFeatures: ['setLineNumber', 'setEmphasizeLines', 'lineEndSpanThreshold', 'comment-mark', 'samp'],
+      disabledFeatures: markupPassthroughDisabledFeatures,
     }
     if (timingEnabled) decision.timings = finalizeFenceTimings(timings, fenceStartedAt)
     emitFenceDecision(opt, decision)
@@ -105,7 +112,8 @@ const renderFenceMarkup = (context, md, opt, slf) => {
   if (preAttrs.length) orderTokenAttrs({ attrs: preAttrs }, opt)
   const preAttrsText = preAttrs.length ? slf.renderAttrs({ attrs: preAttrs }) : ''
 
-  const needLineNumber = opt.setLineNumber && startNumber >= 0
+  const useHighlightPre = opt.useHighlightPre && hasHighlightPre
+  const needLineNumber = !useHighlightPre && opt.setLineNumber && startNumber >= 0
   let sourceLogicalLineCount = -1
   let highlightedLogicalLineCount = -1
   const ensureLogicalLineCounts = () => {
@@ -113,7 +121,7 @@ const renderFenceMarkup = (context, md, opt, slf) => {
     if (highlightedLogicalLineCount === -1) highlightedLogicalLineCount = getLogicalLineCount(content)
   }
   let normalizedEmphasis = []
-  if (opt.setEmphasizeLines && emphasizeLines.length > 0) {
+  if (!useHighlightPre && opt.setEmphasizeLines && emphasizeLines.length > 0) {
     ensureLogicalLineCounts()
     normalizedEmphasis = normalizeEmphasisRanges(emphasizeLines, highlightedLogicalLineCount)
   }
@@ -122,25 +130,23 @@ const renderFenceMarkup = (context, md, opt, slf) => {
     ensureLogicalLineCounts()
     lineNumberPlan = resolveAdvancedLineNumberPlan(lineNumberSkipValue, lineNumberSetValue, sourceLogicalLineCount, highlightedLogicalLineCount)
   }
+  let lineNotePlan = null
+  if (!useHighlightPre && lineNotes && lineNotes.length) {
+    ensureLogicalLineCounts()
+    lineNotePlan = resolveLineNotesPlan(lineNotes, sourceLogicalLineCount, highlightedLogicalLineCount, lineNoteIdPrefix)
+  }
   const needEmphasis = normalizedEmphasis.length > 0
   const needEndSpan = opt.lineEndSpanThreshold > 0
-  const useHighlightPre = opt.useHighlightPre && hasHighlightPre
 
   if (!useHighlightPre && commentMarkValue && sourceContent.indexOf(commentMarkValue) !== -1) {
     ensureLogicalLineCounts()
     if (highlightedLogicalLineCount === sourceLogicalLineCount) {
-      const rawLines = sourceContent.split('\n')
-      for (let i = 0; i < rawLines.length; i++) {
-        if (rawLines[i].trimStart().startsWith(commentMarkValue)) {
-          if (!commentLines) commentLines = []
-          commentLines[i] = true
-          needComment = true
-        }
-      }
+      commentLines = getCommentLineFlags(sourceContent, commentMarkValue)
+      needComment = !!commentLines
     }
   }
 
-  if (!useHighlightPre && (needLineNumber || needEmphasis || needEndSpan || needComment)) {
+  if (!useHighlightPre && (needLineNumber || needEmphasis || needEndSpan || needComment || lineNotePlan)) {
     const splitStartedAt = timingEnabled ? getNowMs() : 0
     const nlIndex = content.indexOf('\n')
     const br = nlIndex > 0 && content[nlIndex - 1] === '\r' ? '\r\n' : '\n'
@@ -156,6 +162,7 @@ const renderFenceMarkup = (context, md, opt, slf) => {
       commentLines,
       commentLineClass,
       lineNumberPlan,
+      lineNotePlan,
     )
     if (timingEnabled) addTimingMs(timings, 'lineSplitMs', getNowMs() - splitStartedAt)
   }
@@ -165,11 +172,12 @@ const renderFenceMarkup = (context, md, opt, slf) => {
     renderer: 'markup',
     useHighlightPre,
     hasHighlightPre,
-    disabledFeatures: useHighlightPre ? ['setLineNumber', 'line-number-skip', 'line-number-set', 'setEmphasizeLines', 'lineEndSpanThreshold', 'comment-mark', 'samp'] : [],
+    disabledFeatures: useHighlightPre ? markupPassthroughDisabledFeatures : [],
   }
   if (timingEnabled) decision.timings = finalizeFenceTimings(timings, fenceStartedAt)
   emitFenceDecision(opt, decision)
-  return `<pre${preAttrsText}><${tag}${slf.renderAttrs(token)}>${content}</${tag}></pre>\n`
+  const preHtml = `<pre${preAttrsText}><${tag}${slf.renderAttrs(token)}>${content}</${tag}></pre>`
+  return wrapFencePreWithLineNotes(preHtml, lineNotePlan)
 }
 
 export {

package/src/fence/render-shared.js

@@ -4,20 +4,36 @@ import {
   getInfoAttr,
   getLangFromClassAttr,
 } from '../utils/attr-utils.js'
+import {
+  getTokenLineNotes,
+} from './line-notes.js'
 
 const infoReg = /^([^{\s]*)(?:\s*\{(.*)\})?$/
 const tagReg = /<\/?([A-Za-z][A-Za-z0-9-]*)(?:\s+[^>]*?)?\/?\s*>/g
 const preLineTag = '<span class="pre-line">'
 const preLineNoNumberClass = 'pre-line-no-number'
+const preLineHasEndNoteClass = 'pre-line-has-end-note'
+const preLineContentClass = 'pre-line-content'
 const emphOpenTag = '<span class="pre-lines-emphasis">'
 const commentLineClass = 'pre-line-comment'
+const preWithLineNotesClass = 'pre-wrapper-line-notes'
+const lineNoteLayerClass = 'pre-line-note-layer'
+const lineNoteClass = 'pre-line-note'
 const closeTag = '</span>'
 const closeTagLen = closeTag.length
+const defaultPreLineTags = { open: preLineTag, close: closeTag }
 const preWrapStyle = 'white-space: pre-wrap; overflow-wrap: anywhere;'
 const voidTags = new Set(['area', 'base', 'br', 'col', 'embed', 'hr', 'img', 'input', 'link', 'meta', 'param', 'source', 'track', 'wbr'])
 const nonNegativeIntReg = /^\d+$/
 const positiveIntReg = /^[1-9]\d*$/
 
+const getLineNoteIdPrefix = (token, idx) => {
+  const tokenMap = token && Array.isArray(token.map) ? token.map : null
+  const mapStart = tokenMap && Number.isSafeInteger(tokenMap[0]) ? tokenMap[0] + 1 : 0
+  const tokenIndex = Number.isSafeInteger(idx) ? idx + 1 : 0
+  return `pre-line-note-${mapStart}-${tokenIndex}`
+}
+
 const getLineVisualLengthIgnoringTags = (line, threshold) => {
   let len = 0
   let inTag = false
@@ -87,8 +103,15 @@ const createCommonFenceOptionDefaults = (md) => {
 }
 
 const finalizeCommonFenceOption = (opt) => {
-  opt._sampReg = new RegExp('^(?:samp|' + opt.sampLang.split(',').join('|') + ')$')
+  const sampLangs = ['samp']
+  const extraSampLangs = String(opt.sampLang ?? '').split(',')
+  for (let i = 0; i < extraSampLangs.length; i++) {
+    const lang = extraSampLangs[i].trim()
+    if (lang) sampLangs.push(lang)
+  }
+  opt._sampLangSet = new Set(sampLangs)
   opt._attrOrderIndex = createAttrOrderIndexGetter(opt.attrsOrder || [])
+  opt._attrOrderRankCache = new Map()
   return opt
 }
 
@@ -115,6 +138,15 @@ const parsePositiveLineIndex = (val) => {
   return num
 }
 
+const isTruthyAttrValue = (val) => val !== 'false' && val !== '0'
+
+const escapeHtmlText = (value) => {
+  return String(value ?? '')
+    .replace(/&/g, '&amp;')
+    .replace(/</g, '&lt;')
+    .replace(/>/g, '&gt;')
+}
+
 const getLogicalLineCount = (text) => {
   const str = String(text ?? '')
   if (!str) return 0
@@ -130,6 +162,62 @@ const getLogicalLineCount = (text) => {
   return count
 }
 
+const isLineStartWhitespaceCode = (code) => {
+  return code <= 32 || code === 160 || code === 0xFEFF
+}
+
+const lineStartsWithAfterIndent = (str, start, end, marker) => {
+  let pos = start
+  while (pos < end && isLineStartWhitespaceCode(str.charCodeAt(pos))) pos++
+  return str.startsWith(marker, pos)
+}
+
+const scanLogicalLineBounds = (str, onLine) => {
+  let lineStart = 0
+  let lineIndex = 0
+
+  for (let i = 0; i <= str.length; i++) {
+    const code = i < str.length ? str.charCodeAt(i) : 10
+    if (code !== 10 && code !== 13) continue
+    onLine(lineStart, i, lineIndex)
+    if (code === 13 && i + 1 < str.length && str.charCodeAt(i + 1) === 10) i++
+    lineStart = i + 1
+    lineIndex++
+  }
+}
+
+const getCommentLineFlags = (text, commentMarkValue) => {
+  const str = String(text ?? '')
+  const marker = String(commentMarkValue ?? '')
+  if (!str || !marker) return null
+  const flags = []
+  let hasComment = false
+
+  scanLogicalLineBounds(str, (lineStart, lineEnd, lineIndex) => {
+    if (lineStartsWithAfterIndent(str, lineStart, lineEnd, marker)) {
+      flags[lineIndex] = true
+      hasComment = true
+    }
+  })
+
+  return hasComment ? flags : null
+}
+
+const getCommentLineRanges = (text, commentMarkValue) => {
+  const str = String(text ?? '')
+  const marker = String(commentMarkValue ?? '')
+  if (!str || !marker) return null
+  const ranges = []
+
+  scanLogicalLineBounds(str, (lineStart, lineEnd) => {
+    if (lineEnd > lineStart && lineStartsWithAfterIndent(str, lineStart, lineEnd, marker)) {
+      ranges.push([lineStart, lineEnd])
+    }
+  })
+
+  return ranges.length ? ranges : null
+}
+
 const parseLineRangeList = (attrVal, parseValue) => {
   const str = String(attrVal ?? '')
   if (!str) return []
@@ -155,14 +243,8 @@ const parseLineRangeList = (attrVal, parseValue) => {
   return result
 }
 
-const parsePositiveLineNumber = (val) => {
-  const num = Number(val)
-  if (!Number.isFinite(num) || num <= 0) return null
-  return num
-}
-
 const getEmphasizeLines = (attrVal) => {
-  return parseLineRangeList(attrVal, parsePositiveLineNumber)
+  return parseLineRangeList(attrVal, parsePositiveLineIndex)
 }
 
 const getLineNumberSkipRanges = (attrVal) => {
@@ -254,22 +336,106 @@ const resolveAdvancedLineNumberPlan = (lineNumberSkipValue, lineNumberSetValue,
   return buildAdvancedLineNumberPlan(skipRanges, setEntries, sourceLineCount)
 }
 
-const getPreLineOpenTag = (lineNumberPlan, lineIndex) => {
-  if (!lineNumberPlan) return preLineTag
-  const hidden = !!(lineNumberPlan.hidden && lineNumberPlan.hidden[lineIndex])
-  const setNumber = lineNumberPlan.sets ? lineNumberPlan.sets[lineIndex] : undefined
-  if (!hidden && setNumber == null) return preLineTag
+const createLineNotePlan = (lineNotes, maxLine, idPrefix) => {
+  if (!Array.isArray(lineNotes) || !lineNotes.length || maxLine <= 0) return null
+  const anchors = []
+  const items = []
+  const noteIdPrefix = String(idPrefix || 'pre-line-note')
+  let prevFrom = 0
+  let prevTo = 0
+  let needsSort = false
+  for (let i = 0; i < lineNotes.length; i++) {
+    const note = lineNotes[i]
+    if (!note || !Number.isSafeInteger(note.from) || !Number.isSafeInteger(note.to)) continue
+    let from = note.from
+    let to = note.to
+    if (from > to) {
+      const swap = from
+      from = to
+      to = swap
+    }
+    if (to < 1 || from > maxLine) continue
+    if (from < 1) from = 1
+    if (to > maxLine) to = maxLine
+    if (anchors[from - 1] !== undefined) return null
+    const lineCount = Number.isSafeInteger(note.lineCount) && note.lineCount > 0
+      ? note.lineCount
+      : Math.max(getLogicalLineCount(note.text), 1)
+    const item = {
+      from,
+      to,
+      label: from === to ? String(from) : `${from}-${to}`,
+      html: escapeHtmlText(note.text),
+      anchorName: `--pre-line-note-${from}`,
+      id: `${noteIdPrefix}-${from}`,
+      lineCount,
+      width: note.width || '',
+    }
+    anchors[from - 1] = item
+    items.push(item)
+    if (!needsSort && items.length > 1 && (from < prevFrom || (from === prevFrom && to < prevTo))) {
+      needsSort = true
+    }
+    prevFrom = from
+    prevTo = to
+  }
+  if (!items.length) return null
+
+  if (needsSort) items.sort((a, b) => a.from - b.from || a.to - b.to)
+  let canAnchor = true
+  let previousVisualEnd = 0
+  let overflowLines = 0
+  for (let i = 0; i < items.length; i++) {
+    const item = items[i]
+    const visualEnd = item.from + item.lineCount - 1
+    if (item.from <= previousVisualEnd) canAnchor = false
+    if (visualEnd > maxLine) overflowLines = Math.max(overflowLines, visualEnd - maxLine)
+    previousVisualEnd = visualEnd
+  }
+
+  return {
+    anchors,
+    items,
+    canAnchor,
+    overflowLines,
+  }
+}
+
+const resolveLineNotesPlan = (lineNotes, sourceLineCount, renderedLineCount, idPrefix) => {
+  if (!Array.isArray(lineNotes) || !lineNotes.length) return null
+  if (!Number.isSafeInteger(sourceLineCount) || sourceLineCount <= 0) return null
+  if (sourceLineCount !== renderedLineCount) return null
+  return createLineNotePlan(lineNotes, sourceLineCount, idPrefix)
+}
+
+const buildPreLineTags = (hidden, setNumber, lineNote) => {
+  if (!hidden && setNumber == null && !lineNote) return defaultPreLineTags
   let tag = '<span class="pre-line'
   if (hidden) tag += ' ' + preLineNoNumberClass
+  if (lineNote) tag += ' ' + preLineHasEndNoteClass
   tag += '"'
   if (setNumber != null) tag += ` style="counter-set:pre-line-number ${setNumber};"`
-  return tag + '>'
+  if (lineNote) {
+    tag += ` data-pre-line-note-from="${lineNote.from}"`
+    tag += ` data-pre-line-note-to="${lineNote.to}"`
+  }
+  tag += '>'
+  if (!lineNote) return { open: tag, close: closeTag }
+  const describedByAttr = lineNote.id ? ` aria-describedby="${lineNote.id}"` : ''
+  return {
+    open: `${tag}<span class="${preLineContentClass}" style="anchor-name:${lineNote.anchorName};"${describedByAttr}>`,
+    close: `${closeTag}${closeTag}`,
+  }
 }
 
-const splitFenceBlockToLines = (content, emphasizeLines, needLineNumber, needEmphasis, needEndSpan, threshold, lineEndSpanClass, br, commentLines, commentClass, lineNumberPlan) => {
+const splitFenceBlockToLines = (content, emphasizeLines, needLineNumber, needEmphasis, needEndSpan, threshold, lineEndSpanClass, br, commentLines, commentClass, lineNumberPlan, lineNotePlan) => {
   const lines = content.split(br)
   const max = lines.length
-  const hasDynamicLineNumberPlan = !!lineNumberPlan
+  const lineNumberHidden = lineNumberPlan ? lineNumberPlan.hidden : null
+  const lineNumberSets = lineNumberPlan ? lineNumberPlan.sets : null
+  const lineNoteAnchors = lineNotePlan ? lineNotePlan.anchors : null
+  const hasLineNotes = !!lineNoteAnchors
+  const needLineWrap = needLineNumber || hasLineNotes
   let emIdx = 0
   let emStart = -1
   let emEnd = -1
@@ -286,6 +452,9 @@ const splitFenceBlockToLines = (content, emphasizeLines, needLineNumber, needEmp
     let line = lines[n]
     const notLastLine = n < max - 1
     const doComment = commentLines && commentLines[n]
+    const hidden = !!(lineNumberHidden && lineNumberHidden[n])
+    const setNumber = lineNumberSets ? lineNumberSets[n] : undefined
+    const lineNote = hasLineNotes ? lineNoteAnchors[n] : null
     let hasLt = false
     let hasLtChecked = false
 
@@ -309,7 +478,7 @@ const splitFenceBlockToLines = (content, emphasizeLines, needLineNumber, needEmp
       }
     }
 
-    if (needLineNumber && notLastLine) {
+    if (needLineWrap && notLastLine) {
       if (!hasLtChecked) {
         hasLt = line.indexOf('<') !== -1
         hasLtChecked = true
@@ -339,8 +508,9 @@ const splitFenceBlockToLines = (content, emphasizeLines, needLineNumber, needEmp
       line = `<span class="${commentClass}">` + line + closeTag
     }
 
-    if (needLineNumber && notLastLine) {
-      line = (hasDynamicLineNumberPlan ? getPreLineOpenTag(lineNumberPlan, n) : preLineTag) + line + closeTag
+    if (needLineWrap && notLastLine) {
+      const lineTags = buildPreLineTags(hidden, setNumber, lineNote)
+      line = lineTags.open + line + lineTags.close
     }
 
     if (needEmphasis && emIdx < emphasizeLines.length && emStart === n + 1) {
@@ -359,10 +529,33 @@ const splitFenceBlockToLines = (content, emphasizeLines, needLineNumber, needEmp
   return lines.join(br)
 }
 
+const renderLineNotesLayer = (lineNotePlan) => {
+  const items = lineNotePlan && lineNotePlan.items
+  if (!items || !items.length) return ''
+  let html = `<div class="${lineNoteLayerClass}">`
+  for (let i = 0; i < items.length; i++) {
+    const item = items[i]
+    let style = `position-anchor:${item.anchorName};`
+    if (item.width) style += ` --line-note-width:${item.width};`
+    html += `<div id="${item.id}" class="${lineNoteClass}" role="note" data-pre-line-note-from="${item.from}" data-pre-line-note-to="${item.to}" data-pre-line-note-label="${item.label}" style="${style}">${item.html}</div>`
+  }
+  html += '</div>'
+  return html
+}
+
+const wrapFencePreWithLineNotes = (preHtml, lineNotePlan) => {
+  const items = lineNotePlan && lineNotePlan.items
+  if (!items || !items.length) return preHtml + '\n'
+  let attrs = ` class="${preWithLineNotesClass}"`
+  if (lineNotePlan.canAnchor) attrs += ' data-pre-line-notes-layout="anchor"'
+  if (lineNotePlan.overflowLines > 0) attrs += ` style="--pre-line-note-overflow-lines:${lineNotePlan.overflowLines};"`
+  return `<div${attrs}>${preHtml}${renderLineNotesLayer(lineNotePlan)}</div>\n`
+}
+
 const orderTokenAttrs = (token, opt) => {
   const attrs = token.attrs
   if (!attrs || attrs.length < 2) return
-  const rankCache = new Map()
+  const rankCache = opt._attrOrderRankCache || new Map()
   const getRank = (name) => {
     let rank = rankCache.get(name)
     if (rank === undefined) {
@@ -402,6 +595,9 @@ const prepareFenceRenderContext = (tokens, idx, opt) => {
   let wrapEnabled = false
   let preWrapValue
   let commentMarkValue
+  let tagOverride = ''
+  const lineNotes = getTokenLineNotes(token)
+  const lineNoteIdPrefix = lineNotes && lineNotes.length ? getLineNoteIdPrefix(token, idx) : ''
   const attrNormalizeStartedAt = timingEnabled ? getNowMs() : 0
 
   if (token.attrs) {
@@ -455,6 +651,7 @@ const prepareFenceRenderContext = (tokens, idx, opt) => {
           }
           break
         case 'data-pre-emphasis':
+          if (opt.setEmphasizeLines) emphasizeLines = getEmphasizeLines(val)
           dataPreEmphasisIndex = newAttrs.length
           newAttrs.push(attr)
           break
@@ -491,6 +688,12 @@ const prepareFenceRenderContext = (tokens, idx, opt) => {
             sawCommentMark = true
           }
           break
+        case 'samp':
+          tagOverride = isTruthyAttrValue(val) ? 'samp' : ''
+          break
+        case 'code':
+          tagOverride = isTruthyAttrValue(val) ? 'code' : ''
+          break
         case 'line-number-skip':
         case 'pre-line-number-skip':
           lineNumberSkipValue = val
@@ -557,10 +760,13 @@ const prepareFenceRenderContext = (tokens, idx, opt) => {
   }
 
   if (timingEnabled) addTimingMs(timings, 'attrNormalizeMs', getNowMs() - attrNormalizeStartedAt)
+  if (lineNotes && lineNotes.length) token.attrSet('data-pre-line-notes', 'true')
+  const isSamp = tagOverride ? tagOverride === 'samp' : opt._sampLangSet.has(lang)
 
   return {
     token,
     lang,
+    isSamp,
     startNumber,
     emphasizeLines,
     lineNumberSkipValue,
@@ -568,6 +774,8 @@ const prepareFenceRenderContext = (tokens, idx, opt) => {
     wrapEnabled,
     preWrapValue,
     commentMarkValue,
+    lineNotes,
+    lineNoteIdPrefix,
     timingEnabled,
     timings,
     fenceStartedAt,
@@ -582,6 +790,8 @@ export {
   emitFenceDecision,
   finalizeCommonFenceOption,
   finalizeFenceTimings,
+  getCommentLineFlags,
+  getCommentLineRanges,
   getLogicalLineCount,
   getNowMs,
   getEmphasizeLines,
@@ -590,5 +800,7 @@ export {
   preWrapStyle,
   prepareFenceRenderContext,
   resolveAdvancedLineNumberPlan,
+  resolveLineNotesPlan,
   splitFenceBlockToLines,
+  wrapFencePreWithLineNotes,
 }

package/theme/_shared/rf-core.css

@@ -0,0 +1,164 @@
+/*! Renderer Fence shared base | MIT License */
+
+:root {
+  color-scheme: light dark;
+
+  --rf-code-bg: oklch(99.4% 0 0);
+  --rf-code-fg: oklch(4% 0 0);
+  --rf-code-muted: oklch(42% 0 0);
+  --rf-code-border: oklch(86% 0 0);
+
+  --rf-samp-bg: oklch(18% 0 0);
+  --rf-samp-fg: oklch(95% 0 0);
+  --rf-samp-muted: oklch(76% 0 0);
+  --rf-samp-border: oklch(41% 0 0);
+  --rf-samp-prompt: oklch(78% 0.13 285);
+
+  --rf-accent: oklch(50% 0.18 285);
+  --rf-accent-soft: oklch(94% 0.035 285);
+  --rf-accent-border: oklch(82% 0.08 285);
+
+  --rf-syntax-keyword: oklch(38% 0.255 25);
+  --rf-syntax-string: oklch(34% 0.235 250);
+  --rf-syntax-number: oklch(36% 0.245 260);
+  --rf-syntax-comment: oklch(39% 0.026 255);
+  --rf-syntax-type: oklch(38% 0.235 295);
+  --rf-syntax-title: oklch(39% 0.27 305);
+  --rf-syntax-variable: oklch(37% 0.205 80);
+  --rf-syntax-literal: oklch(36% 0.245 260);
+  --rf-syntax-tag: oklch(34% 0.18 150);
+  --rf-syntax-attribute: oklch(36% 0.23 260);
+  --rf-syntax-punctuation: oklch(12% 0.018 255);
+  --rf-syntax-meta: oklch(12% 0.018 255);
+
+  --rf-samp-syntax-keyword: oklch(78% 0.08 25);
+  --rf-samp-syntax-string: oklch(82% 0.055 250);
+  --rf-samp-syntax-number: oklch(80% 0.07 255);
+  --rf-samp-syntax-comment: oklch(75% 0.01 255);
+  --rf-samp-syntax-type: oklch(81% 0.06 295);
+  --rf-samp-syntax-title: oklch(82% 0.07 305);
+  --rf-samp-syntax-variable: oklch(82% 0.075 90);
+  --rf-samp-syntax-literal: oklch(80% 0.07 255);
+  --rf-samp-syntax-tag: oklch(81% 0.065 150);
+  --rf-samp-syntax-attribute: oklch(80% 0.07 255);
+  --rf-samp-syntax-punctuation: oklch(86% 0.012 255);
+
+  --rf-line-emphasis-bg: color-mix(in oklch, var(--rf-accent-soft) 70%, transparent);
+  --rf-line-number-fg: var(--rf-code-muted);
+  --rf-line-number-rule: color-mix(in oklch, var(--rf-code-border) 85%, transparent);
+  --rf-line-comment-bg: color-mix(in oklch, var(--rf-syntax-comment) 12%, transparent);
+  --rf-line-note-bg: oklch(100% 0 0);
+  --rf-line-note-border: var(--rf-accent-border);
+  --rf-line-note-fg: var(--rf-code-muted);
+}
+
+@media (prefers-color-scheme: dark) {
+  :root {
+    --rf-code-bg: oklch(18% 0 0);
+    --rf-code-fg: oklch(95% 0 0);
+    --rf-code-muted: oklch(76% 0 0);
+    --rf-code-border: oklch(38% 0 0);
+
+    --rf-samp-bg: oklch(99.4% 0 0);
+    --rf-samp-fg: oklch(4% 0 0);
+    --rf-samp-muted: oklch(42% 0 0);
+    --rf-samp-border: oklch(86% 0 0);
+    --rf-samp-prompt: oklch(50% 0.18 285);
+
+    --rf-accent: oklch(78% 0.13 285);
+    --rf-accent-soft: oklch(27% 0.05 285);
+    --rf-accent-border: oklch(48% 0.11 285);
+
+    --rf-syntax-keyword: oklch(78% 0.08 25);
+    --rf-syntax-string: oklch(82% 0.055 250);
+    --rf-syntax-number: oklch(80% 0.07 255);
+    --rf-syntax-comment: oklch(75% 0.01 255);
+    --rf-syntax-type: oklch(81% 0.06 295);
+    --rf-syntax-title: oklch(82% 0.07 305);
+    --rf-syntax-variable: oklch(82% 0.075 90);
+    --rf-syntax-literal: oklch(80% 0.07 255);
+    --rf-syntax-tag: oklch(81% 0.065 150);
+    --rf-syntax-attribute: oklch(80% 0.07 255);
+    --rf-syntax-punctuation: oklch(86% 0.012 255);
+    --rf-syntax-meta: oklch(86% 0.012 255);
+
+    --rf-samp-syntax-keyword: oklch(38% 0.255 25);
+    --rf-samp-syntax-string: oklch(34% 0.235 250);
+    --rf-samp-syntax-number: oklch(36% 0.245 260);
+    --rf-samp-syntax-comment: oklch(39% 0.026 255);
+    --rf-samp-syntax-type: oklch(38% 0.235 295);
+    --rf-samp-syntax-title: oklch(39% 0.27 305);
+    --rf-samp-syntax-variable: oklch(37% 0.205 80);
+    --rf-samp-syntax-literal: oklch(36% 0.245 260);
+    --rf-samp-syntax-tag: oklch(34% 0.18 150);
+    --rf-samp-syntax-attribute: oklch(36% 0.23 260);
+    --rf-samp-syntax-punctuation: oklch(12% 0.018 255);
+
+    --rf-line-emphasis-bg: color-mix(in oklch, var(--rf-accent-soft) 70%, transparent);
+    --rf-line-number-fg: var(--rf-code-muted);
+    --rf-line-number-rule: color-mix(in oklch, var(--rf-code-border) 85%, transparent);
+    --rf-line-comment-bg: color-mix(in oklch, var(--rf-syntax-comment) 16%, transparent);
+    --rf-line-note-bg: oklch(24% 0.01 255);
+    --rf-line-note-border: var(--rf-accent-border);
+    --rf-line-note-fg: var(--rf-code-muted);
+  }
+}
+
+pre {
+  margin: 0;
+  padding: 1rem;
+  overflow: auto;
+  color: var(--rf-code-fg);
+  background: var(--rf-code-bg);
+  border: 1px solid var(--rf-code-border);
+  border-radius: 0.5rem;
+}
+
+pre code,
+pre samp {
+  color: inherit;
+  background: transparent;
+  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
+}
+
+.pre-lines-emphasis {
+  background: var(--rf-line-emphasis-bg);
+}
+
+.pre-line-comment {
+  color: var(--rf-syntax-comment);
+  background: var(--rf-line-comment-bg);
+  padding-block: 0.04em;
+  line-height: 1.45;
+  -webkit-box-decoration-break: clone;
+  box-decoration-break: clone;
+}
+
+pre:has(> samp) {
+  --rf-syntax-keyword: var(--rf-samp-syntax-keyword);
+  --rf-syntax-string: var(--rf-samp-syntax-string);
+  --rf-syntax-number: var(--rf-samp-syntax-number);
+  --rf-syntax-comment: var(--rf-samp-syntax-comment);
+  --rf-syntax-type: var(--rf-samp-syntax-type);
+  --rf-syntax-title: var(--rf-samp-syntax-title);
+  --rf-syntax-variable: var(--rf-samp-syntax-variable);
+  --rf-syntax-literal: var(--rf-samp-syntax-literal);
+  --rf-syntax-tag: var(--rf-samp-syntax-tag);
+  --rf-syntax-attribute: var(--rf-samp-syntax-attribute);
+  --rf-syntax-punctuation: var(--rf-samp-syntax-punctuation);
+  --rf-syntax-meta: var(--rf-samp-syntax-punctuation);
+  --line-number-color: var(--rf-samp-muted);
+  --line-number-rule-color: var(--rf-samp-border);
+  --line-note-color: var(--rf-samp-muted);
+  --line-note-label-color: var(--rf-samp-muted);
+  --line-note-border-color: var(--rf-samp-border);
+  --line-note-background: color-mix(in oklch, var(--rf-samp-bg) 92%, var(--rf-samp-fg));
+  color: var(--rf-samp-fg);
+  background: var(--rf-samp-bg);
+  border-color: var(--rf-samp-border);
+}
+
+pre:has(> samp) .pre-line-comment {
+  color: var(--rf-samp-muted);
+  background: color-mix(in oklch, var(--rf-samp-muted) 18%, transparent);
+}