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

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
@@ -103,9 +105,16 @@ 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()
+  opt.lineEndSpanClass = escapeHtmlAttr(opt.lineEndSpanClass)
   return opt
 }
 
@@ -132,6 +141,8 @@ const parsePositiveLineIndex = (val) => {
   return num
 }
 
+const isTruthyAttrValue = (val) => val !== 'false' && val !== '0'
+
 const escapeHtmlText = (value) => {
   return String(value ?? '')
     .replace(/&/g, '&amp;')
@@ -154,6 +165,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 []
@@ -179,14 +246,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) => {
@@ -196,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]
@@ -209,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
 }
 
@@ -370,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
@@ -381,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]
@@ -392,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
@@ -420,7 +503,7 @@ const splitFenceBlockToLines = (content, emphasizeLines, needLineNumber, needEmp
       }
     }
 
-    if (needLineWrap && notLastLine) {
+    if (needLineWrap && isLogicalLine && hasNextLine) {
       if (!hasLtChecked) {
         hasLt = line.indexOf('<') !== -1
         hasLtChecked = true
@@ -450,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)
 }
 
@@ -502,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
@@ -537,11 +628,22 @@ 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) {
+  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
@@ -557,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]
@@ -576,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)
@@ -584,14 +686,16 @@ 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
           }
           break
         case 'data-pre-emphasis':
+          if (opt.setEmphasizeLines) emphasizeLines = getEmphasizeLines(val)
           dataPreEmphasisIndex = newAttrs.length
           newAttrs.push(attr)
           break
@@ -617,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
           }
@@ -624,14 +729,22 @@ const prepareFenceRenderContext = (tokens, idx, opt) => {
         case 'comment-mark':
           commentMarkValue = val
           if (!sawCommentMark) {
+            if (!appendOrder) appendOrder = []
             appendOrder.push('comment')
             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
           if (!sawLineNumberSkipAttr) {
+            if (!appendOrder) appendOrder = []
             appendOrder.push('line-number-skip')
             sawLineNumberSkipAttr = true
           }
@@ -640,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
           }
@@ -666,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) {
@@ -695,10 +811,12 @@ 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,
@@ -722,6 +840,8 @@ export {
   emitFenceDecision,
   finalizeCommonFenceOption,
   finalizeFenceTimings,
+  getCommentLineFlags,
+  getCommentLineRanges,
   getLogicalLineCount,
   getNowMs,
   getEmphasizeLines,

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

@@ -0,0 +1,170 @@
+/*! Renderer Fence shared base | MIT License */
+
+:root {
+  --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);
+  --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-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);
+    --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 {
+  color-scheme: var(--rf-code-color-scheme);
+  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) {
+  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);
+  --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);
+}

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;
+  }
+}