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

package/src/fence/render-api-runtime.js

@@ -297,6 +297,20 @@ const applyCustomHighlights = (root, options = {}) => {
             break
           }
         }
+        if (sameRefs && prevState.blockCache instanceof Map) {
+          for (const [blockId, codeEl] of blockRefs) {
+            const cached = prevState.blockCache.get(blockId)
+            const textSnapshot = typeof codeEl.textContent === 'string' ? codeEl.textContent : null
+            const boundaryRefs = getCodeBoundaryRefs(codeEl)
+            if (!cached ||
+              cached.textSnapshot !== textSnapshot ||
+              cached.firstRef !== boundaryRefs.first ||
+              cached.lastRef !== boundaryRefs.last) {
+              sameRefs = false
+              break
+            }
+          }
+        }
         if (sameRefs) {
           if (emitDiag) emitDiag({ type: 'runtime-skip', reason: 'unchanged' })
           return { appliedBlocks: 0, appliedRanges: 0, skipped: true, reason: 'unchanged' }
@@ -308,6 +322,7 @@ const applyCustomHighlights = (root, options = {}) => {
   let insertedScopeStyleMap = null
   if (!incremental) clearAppliedHighlightNames(queryRoot)
   const allScopeRanges = new Map()
+  const runtimeScopeNamesByVariant = new Map()
   let appliedBlocks = 0
   let appliedRanges = 0
   let pendingCss = ''
@@ -342,17 +357,12 @@ const applyCustomHighlights = (root, options = {}) => {
     if (payloadDigestByBlock) {
       blockPayloadDigest = payloadDigestByBlock.get(blockId)
       if (blockPayloadDigest === undefined) {
-        const prevCached = prevBlockCache ? prevBlockCache.get(blockId) : null
-        if (prevCached && prevCached.payloadRef === payload && prevCached.variantKey === activePayload.variantKey) {
-          blockPayloadDigest = prevCached.payloadDigest || ''
-        } else {
-          blockPayloadDigest = getCachedPayloadString(payload, payloadStringifyCache) + `|variant=${activePayload.variantKey || ''}`
-        }
+        blockPayloadDigest = getCachedPayloadString(payload, payloadStringifyCache) + `|variant=${activePayload.variantKey || ''}`
         payloadDigestByBlock.set(blockId, blockPayloadDigest)
       }
     }
-    const textSnapshot = typeof codeEl.textContent === 'string' ? codeEl.textContent : null
-    const boundaryRefs = getCodeBoundaryRefs(codeEl)
+    const textSnapshot = incremental && typeof codeEl.textContent === 'string' ? codeEl.textContent : null
+    const boundaryRefs = incremental ? getCodeBoundaryRefs(codeEl) : null
     const cached = prevBlockCache ? prevBlockCache.get(blockId) : null
     if (cached &&
       cached.codeEl === codeEl &&
@@ -404,6 +414,11 @@ const applyCustomHighlights = (root, options = {}) => {
     const appliedNames = new Set()
     const appliedNameList = []
     const scopeRuntimeNames = new Array(activePayload.scopes.length)
+    let runtimeScopeNameCache = runtimeScopeNamesByVariant.get(activePayload.variantKey)
+    if (!runtimeScopeNameCache) {
+      runtimeScopeNameCache = new Map()
+      runtimeScopeNamesByVariant.set(activePayload.variantKey, runtimeScopeNameCache)
+    }
     const scopeStyles = Array.isArray(activePayload.scopeStyles) ? activePayload.scopeStyles : null
     const blockScopeRanges = nextBlockCache ? new Map() : null
     const blockScopeMetaParts = nextBlockCache ? new Map() : null
@@ -448,7 +463,12 @@ const applyCustomHighlights = (root, options = {}) => {
       }
       let runtimeName = scopeRuntimeNames[scopeIdx]
       if (!runtimeName) {
-        runtimeName = getRuntimeScopeName(scopeName, activePayload.variantKey)
+        const scopeCacheKey = String(scopeName)
+        runtimeName = runtimeScopeNameCache.get(scopeCacheKey)
+        if (!runtimeName) {
+          runtimeName = getRuntimeScopeName(scopeCacheKey, activePayload.variantKey)
+          runtimeScopeNameCache.set(scopeCacheKey, runtimeName)
+        }
         scopeRuntimeNames[scopeIdx] = runtimeName
         if (scopeStyles) {
           const css = styleToHighlightCss(scopeStyles[scopeIdx])
@@ -514,7 +534,6 @@ const applyCustomHighlights = (root, options = {}) => {
     if (nextBlockCache) {
       nextBlockCache.set(blockId, {
         codeEl,
-        payloadRef: payload,
         variantKey: activePayload.variantKey || '',
         payloadDigest: blockPayloadDigest,
         textSnapshot,

package/src/fence/render-markup.js

@@ -23,7 +23,8 @@ 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 markupHighlightPreDisabledFeatures = Object.freeze(['setLineNumber', 'line-number-skip', 'line-number-set', 'setEmphasizeLines', 'lineEndSpanThreshold', 'comment-mark', 'line-notes', 'samp'])
+const markupPassthroughDisabledFeatures = Object.freeze([...markupHighlightPreDisabledFeatures, 'wrap', 'setPreWrapStyle'])
 
 const renderFenceMarkup = (context, md, opt, slf) => {
   const token = context.token
@@ -114,32 +115,45 @@ const renderFenceMarkup = (context, md, opt, slf) => {
 
   const useHighlightPre = opt.useHighlightPre && hasHighlightPre
   const needLineNumber = !useHighlightPre && opt.setLineNumber && startNumber >= 0
+  const wantsEmphasis = !useHighlightPre && opt.setEmphasizeLines && emphasizeLines.length > 0
+  const wantsAdvancedLineNumbers = needLineNumber && (lineNumberSkipValue !== undefined || lineNumberSetValue !== undefined)
+  const wantsLineNotes = !useHighlightPre && !!(lineNotes && lineNotes.length)
+  const hasCommentCandidate = !!(
+    !useHighlightPre &&
+    commentMarkValue &&
+    sourceContent.indexOf(commentMarkValue) !== -1
+  )
+  const needsMappedLineCounts = wantsAdvancedLineNumbers || wantsLineNotes || hasCommentCandidate
   let sourceLogicalLineCount = -1
   let highlightedLogicalLineCount = -1
-  const ensureLogicalLineCounts = () => {
-    if (sourceLogicalLineCount === -1) sourceLogicalLineCount = getLogicalLineCount(sourceContent)
-    if (highlightedLogicalLineCount === -1) highlightedLogicalLineCount = getLogicalLineCount(content)
-  }
+  if (wantsEmphasis || needsMappedLineCounts) highlightedLogicalLineCount = getLogicalLineCount(content)
+  if (needsMappedLineCounts) sourceLogicalLineCount = getLogicalLineCount(sourceContent)
+  const highlightedHasTrailingBreak = content.endsWith('\n') || content.endsWith('\r')
+  const needsLastLineWrapCheck = !highlightedHasTrailingBreak && (needLineNumber || wantsEmphasis || wantsLineNotes)
+  if (needsLastLineWrapCheck && highlightedLogicalLineCount < 0) highlightedLogicalLineCount = getLogicalLineCount(content)
+  if (needsLastLineWrapCheck && sourceLogicalLineCount < 0) sourceLogicalLineCount = getLogicalLineCount(sourceContent)
+  const wrapLastLine = !!(
+    needsLastLineWrapCheck &&
+    highlightedLogicalLineCount > 0 &&
+    highlightedLogicalLineCount === sourceLogicalLineCount
+  )
+
   let normalizedEmphasis = []
-  if (!useHighlightPre && opt.setEmphasizeLines && emphasizeLines.length > 0) {
-    ensureLogicalLineCounts()
+  if (wantsEmphasis) {
     normalizedEmphasis = normalizeEmphasisRanges(emphasizeLines, highlightedLogicalLineCount)
   }
   let lineNumberPlan = null
-  if (needLineNumber && (lineNumberSkipValue !== undefined || lineNumberSetValue !== undefined)) {
-    ensureLogicalLineCounts()
+  if (wantsAdvancedLineNumbers) {
     lineNumberPlan = resolveAdvancedLineNumberPlan(lineNumberSkipValue, lineNumberSetValue, sourceLogicalLineCount, highlightedLogicalLineCount)
   }
   let lineNotePlan = null
-  if (!useHighlightPre && lineNotes && lineNotes.length) {
-    ensureLogicalLineCounts()
+  if (wantsLineNotes) {
     lineNotePlan = resolveLineNotesPlan(lineNotes, sourceLogicalLineCount, highlightedLogicalLineCount, lineNoteIdPrefix)
   }
   const needEmphasis = normalizedEmphasis.length > 0
   const needEndSpan = opt.lineEndSpanThreshold > 0
 
-  if (!useHighlightPre && commentMarkValue && sourceContent.indexOf(commentMarkValue) !== -1) {
-    ensureLogicalLineCounts()
+  if (hasCommentCandidate) {
     if (highlightedLogicalLineCount === sourceLogicalLineCount) {
       commentLines = getCommentLineFlags(sourceContent, commentMarkValue)
       needComment = !!commentLines
@@ -163,16 +177,17 @@ const renderFenceMarkup = (context, md, opt, slf) => {
       commentLineClass,
       lineNumberPlan,
       lineNotePlan,
+      wrapLastLine,
     )
     if (timingEnabled) addTimingMs(timings, 'lineSplitMs', getNowMs() - splitStartedAt)
   }
 
-  const tag = isSamp ? 'samp' : 'code'
+  const tag = useHighlightPre ? 'code' : (isSamp ? 'samp' : 'code')
   const decision = {
     renderer: 'markup',
     useHighlightPre,
     hasHighlightPre,
-    disabledFeatures: useHighlightPre ? markupPassthroughDisabledFeatures : [],
+    disabledFeatures: useHighlightPre ? markupHighlightPreDisabledFeatures : [],
   }
   if (timingEnabled) decision.timings = finalizeFenceTimings(timings, fenceStartedAt)
   emitFenceDecision(opt, decision)

package/src/fence/render-shared.js

@@ -1,6 +1,7 @@
 import {
   appendStyleValue,
   createAttrOrderIndexGetter,
+  escapeHtmlAttr,
   getInfoAttr,
   getLangFromClassAttr,
 } from '../utils/attr-utils.js'
@@ -26,6 +27,7 @@ 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 attrOrderRankCacheMaxSize = 256
 
 const getLineNoteIdPrefix = (token, idx) => {
   const tokenMap = token && Array.isArray(token.map) ? token.map : null
@@ -112,6 +114,7 @@ const finalizeCommonFenceOption = (opt) => {
   opt._sampLangSet = new Set(sampLangs)
   opt._attrOrderIndex = createAttrOrderIndexGetter(opt.attrsOrder || [])
   opt._attrOrderRankCache = new Map()
+  opt.lineEndSpanClass = escapeHtmlAttr(opt.lineEndSpanClass)
   return opt
 }
 
@@ -254,6 +257,8 @@ const getLineNumberSkipRanges = (attrVal) => {
 const normalizeEmphasisRanges = (emphasizeLines, maxLine) => {
   const normalized = []
   if (!emphasizeLines || !emphasizeLines.length || maxLine <= 0) return normalized
+  let previousStart = -1
+  let needsSort = false
   for (const range of emphasizeLines) {
     let s = range[0]
     let e = range[1]
@@ -267,8 +272,25 @@ const normalizeEmphasisRanges = (emphasizeLines, maxLine) => {
     }
     if (s > maxLine || e < 1) continue
     if (e > maxLine) e = maxLine
+    if (previousStart > s) needsSort = true
     normalized.push([s, e])
+    previousStart = s
+  }
+  if (normalized.length < 2) return normalized
+  if (needsSort) normalized.sort((a, b) => a[0] - b[0] || a[1] - b[1])
+
+  let writeIndex = 1
+  for (let i = 1; i < normalized.length; i++) {
+    const previous = normalized[writeIndex - 1]
+    const current = normalized[i]
+    if (current[0] <= previous[1] + 1) {
+      if (current[1] > previous[1]) previous[1] = current[1]
+      continue
+    }
+    normalized[writeIndex] = current
+    writeIndex++
   }
+  normalized.length = writeIndex
   return normalized
 }
 
@@ -428,9 +450,10 @@ const buildPreLineTags = (hidden, setNumber, lineNote) => {
   }
 }
 
-const splitFenceBlockToLines = (content, emphasizeLines, needLineNumber, needEmphasis, needEndSpan, threshold, lineEndSpanClass, br, commentLines, commentClass, lineNumberPlan, lineNotePlan) => {
+const splitFenceBlockToLines = (content, emphasizeLines, needLineNumber, needEmphasis, needEndSpan, threshold, lineEndSpanClass, br, commentLines, commentClass, lineNumberPlan, lineNotePlan, wrapLastLine) => {
   const lines = content.split(br)
   const max = lines.length
+  const logicalLineMax = wrapLastLine ? max : Math.max(max - 1, 0)
   const lineNumberHidden = lineNumberPlan ? lineNumberPlan.hidden : null
   const lineNumberSets = lineNumberPlan ? lineNumberPlan.sets : null
   const lineNoteAnchors = lineNotePlan ? lineNotePlan.anchors : null
@@ -439,6 +462,7 @@ const splitFenceBlockToLines = (content, emphasizeLines, needLineNumber, needEmp
   let emIdx = 0
   let emStart = -1
   let emEnd = -1
+  let emphasisOpen = false
   if (needEmphasis && emphasizeLines && emphasizeLines.length) {
     emStart = emphasizeLines[0][0]
     emEnd = emphasizeLines[0][1]
@@ -450,7 +474,8 @@ const splitFenceBlockToLines = (content, emphasizeLines, needLineNumber, needEmp
 
   for (let n = 0; n < max; n++) {
     let line = lines[n]
-    const notLastLine = n < max - 1
+    const hasNextLine = n < max - 1
+    const isLogicalLine = n < logicalLineMax
     const doComment = commentLines && commentLines[n]
     const hidden = !!(lineNumberHidden && lineNumberHidden[n])
     const setNumber = lineNumberSets ? lineNumberSets[n] : undefined
@@ -478,7 +503,7 @@ const splitFenceBlockToLines = (content, emphasizeLines, needLineNumber, needEmp
       }
     }
 
-    if (needLineWrap && notLastLine) {
+    if (needLineWrap && isLogicalLine && hasNextLine) {
       if (!hasLtChecked) {
         hasLt = line.indexOf('<') !== -1
         hasLtChecked = true
@@ -508,24 +533,31 @@ const splitFenceBlockToLines = (content, emphasizeLines, needLineNumber, needEmp
       line = `<span class="${commentClass}">` + line + closeTag
     }
 
-    if (needLineWrap && notLastLine) {
+    if (needLineWrap && isLogicalLine) {
       const lineTags = buildPreLineTags(hidden, setNumber, lineNote)
       line = lineTags.open + line + lineTags.close
     }
 
-    if (needEmphasis && emIdx < emphasizeLines.length && emStart === n + 1) {
+    const opensEmphasis = needEmphasis && emIdx < emphasizeLines.length && emStart === n + 1
+    const closesEmphasis = needEmphasis && emIdx < emphasizeLines.length && emEnd === n
+    if (opensEmphasis) {
       line = emphOpenTag + line
     }
-    if (needEmphasis && emIdx < emphasizeLines.length && emEnd === n) {
+    if (closesEmphasis) {
       line = closeTag + line
       emIdx++
       const nextEmphasis = emphasizeLines[emIdx] || []
       emStart = nextEmphasis[0]
       emEnd = nextEmphasis[1]
     }
+    if (opensEmphasis) emphasisOpen = true
+    else if (closesEmphasis) emphasisOpen = false
 
     lines[n] = line
   }
+  if (emphasisOpen && logicalLineMax > 0) {
+    lines[logicalLineMax - 1] += closeTag
+  }
   return lines.join(br)
 }
 
@@ -560,6 +592,7 @@ const orderTokenAttrs = (token, opt) => {
     let rank = rankCache.get(name)
     if (rank === undefined) {
       rank = opt._attrOrderIndex(name)
+      if (rankCache.size >= attrOrderRankCacheMaxSize) rankCache.clear()
       rankCache.set(name, rank)
     }
     return rank
@@ -600,7 +633,17 @@ const prepareFenceRenderContext = (tokens, idx, opt) => {
   const lineNoteIdPrefix = lineNotes && lineNotes.length ? getLineNoteIdPrefix(token, idx) : ''
   const attrNormalizeStartedAt = timingEnabled ? getNowMs() : 0
 
-  if (token.attrs) {
+  const classOnlyAttr = !!(
+    token.attrs &&
+    token.attrs.length === 1 &&
+    token.attrs[0][0] === 'class'
+  )
+  if (classOnlyAttr) {
+    const classLang = getLangFromClassAttr(token.attrs[0][1], opt.langPrefix)
+    if (classLang) lang = classLang
+  }
+
+  if (token.attrs && !classOnlyAttr) {
     const newAttrs = []
     let dataPreStartIndex = -1
     let dataPreEmphasisIndex = -1
@@ -616,7 +659,7 @@ const prepareFenceRenderContext = (tokens, idx, opt) => {
     let sawEmphasisAttr = false
     let sawLineNumberSkipAttr = false
     let sawLineNumberSetAttr = false
-    const appendOrder = []
+    let appendOrder = null
 
     for (const attr of token.attrs) {
       const name = attr[0]
@@ -635,7 +678,7 @@ const prepareFenceRenderContext = (tokens, idx, opt) => {
           newAttrs.push(attr)
           break
         case 'data-pre-start':
-          startNumber = parseStartNumber(val) ?? -1
+          if (opt.setLineNumber) startNumber = parseStartNumber(val) ?? -1
           startValue = val
           dataPreStartIndex = newAttrs.length
           newAttrs.push(attr)
@@ -643,9 +686,10 @@ const prepareFenceRenderContext = (tokens, idx, opt) => {
         case 'line-number-start':
         case 'start':
         case 'pre-start':
-          startNumber = parseStartNumber(val) ?? -1
+          if (opt.setLineNumber) startNumber = parseStartNumber(val) ?? -1
           startValue = val
           if (!sawStartAttr) {
+            if (!appendOrder) appendOrder = []
             appendOrder.push('start')
             sawStartAttr = true
           }
@@ -677,6 +721,7 @@ const prepareFenceRenderContext = (tokens, idx, opt) => {
           if (opt.setEmphasizeLines) emphasizeLines = getEmphasizeLines(val)
           emphasisValue = val
           if (!sawEmphasisAttr) {
+            if (!appendOrder) appendOrder = []
             appendOrder.push('emphasis')
             sawEmphasisAttr = true
           }
@@ -684,6 +729,7 @@ const prepareFenceRenderContext = (tokens, idx, opt) => {
         case 'comment-mark':
           commentMarkValue = val
           if (!sawCommentMark) {
+            if (!appendOrder) appendOrder = []
             appendOrder.push('comment')
             sawCommentMark = true
           }
@@ -698,6 +744,7 @@ const prepareFenceRenderContext = (tokens, idx, opt) => {
         case 'pre-line-number-skip':
           lineNumberSkipValue = val
           if (!sawLineNumberSkipAttr) {
+            if (!appendOrder) appendOrder = []
             appendOrder.push('line-number-skip')
             sawLineNumberSkipAttr = true
           }
@@ -706,6 +753,7 @@ const prepareFenceRenderContext = (tokens, idx, opt) => {
         case 'pre-line-number-set':
           lineNumberSetValue = val
           if (!sawLineNumberSetAttr) {
+            if (!appendOrder) appendOrder = []
             appendOrder.push('line-number-set')
             sawLineNumberSetAttr = true
           }
@@ -732,21 +780,23 @@ const prepareFenceRenderContext = (tokens, idx, opt) => {
     if (lineNumberSkipValue !== undefined && dataPreLineNumberSkipIndex >= 0) newAttrs[dataPreLineNumberSkipIndex][1] = lineNumberSkipValue
     if (lineNumberSetValue !== undefined && dataPreLineNumberSetIndex >= 0) newAttrs[dataPreLineNumberSetIndex][1] = lineNumberSetValue
 
-    for (const kind of appendOrder) {
-      if (kind === 'start' && dataPreStartIndex === -1 && startValue !== undefined) {
-        newAttrs.push(['data-pre-start', startValue])
-      } else if (kind === 'emphasis' && dataPreEmphasisIndex === -1 && emphasisValue !== undefined) {
-        newAttrs.push(['data-pre-emphasis', emphasisValue])
-      } else if (kind === 'comment' && dataPreCommentIndex === -1 && commentMarkValue !== undefined) {
-        newAttrs.push(['data-pre-comment-mark', commentMarkValue])
-      } else if (kind === 'line-number-skip' && dataPreLineNumberSkipIndex === -1 && lineNumberSkipValue !== undefined) {
-        newAttrs.push(['data-pre-line-number-skip', lineNumberSkipValue])
-      } else if (kind === 'line-number-set' && dataPreLineNumberSetIndex === -1 && lineNumberSetValue !== undefined) {
-        newAttrs.push(['data-pre-line-number-set', lineNumberSetValue])
+    if (appendOrder) {
+      for (const kind of appendOrder) {
+        if (kind === 'start' && dataPreStartIndex === -1 && startValue !== undefined) {
+          newAttrs.push(['data-pre-start', startValue])
+        } else if (kind === 'emphasis' && dataPreEmphasisIndex === -1 && emphasisValue !== undefined) {
+          newAttrs.push(['data-pre-emphasis', emphasisValue])
+        } else if (kind === 'comment' && dataPreCommentIndex === -1 && commentMarkValue !== undefined) {
+          newAttrs.push(['data-pre-comment-mark', commentMarkValue])
+        } else if (kind === 'line-number-skip' && dataPreLineNumberSkipIndex === -1 && lineNumberSkipValue !== undefined) {
+          newAttrs.push(['data-pre-line-number-skip', lineNumberSkipValue])
+        } else if (kind === 'line-number-set' && dataPreLineNumberSetIndex === -1 && lineNumberSetValue !== undefined) {
+          newAttrs.push(['data-pre-line-number-set', lineNumberSetValue])
+        }
       }
     }
 
-    if (startNumber !== -1) {
+    if (startNumber !== -1 && opt.setLineNumber) {
       styleValue = appendStyleValue(styleValue, 'counter-set:pre-line-number ' + startNumber + ';')
     }
     if (styleIndex >= 0) {

package/src/utils/attr-utils.js

@@ -35,6 +35,15 @@ const appendStyleValue = (style, addition) => {
   return base + separator + next
 }
 
+const escapeHtmlAttr = (value) => {
+  return String(value ?? '')
+    .replace(/&/g, '&')
+    .replace(/"/g, '"')
+    .replace(/'/g, ''')
+    .replace(/</g, '&lt;')
+    .replace(/>/g, '&gt;')
+}
+
 const parseHtmlAttrs = (attrText) => {
   const attrs = []
   if (!attrText) return attrs
@@ -113,6 +122,7 @@ const getLangFromClassAttr = (classText, langPrefix) => {
 export {
   appendStyleValue,
   createAttrOrderIndexGetter,
+  escapeHtmlAttr,
   getInfoAttr,
   getLangFromClassAttr,
   mergeAttrSets,

package/theme/_shared/rf-core.css

@@ -1,7 +1,8 @@
 /*! Renderer Fence shared base | MIT License */
 
 :root {
-  color-scheme: light dark;
+  --rf-code-color-scheme: light;
+  --rf-samp-color-scheme: dark;
 
   --rf-code-bg: oklch(99.4% 0 0);
   --rf-code-fg: oklch(4% 0 0);
@@ -54,6 +55,9 @@
 
 @media (prefers-color-scheme: dark) {
   :root {
+    --rf-code-color-scheme: dark;
+    --rf-samp-color-scheme: light;
+
     --rf-code-bg: oklch(18% 0 0);
     --rf-code-fg: oklch(95% 0 0);
     --rf-code-muted: oklch(76% 0 0);
@@ -105,6 +109,7 @@
 }
 
 pre {
+  color-scheme: var(--rf-code-color-scheme);
   margin: 0;
   padding: 1rem;
   overflow: auto;
@@ -135,6 +140,7 @@ pre samp {
 }
 
 pre:has(> samp) {
+  color-scheme: var(--rf-samp-color-scheme);
   --rf-syntax-keyword: var(--rf-samp-syntax-keyword);
   --rf-syntax-string: var(--rf-samp-syntax-string);
   --rf-syntax-number: var(--rf-samp-syntax-number);

package/theme/line-notes.css

@@ -0,0 +1,94 @@
+/*! Renderer Fence line-notes layout | MIT License */
+
+:root {
+  --line-note-gap: 0.35rem;
+  --line-note-inline-gap: 1.25ch;
+  --line-note-width: 14rem;
+  --line-note-color: var(--rf-line-note-fg, #666);
+  --line-note-border-color: var(--rf-line-note-border, #cfcfcf);
+  --line-note-background: var(--rf-line-note-bg, rgba(255, 255, 255, 0.72));
+  --line-note-font-family: inherit;
+  --line-note-font-size: inherit;
+  --line-note-line-height: inherit;
+  --line-note-padding-block: 0.05rem;
+  --line-note-padding-inline: 0.4rem;
+  --line-note-anchor-font-size: 0.92em;
+  --line-note-anchor-line-height: 1.15;
+  --line-note-anchor-padding-block: 0;
+  --line-note-anchor-padding-inline: 0.35rem;
+  --line-note-radius: 0.25rem;
+  --line-note-label-color: var(--line-note-color);
+  --line-note-label-prefix: "line ";
+  --line-note-label-suffix: ":";
+  --line-note-anchor-padding-block-end: 1.25em;
+}
+
+.pre-wrapper-line-notes pre {
+  margin-bottom: 0;
+}
+
+.pre-wrapper-line-notes .pre-line-note-layer {
+  display: grid;
+  gap: var(--line-note-gap);
+  margin-top: 0.65rem;
+}
+
+.pre-wrapper-line-notes .pre-line-note {
+  display: grid;
+  grid-template-columns: max-content minmax(0, 1fr);
+  align-items: start;
+  column-gap: 0.5rem;
+  box-sizing: border-box;
+  color: var(--line-note-color);
+  font-family: var(--line-note-font-family);
+  font-size: var(--line-note-font-size);
+  line-height: var(--line-note-line-height);
+  vertical-align: baseline;
+  white-space: pre-wrap;
+}
+
+.pre-wrapper-line-notes .pre-line-note::before {
+  content: var(--line-note-label-prefix) attr(data-pre-line-note-label) var(--line-note-label-suffix);
+  display: inline-block;
+  color: var(--line-note-label-color);
+  font-weight: 700;
+  font-variant-numeric: tabular-nums;
+  white-space: nowrap;
+}
+
+.pre-wrapper-line-notes .pre-line-content {
+  display: inline-block;
+}
+
+@supports ((anchor-name: --x) and (position-anchor: --x)) {
+  .pre-wrapper-line-notes[data-pre-line-notes-layout="anchor"] {
+    position: relative;
+    anchor-scope: all;
+    padding-block-end: calc(var(--line-note-anchor-padding-block-end) + (var(--pre-line-note-overflow-lines, 0) * 1.5em));
+  }
+
+  .pre-wrapper-line-notes[data-pre-line-notes-layout="anchor"] .pre-line-note-layer {
+    margin-top: 0;
+    padding-top: 0;
+    border-top: 0;
+  }
+
+  .pre-wrapper-line-notes[data-pre-line-notes-layout="anchor"] .pre-line-note {
+    display: block;
+    position: absolute;
+    inset-block-start: anchor(top);
+    inset-inline-start: calc(anchor(right) + var(--line-note-inline-gap));
+    inline-size: clamp(0px, calc(100% - anchor(right) - var(--line-note-inline-gap)), var(--line-note-width));
+    padding: var(--line-note-anchor-padding-block) var(--line-note-anchor-padding-inline);
+    border: 1px solid var(--line-note-border-color);
+    border-radius: var(--line-note-radius);
+    background: var(--line-note-background);
+    font-size: var(--line-note-anchor-font-size);
+    line-height: var(--line-note-anchor-line-height);
+    transform: translateY(0.08em);
+  }
+
+  .pre-wrapper-line-notes[data-pre-line-notes-layout="anchor"] .pre-line-note::before {
+    content: none;
+  }
+}

package/theme/line-number.css

@@ -0,0 +1,64 @@
+/*! Renderer Fence line-number layout | MIT License */
+
+:root {
+  --line-number-width: 2em;
+  --line-number-gap: 0.5em;
+  --line-number-rule-gap: 0.25em;
+  --line-number-color: var(--rf-line-number-fg, #666);
+  --line-number-rule-color: var(--rf-line-number-rule, #ccc);
+}
+
+pre :is(code, samp)[data-pre-start] .pre-line {
+  display: block;
+  position: relative;
+  padding-inline-start: calc(var(--line-number-width) + var(--line-number-rule-gap) + var(--line-number-gap));
+  background-image: linear-gradient(var(--line-number-rule-color), var(--line-number-rule-color));
+  background-repeat: no-repeat;
+  background-size: 1px 100%;
+  background-position: calc(var(--line-number-width) + var(--line-number-rule-gap)) 0;
+}
+
+pre :is(code, samp)[data-pre-start] {
+  white-space: normal;
+}
+
+pre:not([data-pre-wrap]) :is(code, samp)[data-pre-start] .pre-line {
+  white-space: pre;
+}
+
+pre[data-pre-wrap] :is(code, samp)[data-pre-start] .pre-line {
+  white-space: break-spaces;
+  overflow-wrap: anywhere;
+}
+
+pre :is(code, samp)[data-pre-start] .pre-line::before {
+  content: counter(pre-line-number);
+  position: absolute;
+  inset-inline-start: 0;
+  top: 0;
+  width: var(--line-number-width);
+  padding-inline-end: var(--line-number-rule-gap);
+  color: var(--line-number-color);
+  text-align: right;
+}
+
+pre :is(code, samp)[data-pre-start] .pre-line[data-pre-line-label]::before {
+  content: attr(data-pre-line-label);
+}
+
+pre :is(code, samp)[data-pre-start] .pre-line[data-pre-line-label-bold]::before {
+  font-weight: bold;
+}
+
+pre :is(code, samp)[data-pre-start] .pre-line::after {
+  content: "";
+  counter-increment: pre-line-number;
+}
+
+pre :is(code, samp)[data-pre-start] .pre-line.pre-line-no-number::before {
+  content: "";
+}
+
+pre :is(code, samp)[data-pre-start] .pre-line.pre-line-no-number::after {
+  counter-increment: none;
+}