securemark 0.270.1 → 0.271.0

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # Changelog
 
+## 0.271.0
+
+- Extend table highlight syntax.
+
+## 0.270.2
+
+- Refactoring.
+
 ## 0.270.1
 
 - Refactoring.

package/dist/index.js

@@ -1,4 +1,4 @@
-/*! securemark v0.270.1 https://github.com/falsandtru/securemark | (c) 2017, falsandtru | UNLICENSED License */
+/*! securemark v0.271.0 https://github.com/falsandtru/securemark | (c) 2017, falsandtru | UNLICENSED License */
 (function webpackUniversalModuleDefinition(root, factory) {
 	if(typeof exports === 'object' && typeof module === 'object')
 		module.exports = factory(require("Prism"), require("DOMPurify"));
@@ -4465,8 +4465,8 @@ const visibility_1 = __webpack_require__(7618);
 const array_1 = __webpack_require__(8112);
 const dom_1 = __webpack_require__(3252);
 exports.dlist = (0, combinator_1.lazy)(() => (0, combinator_1.block)((0, combinator_1.fmap)((0, combinator_1.validate)(/^~[^\S\n]+(?=\S)/, (0, combinator_1.some)((0, combinator_1.inits)([(0, combinator_1.state)(256 /* State.annotation */ | 128 /* State.reference */ | 64 /* State.index */ | 32 /* State.label */ | 16 /* State.link */ | 8 /* State.media */, (0, combinator_1.some)(term)), (0, combinator_1.some)(desc)]))), es => [(0, dom_1.html)('dl', fillTrailingDescription(es))])));
-const term = (0, combinator_1.creation)(1, false, (0, combinator_1.line)((0, inline_1.indexee)((0, combinator_1.fmap)((0, combinator_1.open)(/^~[^\S\n]+(?=\S)/, (0, visibility_1.visualize)((0, visibility_1.trimBlank)((0, combinator_1.some)((0, combinator_1.union)([inline_1.indexer, inline_1.inline])))), true), ns => [(0, dom_1.html)('dt', (0, dom_1.defrag)(ns))]))));
-const desc = (0, combinator_1.creation)(1, false, (0, combinator_1.block)((0, combinator_1.fmap)((0, combinator_1.open)(/^:[^\S\n]+(?=\S)|/, (0, combinator_1.rewrite)((0, combinator_1.some)(source_1.anyline, /^[~:][^\S\n]+\S/), (0, visibility_1.visualize)((0, combinator_1.trimEnd)((0, combinator_1.some)((0, combinator_1.union)([inline_1.inline]))))), true), ns => [(0, dom_1.html)('dd', (0, dom_1.defrag)(ns))]), false));
+const term = (0, combinator_1.creation)(1, false, (0, combinator_1.line)((0, inline_1.indexee)((0, combinator_1.fmap)((0, combinator_1.open)(/^~[^\S\n]+(?=\S)/, (0, visibility_1.visualize)((0, visibility_1.trimBlankStart)((0, combinator_1.some)((0, combinator_1.union)([inline_1.indexer, inline_1.inline])))), true), ns => [(0, dom_1.html)('dt', (0, visibility_1.trimNodeEnd)((0, dom_1.defrag)(ns)))]))));
+const desc = (0, combinator_1.creation)(1, false, (0, combinator_1.block)((0, combinator_1.fmap)((0, combinator_1.open)(/^:[^\S\n]+(?=\S)|/, (0, combinator_1.rewrite)((0, combinator_1.some)(source_1.anyline, /^[~:][^\S\n]+\S/), (0, visibility_1.visualize)((0, combinator_1.some)((0, combinator_1.union)([inline_1.inline])))), true), ns => [(0, dom_1.html)('dd', (0, visibility_1.trimNodeEnd)((0, dom_1.defrag)(ns)))]), false));
 function fillTrailingDescription(es) {
   return es.length > 0 && es[es.length - 1].tagName === 'DT' ? (0, array_1.push)(es, [(0, dom_1.html)('dd')]) : es;
 }
@@ -4701,11 +4701,11 @@ const dom_1 = __webpack_require__(3252);
 exports.segment = (0, combinator_1.block)((0, combinator_1.match)(/^(~{3,})(?:figure[^\S\n])?(?=\[?\$)/, (0, memoize_1.memoize)(([, fence], closer = new RegExp(String.raw`^${fence}[^\S\n]*(?:$|\n)`)) => (0, combinator_1.close)((0, combinator_1.sequence)([source_1.contentline, (0, combinator_1.inits)([
 // All parsers which can include closing terms.
 (0, combinator_1.union)([codeblock_1.segment_, mathblock_1.segment_, table_2.segment_, blockquote_1.segment, placeholder_1.segment_, (0, combinator_1.some)(source_1.contentline, closer)]), source_1.emptyline, (0, combinator_1.union)([source_1.emptyline, (0, combinator_1.some)(source_1.contentline, closer)])])]), closer), ([, fence]) => fence.length, [])));
-exports.figure = (0, combinator_1.block)((0, combinator_1.fallback)((0, combinator_1.rewrite)(exports.segment, (0, combinator_1.fmap)((0, combinator_1.convert)(source => source.slice(source.match(/^~+(?:\w+\s+)?/)[0].length, source.trimEnd().lastIndexOf('\n')), (0, combinator_1.sequence)([(0, combinator_1.line)((0, combinator_1.sequence)([label_1.label, (0, source_1.str)(/^(?=\s).*\n/)])), (0, combinator_1.inits)([(0, combinator_1.block)((0, combinator_1.union)([ulist_1.ulist, olist_1.olist, table_1.table, codeblock_1.codeblock, mathblock_1.mathblock, example_1.example, table_2.table, blockquote_1.blockquote, placeholder_1.placeholder, (0, combinator_1.line)(inline_1.media), (0, combinator_1.line)(inline_1.shortmedia)])), source_1.emptyline, (0, combinator_1.block)((0, combinator_1.state)(8 /* State.media */, (0, visibility_1.visualize)((0, visibility_1.trimBlank)((0, combinator_1.trimEnd)((0, combinator_1.some)(inline_1.inline))))))])])), ([label, param, content, ...caption]) => [(0, dom_1.html)('figure', attributes(label.getAttribute('data-label'), param, content, caption), [(0, dom_1.html)('figcaption', [(0, dom_1.html)('span', {
+exports.figure = (0, combinator_1.block)((0, combinator_1.fallback)((0, combinator_1.rewrite)(exports.segment, (0, combinator_1.fmap)((0, combinator_1.convert)(source => source.slice(source.match(/^~+(?:\w+\s+)?/)[0].length, source.trimEnd().lastIndexOf('\n')), (0, combinator_1.sequence)([(0, combinator_1.line)((0, combinator_1.sequence)([label_1.label, (0, source_1.str)(/^(?=\s).*\n/)])), (0, combinator_1.inits)([(0, combinator_1.block)((0, combinator_1.union)([ulist_1.ulist, olist_1.olist, table_1.table, codeblock_1.codeblock, mathblock_1.mathblock, example_1.example, table_2.table, blockquote_1.blockquote, placeholder_1.placeholder, (0, combinator_1.line)(inline_1.media), (0, combinator_1.line)(inline_1.shortmedia)])), source_1.emptyline, (0, combinator_1.block)((0, combinator_1.state)(8 /* State.media */, (0, visibility_1.visualize)((0, visibility_1.trimBlankStart)((0, combinator_1.some)(inline_1.inline)))))])])), ([label, param, content, ...caption]) => [(0, dom_1.html)('figure', attributes(label.getAttribute('data-label'), param, content, caption), [(0, dom_1.html)('figcaption', [(0, dom_1.html)('span', {
   class: 'figindex'
 }), (0, dom_1.html)('span', {
   class: 'figtext'
-}, (0, dom_1.defrag)(caption))]), (0, dom_1.html)('div', [content])])])), (0, combinator_1.fmap)((0, combinator_1.fence)(/^(~{3,})(?:figure|\[?\$\S*)(?!\S)[^\n]*(?:$|\n)/, 300), ([body, overflow, closer, opener, delim], _, context) => [(0, dom_1.html)('pre', {
+}, (0, visibility_1.trimNodeEnd)((0, dom_1.defrag)(caption)))]), (0, dom_1.html)('div', [content])])])), (0, combinator_1.fmap)((0, combinator_1.fence)(/^(~{3,})(?:figure|\[?\$\S*)(?!\S)[^\n]*(?:$|\n)/, 300), ([body, overflow, closer, opener, delim], _, context) => [(0, dom_1.html)('pre', {
   class: 'invalid',
   translate: 'no',
   'data-invalid-syntax': 'figure',
@@ -4949,28 +4949,36 @@ const parser = (0, combinator_1.lazy)(() => (0, combinator_1.block)((0, combinat
 const row = (0, combinator_1.lazy)(() => (0, combinator_1.dup)((0, combinator_1.fmap)((0, combinator_1.subsequence)([(0, combinator_1.dup)((0, combinator_1.union)([align])), (0, combinator_1.some)((0, combinator_1.union)([head, data, (0, combinator_1.some)(dataline, alignment), source_1.emptyline]))]), ns => !(0, alias_1.isArray)(ns[0]) ? (0, array_1.unshift)([[[]]], ns) : ns)));
 const alignment = /^[-=<>]+(?:\/[-=^v]*)?(?=[^\S\n]*\n)/;
 const align = (0, combinator_1.line)((0, combinator_1.fmap)((0, combinator_1.union)([(0, source_1.str)(alignment)]), ([s]) => s.split('/').map(s => s.split(''))));
-const delimiter = /^[-=<>]+(?:\/[-=^v]*)?(?=[^\S\n]*\n)|^[#:](?:(?!:\D|0)\d*:(?!0)\d*)?!*(?=\s)/;
-const head = (0, combinator_1.creation)(1, false, (0, combinator_1.block)((0, combinator_1.fmap)((0, combinator_1.open)((0, source_1.str)(/^#(?:(?!:\D|0)\d*:(?!0)\d*)?!*(?=\s)/), (0, combinator_1.rewrite)((0, combinator_1.inits)([source_1.anyline, (0, combinator_1.some)(source_1.contentline, delimiter)]), (0, combinator_1.trim)((0, visibility_1.visualize)((0, combinator_1.some)((0, combinator_1.union)([inline_1.inline]))))), true), ns => [(0, dom_1.html)('th', attributes(ns.shift()), (0, dom_1.defrag)(ns))]), false));
-const data = (0, combinator_1.creation)(1, false, (0, combinator_1.block)((0, combinator_1.fmap)((0, combinator_1.open)((0, source_1.str)(/^:(?:(?!:\D|0)\d*:(?!0)\d*)?!*(?=\s)/), (0, combinator_1.rewrite)((0, combinator_1.inits)([source_1.anyline, (0, combinator_1.some)(source_1.contentline, delimiter)]), (0, combinator_1.trim)((0, visibility_1.visualize)((0, combinator_1.some)((0, combinator_1.union)([inline_1.inline]))))), true), ns => [(0, dom_1.html)('td', attributes(ns.shift()), (0, dom_1.defrag)(ns))]), false));
+const delimiter = /^[-=<>]+(?:\/[-=^v]*)?(?=[^\S\n]*\n)|^[#:](?:(?!:\D|0)\d*:(?!0)\d*)?(?:!+[+]?)?(?=\s)/;
+const head = (0, combinator_1.creation)(1, false, (0, combinator_1.block)((0, combinator_1.fmap)((0, combinator_1.open)((0, source_1.str)(/^#(?:(?!:\D|0)\d*:(?!0)\d*)?(?:!+[+]?)?(?=\s)/), (0, combinator_1.rewrite)((0, combinator_1.inits)([source_1.anyline, (0, combinator_1.some)(source_1.contentline, delimiter)]), (0, combinator_1.trim)((0, visibility_1.visualize)((0, combinator_1.some)((0, combinator_1.union)([inline_1.inline]))))), true), ns => [(0, dom_1.html)('th', attributes(ns.shift()), (0, dom_1.defrag)(ns))]), false));
+const data = (0, combinator_1.creation)(1, false, (0, combinator_1.block)((0, combinator_1.fmap)((0, combinator_1.open)((0, source_1.str)(/^:(?:(?!:\D|0)\d*:(?!0)\d*)?(?:!+[+]?)?(?=\s)/), (0, combinator_1.rewrite)((0, combinator_1.inits)([source_1.anyline, (0, combinator_1.some)(source_1.contentline, delimiter)]), (0, combinator_1.trim)((0, visibility_1.visualize)((0, combinator_1.some)((0, combinator_1.union)([inline_1.inline]))))), true), ns => [(0, dom_1.html)('td', attributes(ns.shift()), (0, dom_1.defrag)(ns))]), false));
 const dataline = (0, combinator_1.creation)(1, false, (0, combinator_1.line)((0, combinator_1.rewrite)(source_1.contentline, (0, combinator_1.union)([(0, combinator_1.validate)(/^!+\s/, (0, combinator_1.convert)(source => `:${source}`, data)), (0, combinator_1.convert)(source => `: ${source}`, data)]))));
 function attributes(source) {
-  let [, rowspan = undefined, colspan = undefined, highlight = undefined] = source.match(/^.(?:(\d+)?:(\d+)?)?(!+)?$/) ?? [];
+  let [, rowspan = undefined, colspan = undefined, highlight = undefined, extension = undefined] = source.match(/^[#:](?:(\d+)?:(\d+)?)?(?:(!+)([+]?))?$/) ?? [];
   rowspan === '1' ? rowspan = undefined : undefined;
   colspan === '1' ? colspan = undefined : undefined;
   rowspan &&= `${(0, alias_1.max)(0, (0, alias_1.min)(+rowspan, 65534))}`;
   colspan &&= `${(0, alias_1.max)(0, (0, alias_1.min)(+colspan, 1000))}`;
-  highlight &&= highlight.length > 0 ? `${highlight.length}` : undefined;
-  const valid = !highlight || source[0] === '#' && +highlight <= 1 || source[0] === ':' && +highlight <= 6;
+  extension ||= undefined;
+  const level = highlight?.length ?? 0;
+  const validH = !highlight || source[0] === '#' && level <= 6 || source[0] === ':' && level <= 6;
+  const validE = source[0] === '#' || extension !== '+';
+  const valid = validH && validE;
   return {
     class: valid ? highlight && 'highlight' : 'invalid',
     rowspan,
     colspan,
-    ...(valid ? {
-      'data-highlight-level': +highlight > 1 ? highlight : undefined
-    } : {
+    ...(!validH && {
       'data-invalid-syntax': 'table',
       'data-invalid-type': 'syntax',
       'data-invalid-message': 'Too much highlight level'
+    } || !validE && {
+      'data-invalid-syntax': 'table',
+      'data-invalid-type': 'syntax',
+      'data-invalid-message': 'Extensible cells are only head cells'
+    } || {
+      'data-highlight-level': level > 1 ? `${level}` : undefined,
+      'data-highlight-extension': extension
     })
   };
 }
@@ -4982,7 +4990,8 @@ function format(rows) {
   const valigns = [];
   let target = thead;
   let ranges = {};
-  let verticalHighlights = 0n;
+  let verticalHighlightExtensions = 0n;
+  let verticalHighlightLevels = [];
   ROW: for (let i = 0; i < rows.length; ++i) {
     // Copy to make them retryable.
     const [[[...as], [...vs] = []], ...cells] = rows[i];
@@ -5040,22 +5049,26 @@ function format(rows) {
     const row = (0, dom_1.html)('tr');
     let heads = 0n;
     let highlights = 0n;
+    let highlightExtensions = 0n;
+    let highlightLevels = [];
     let hasDataCell = false;
-    let lHeadCellIdx;
-    let rHeadCellIdx;
+    let lHeadCellIndex;
+    let rHeadCellIndex;
     for (let j = 0; j < cells.length; ++j) {
       const jn = BigInt(j);
       const isVirtual = !!ranges[i]?.[j];
       const cell = isVirtual ? (0, array_1.splice)(cells, j, 0, undefined) && ranges[i][j] : cells[j];
       const isHeadCell = cell.tagName === 'TH';
-      heads |= BigInt(isHeadCell) << jn;
-      highlights |= BigInt(cell.className === 'highlight') << jn;
+      heads |= isHeadCell ? 1n << jn : 0n;
+      highlights |= cell.className === 'highlight' ? 1n << jn : 0n;
+      highlightExtensions |= cell.getAttribute('data-highlight-extension') ? 1n << jn : 0n;
+      highlightLevels[j] = cell.getAttribute('data-highlight-level') ?? '1';
       hasDataCell ||= !isHeadCell;
       if (isHeadCell && !hasDataCell) {
-        lHeadCellIdx = jn;
+        lHeadCellIndex = jn;
       }
       if (isHeadCell && hasDataCell) {
-        rHeadCellIdx ??= jn;
+        rHeadCellIndex ??= jn;
       }
       const rowSpan = cell.rowSpan;
       if (rowSpan > 1 && !isVirtual) {
@@ -5070,6 +5083,8 @@ function format(rows) {
         (0, array_1.splice)(cells, j + 1, 0, ...Array(colSpan - 1));
         heads |= heads & 1n << jn && ~(~0n << BigInt(colSpan)) << jn;
         highlights |= highlights & 1n << jn && ~(~0n << BigInt(colSpan)) << jn;
+        highlightExtensions |= highlightExtensions & 1n << jn && ~(~0n << BigInt(colSpan)) << jn;
+        (0, array_1.splice)(highlightLevels, j + 1, 0, ...Array(colSpan - 1));
         j += colSpan - 1;
       }
       if (target === thead) {
@@ -5104,21 +5119,36 @@ function format(rows) {
     target.appendChild(row);
     switch (target) {
       case thead:
-        verticalHighlights = heads & highlights;
+        verticalHighlightExtensions = highlightExtensions;
+        verticalHighlightLevels = highlightLevels;
         continue;
       case tbody:
-        lHeadCellIdx ??= -1n;
-        rHeadCellIdx ??= -1n;
-        const tHighlights = verticalHighlights;
-        const horizontalHighlights = heads & highlights;
-        const lHighlight = ~lHeadCellIdx && horizontalHighlights & 1n << lHeadCellIdx;
-        const rHighlight = ~rHeadCellIdx && horizontalHighlights & 1n << rHeadCellIdx;
+        lHeadCellIndex ??= -1n;
+        rHeadCellIndex ??= -1n;
+        const tHighlights = verticalHighlightExtensions;
+        const horizontalHighlights = highlightExtensions;
+        const horizontalHighlightLevels = highlightLevels;
+        const lHighlight = ~lHeadCellIndex && horizontalHighlights & 1n << lHeadCellIndex;
+        const rHighlight = ~rHeadCellIndex && horizontalHighlights & 1n << rHeadCellIndex;
         for (let i = 0, m = 1n; i < cells.length; ++i, m <<= 1n) {
           const cell = cells[i];
           if (!cell) continue;
           if (heads & m) continue;
-          if (!(lHighlight || rHighlight || tHighlights & m || highlights & m)) continue;
-          cell.classList.add('highlight');
+          switch (m) {
+            case highlights & m:
+              (lHighlight || rHighlight) && cell.setAttribute('data-highlight-level', horizontalHighlightLevels[i]);
+              break;
+            case lHighlight && m:
+            case rHighlight && m:
+              cell.classList.add('highlight');
+              break;
+            case tHighlights & m:
+              cell.classList.add('highlight');
+              +verticalHighlightLevels[i] > 1 && cell.setAttribute('data-highlight-level', verticalHighlightLevels[i]);
+              break;
+            default:
+              continue;
+          }
         }
         continue;
       case tfoot:
@@ -5148,12 +5178,12 @@ const dom_1 = __webpack_require__(3252);
 exports.segment = (0, combinator_1.block)((0, combinator_1.validate)('#', (0, combinator_1.focus)(/^#+[^\S\n]+\S[^\n]*(?:\n#+(?!\S)[^\n]*)*(?:$|\n)/, (0, combinator_1.some)((0, combinator_1.line)(({
   source
 }) => [[source], ''])))));
-exports.heading = (0, combinator_1.block)((0, combinator_1.rewrite)(exports.segment, (0, combinator_1.state)(256 /* State.annotation */ | 128 /* State.reference */ | 64 /* State.index */ | 32 /* State.label */ | 16 /* State.link */ | 8 /* State.media */, (0, combinator_1.line)((0, inline_1.indexee)((0, combinator_1.fmap)((0, combinator_1.union)([(0, combinator_1.open)((0, source_1.str)(/^##+/), (0, visibility_1.visualize)((0, visibility_1.trimBlank)((0, combinator_1.some)((0, combinator_1.union)([inline_1.indexer, inline_1.inline])))), true), (0, combinator_1.open)((0, source_1.str)('#'), (0, combinator_1.state)(2 /* State.autolink */, (0, visibility_1.visualize)((0, visibility_1.trimBlank)((0, combinator_1.some)((0, combinator_1.union)([inline_1.indexer, inline_1.inline]))))), true)]), ([h, ...ns]) => [h.length <= 6 ? (0, dom_1.html)(`h${h.length}`, (0, dom_1.defrag)(ns)) : (0, dom_1.html)(`h6`, {
+exports.heading = (0, combinator_1.block)((0, combinator_1.rewrite)(exports.segment, (0, combinator_1.state)(256 /* State.annotation */ | 128 /* State.reference */ | 64 /* State.index */ | 32 /* State.label */ | 16 /* State.link */ | 8 /* State.media */, (0, combinator_1.line)((0, inline_1.indexee)((0, combinator_1.fmap)((0, combinator_1.union)([(0, combinator_1.open)((0, source_1.str)(/^##+/), (0, visibility_1.visualize)((0, visibility_1.trimBlankStart)((0, combinator_1.some)((0, combinator_1.union)([inline_1.indexer, inline_1.inline])))), true), (0, combinator_1.open)((0, source_1.str)('#'), (0, combinator_1.state)(2 /* State.autolink */, (0, visibility_1.visualize)((0, visibility_1.trimBlankStart)((0, combinator_1.some)((0, combinator_1.union)([inline_1.indexer, inline_1.inline]))))), true)]), ([h, ...ns]) => [h.length <= 6 ? (0, dom_1.html)(`h${h.length}`, (0, visibility_1.trimNodeEnd)((0, dom_1.defrag)(ns))) : (0, dom_1.html)(`h6`, {
   class: 'invalid',
   'data-invalid-syntax': 'heading',
   'data-invalid-type': 'syntax',
   'data-invalid-message': 'Heading level must be up to 6'
-}, (0, dom_1.defrag)(ns))]))))));
+}, (0, visibility_1.trimNodeEnd)((0, dom_1.defrag)(ns)))]))))));
 
 /***/ }),
 
@@ -5384,7 +5414,7 @@ const combinator_1 = __webpack_require__(2087);
 const inline_1 = __webpack_require__(1160);
 const visibility_1 = __webpack_require__(7618);
 const dom_1 = __webpack_require__(3252);
-exports.paragraph = (0, combinator_1.block)((0, combinator_1.fmap)((0, combinator_1.convert)(source => `\r${source}`, (0, visibility_1.visualize)((0, combinator_1.trimEnd)((0, combinator_1.some)((0, combinator_1.union)([inline_1.inline]))))), ns => [(0, dom_1.html)('p', (0, dom_1.defrag)(ns))]));
+exports.paragraph = (0, combinator_1.block)((0, combinator_1.fmap)((0, combinator_1.convert)(source => `\r${source}`, (0, visibility_1.visualize)((0, combinator_1.some)((0, combinator_1.union)([inline_1.inline])))), ns => [(0, dom_1.html)('p', (0, visibility_1.trimNodeEnd)((0, dom_1.defrag)(ns)))]));
 
 /***/ }),
 
@@ -5412,7 +5442,7 @@ const dom_1 = __webpack_require__(3252);
 対象をURLで指定すべき(引用ツリーにルートを追加する)場合はない
 対象と引用は1:N(分割)、N:1(統合)のみ可能、N:N(混合)は不可能
 */
-exports.reply = (0, combinator_1.block)((0, combinator_1.validate)('>', (0, combinator_1.fmap)((0, combinator_1.inits)([(0, combinator_1.some)((0, combinator_1.inits)([cite_1.cite, quote_1.quote])), (0, combinator_1.some)((0, combinator_1.subsequence)([(0, combinator_1.some)(quote_1.quote), (0, combinator_1.fmap)((0, combinator_1.rewrite)((0, combinator_1.some)(source_1.anyline, quote_1.syntax), (0, visibility_1.visualize)((0, combinator_1.trimEnd)((0, combinator_1.some)(inline_1.inline)))), ns => (0, array_1.push)(ns, [(0, dom_1.html)('br')]))]))]), ns => [(0, dom_1.html)('p', (0, dom_1.defrag)((0, array_1.pop)(ns)[0]))])));
+exports.reply = (0, combinator_1.block)((0, combinator_1.validate)('>', (0, combinator_1.fmap)((0, combinator_1.inits)([(0, combinator_1.some)((0, combinator_1.inits)([cite_1.cite, quote_1.quote])), (0, combinator_1.some)((0, combinator_1.subsequence)([(0, combinator_1.some)(quote_1.quote), (0, combinator_1.fmap)((0, combinator_1.rewrite)((0, combinator_1.some)(source_1.anyline, quote_1.syntax), (0, visibility_1.visualize)((0, combinator_1.some)(inline_1.inline))), ns => (0, array_1.push)(ns, [(0, dom_1.html)('br')]))]))]), ns => [(0, dom_1.html)('p', (0, visibility_1.trimNodeEnd)((0, dom_1.defrag)(ns)))])));
 
 /***/ }),
 
@@ -7588,7 +7618,7 @@ exports.stringify = stringify;
 Object.defineProperty(exports, "__esModule", ({
   value: true
 }));
-exports.trimNodeEnd = exports.trimNode = exports.trimBlank = exports.isStartTightNodes = exports.isStartLooseNodes = exports.startTight = exports.startLoose = exports.blankWith = exports.regBlankStart = exports.visualize = void 0;
+exports.trimNodeEnd = exports.trimNode = exports.trimBlankStart = exports.trimBlank = exports.isStartTightNodes = exports.isStartLooseNodes = exports.startTight = exports.startLoose = exports.blankWith = exports.regBlankStart = exports.visualize = void 0;
 const parser_1 = __webpack_require__(6728);
 const combinator_1 = __webpack_require__(2087);
 const htmlentity_1 = __webpack_require__(1562);
@@ -7724,6 +7754,7 @@ exports.trimBlank = trimBlank;
 function trimBlankStart(parser) {
   return (0, combinator_1.convert)((0, memoize_1.reduce)(source => source.replace(exports.regBlankStart, '')), parser);
 }
+exports.trimBlankStart = trimBlankStart;
 function trimBlankEnd(parser) {
   return (0, combinator_1.fmap)(parser, trimNodeEnd);
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "securemark",
-  "version": "0.270.1",
+  "version": "0.271.0",
   "description": "Secure markdown renderer working on browsers for user input data.",
   "private": false,
   "homepage": "https://github.com/falsandtru/securemark",

package/src/parser/block/dlist.ts

@@ -1,9 +1,9 @@
 import { DListParser } from '../block';
-import { union, inits, some, creation, state, block, line, validate, rewrite, open, trimEnd, lazy, fmap } from '../../combinator';
+import { union, inits, some, creation, state, block, line, validate, rewrite, open, lazy, fmap } from '../../combinator';
 import { inline, indexee, indexer } from '../inline';
 import { anyline } from '../source';
 import { State } from '../context';
-import { visualize, trimBlank } from '../visibility';
+import { visualize, trimBlankStart, trimNodeEnd } from '../visibility';
 import { push } from 'spica/array';
 import { html, defrag } from 'typed-dom/dom';
 
@@ -18,17 +18,17 @@ export const dlist: DListParser = lazy(() => block(fmap(validate(
 
 const term: DListParser.TermParser = creation(1, false, line(indexee(fmap(open(
   /^~[^\S\n]+(?=\S)/,
-  visualize(trimBlank(some(union([indexer, inline])))),
+  visualize(trimBlankStart(some(union([indexer, inline])))),
   true),
-  ns => [html('dt', defrag(ns))]))));
+  ns => [html('dt', trimNodeEnd(defrag(ns)))]))));
 
 const desc: DListParser.DescriptionParser = creation(1, false, block(fmap(open(
   /^:[^\S\n]+(?=\S)|/,
   rewrite(
     some(anyline, /^[~:][^\S\n]+\S/),
-    visualize(trimEnd(some(union([inline]))))),
+    visualize(some(union([inline])))),
   true),
-  ns => [html('dd', defrag(ns))]),
+  ns => [html('dd', trimNodeEnd(defrag(ns)))]),
   false));
 
 function fillTrailingDescription(es: HTMLElement[]): HTMLElement[] {

package/src/parser/block/extension/figure.ts

@@ -1,5 +1,5 @@
 import { ExtensionParser } from '../../block';
-import { union, inits, sequence, some, state, block, line, fence, rewrite, close, match, convert, trimEnd, fallback, fmap } from '../../../combinator';
+import { union, inits, sequence, some, state, block, line, fence, rewrite, close, match, convert, fallback, fmap } from '../../../combinator';
 import { str, contentline, emptyline } from '../../source';
 import { label, segment as seg_label } from '../../inline/extension/label';
 import { ulist } from '../ulist';
@@ -13,7 +13,7 @@ import { blockquote, segment as seg_blockquote } from '../blockquote';
 import { placeholder, segment_ as seg_placeholder } from './placeholder';
 import { inline, media, shortmedia } from '../../inline';
 import { State } from '../../context';
-import { visualize, trimBlank } from '../../visibility';
+import { visualize, trimBlankStart, trimNodeEnd } from '../../visibility';
 import { memoize } from 'spica/memoize';
 import { html, defrag } from 'typed-dom/dom';
 
@@ -66,7 +66,7 @@ export const figure: FigureParser = block(fallback(rewrite(segment, fmap(
       emptyline,
       block(
         state(State.media,
-        visualize(trimBlank(trimEnd(some(inline)))))),
+        visualize(trimBlankStart(some(inline))))),
     ]),
   ])),
   ([label, param, content, ...caption]: [HTMLAnchorElement, string, ...HTMLElement[]]) => [
@@ -75,7 +75,7 @@ export const figure: FigureParser = block(fallback(rewrite(segment, fmap(
       [
         html('figcaption', [
           html('span', { class: 'figindex' }),
-          html('span', { class: 'figtext' }, defrag(caption)),
+          html('span', { class: 'figtext' }, trimNodeEnd(defrag(caption))),
         ]),
         html('div', [content]),
       ])

package/src/parser/block/extension/table.test.ts

@@ -296,7 +296,7 @@ describe('Unit: parser/block/extension/table', () => {
           html('tbody', [
             html('tr', [
               html('th', { class: 'highlight' }, '1.1'),
-              html('td', { class: 'highlight', highlight: 'h' }, '1.2'),
+              html('td', '1.2'),
             ]),
           ]),
           html('tfoot'),
@@ -307,7 +307,7 @@ describe('Unit: parser/block/extension/table', () => {
           html('thead'),
           html('tbody', [
             html('tr', [
-              html('td', { class: 'highlight', highlight: 'h' }, '1.1'),
+              html('td', '1.1'),
               html('th', { class: 'highlight' }, '1.2'),
             ]),
           ]),
@@ -319,18 +319,40 @@ describe('Unit: parser/block/extension/table', () => {
           html('thead', [
             html('tr', [html('th', { class: 'highlight' }, '1.1')]),
           ]),
+          html('tbody', [
+            html('tr', [html('td', '2.1')]),
+          ]),
+          html('tfoot'),
+        ]).outerHTML], '']);
+      assert.deepStrictEqual(
+        inspect(parser('~~~table\n#! 1.1\n-\n:!+ 2.1\n~~~')),
+        [[html('table', [
+          html('thead', [
+            html('tr', [html('th', { class: 'highlight' }, '1.1')]),
+          ]),
+          html('tbody', [
+            html('tr', [html('td', { class: 'invalid' }, '2.1')]),
+          ]),
+          html('tfoot'),
+        ]).outerHTML], '']);
+      assert.deepStrictEqual(
+        inspect(parser('~~~table\n#!+ 1.1\n-\n: 2.1\n~~~')),
+        [[html('table', [
+          html('thead', [
+            html('tr', [html('th', { class: 'highlight', 'data-highlight-extension': '+' }, '1.1')]),
+          ]),
           html('tbody', [
             html('tr', [html('td', { class: 'highlight', highlight: 'v' }, '2.1')]),
           ]),
           html('tfoot'),
         ]).outerHTML], '']);
       assert.deepStrictEqual(
-        inspect(parser('~~~table\n#! 1.1\n# 1.2\n: 1.3\n~~~')),
+        inspect(parser('~~~table\n#!+ 1.1\n# 1.2\n: 1.3\n~~~')),
         [[html('table', [
           html('thead'),
           html('tbody', [
             html('tr', [
-              html('th', { class: 'highlight' }, '1.1'),
+              html('th', { class: 'highlight', 'data-highlight-extension': '+' }, '1.1'),
               html('th', '1.2'),
               html('td', '1.3'),
             ]),
@@ -338,23 +360,23 @@ describe('Unit: parser/block/extension/table', () => {
           html('tfoot'),
         ]).outerHTML], '']);
       assert.deepStrictEqual(
-        inspect(parser('~~~table\n: 1.1\n# 1.2\n#! 1.3\n~~~')),
+        inspect(parser('~~~table\n: 1.1\n# 1.2\n#!+ 1.3\n~~~')),
         [[html('table', [
           html('thead'),
           html('tbody', [
             html('tr', [
               html('td', '1.1'),
               html('th', '1.2'),
-              html('th', { class: 'highlight' }, '1.3'),
+              html('th', { class: 'highlight', 'data-highlight-extension': '+' }, '1.3'),
             ]),
           ]),
           html('tfoot'),
         ]).outerHTML], '']);
       assert.deepStrictEqual(
-        inspect(parser('~~~table\n#! 1.1\n-\n# 2.1\n-\n: 3.1\n~~~')),
+        inspect(parser('~~~table\n#!+ 1.1\n-\n# 2.1\n-\n: 3.1\n~~~')),
         [[html('table', [
           html('thead', [
-            html('tr', [html('th', { class: 'highlight' }, '1.1')]),
+            html('tr', [html('th', { class: 'highlight', 'data-highlight-extension': '+' }, '1.1')]),
             html('tr', [html('th', '2.1')]),
           ]),
           html('tbody', [
@@ -363,22 +385,22 @@ describe('Unit: parser/block/extension/table', () => {
           html('tfoot'),
         ]).outerHTML], '']);
       assert.deepStrictEqual(
-        inspect(parser('~~~table\n#:2! 1.1\n: 1.3\n~~~')),
+        inspect(parser('~~~table\n#:2!+ 1.1\n: 1.3\n~~~')),
         [[html('table', [
           html('thead'),
           html('tbody', [
             html('tr', [
-              html('th', { class: 'highlight', colspan: '2' }, '1.1'),
+              html('th', { class: 'highlight', colspan: '2', 'data-highlight-extension': '+' }, '1.1'),
               html('td', { class: 'highlight', highlight: 'h' }, '1.3'),
             ]),
           ]),
           html('tfoot'),
         ]).outerHTML], '']);
       assert.deepStrictEqual(
-        inspect(parser('~~~table\n#2:! 1.1\n-\n: 3.1\n~~~')),
+        inspect(parser('~~~table\n#2:!+ 1.1\n-\n: 3.1\n~~~')),
         [[html('table', [
           html('thead', [
-            html('tr', [html('th', { class: 'highlight', rowspan: '2' }, '1.1')]),
+            html('tr', [html('th', { class: 'highlight', rowspan: '2', 'data-highlight-extension': '+' }, '1.1')]),
           ]),
           html('tbody', [
             html('tr', [html('td', { class: 'highlight', highlight: 'v' }, '3.1')]),
@@ -386,46 +408,46 @@ describe('Unit: parser/block/extension/table', () => {
           html('tfoot'),
         ]).outerHTML], '']);
       assert.deepStrictEqual(
-        inspect(parser('~~~table\n-\n# \n#! 1.2\n-\n#! 2.1\n: 2.2\n~~~')),
+        inspect(parser('~~~table\n-\n# \n#!+ 1.2\n-\n#!+ 2.1\n: 2.2\n~~~')),
         [[html('table', [
           html('thead', [
             html('tr', [
               html('th'),
-              html('th', { class: 'highlight' }, '1.2'),
+              html('th', { class: 'highlight', 'data-highlight-extension': '+' }, '1.2'),
             ]),
           ]),
           html('tbody', [
             html('tr', [
-              html('th', { class: 'highlight' }, '2.1'),
+              html('th', { class: 'highlight', 'data-highlight-extension': '+' }, '2.1'),
               html('td', { class: 'highlight', highlight: 'v h' }, '2.2'),
             ]),
           ]),
           html('tfoot'),
         ]).outerHTML], '']);
       assert.deepStrictEqual(
-        inspect(parser('~~~table\n-\n# \n#! 1.2\n-\n#! 2.1\n:! 2.2\n~~~')),
+        inspect(parser('~~~table\n-\n# \n#!+ 1.2\n-\n#!+ 2.1\n:! 2.2\n~~~')),
         [[html('table', [
           html('thead', [
             html('tr', [
               html('th'),
-              html('th', { class: 'highlight' }, '1.2'),
+              html('th', { class: 'highlight', 'data-highlight-extension': '+' }, '1.2'),
             ]),
           ]),
           html('tbody', [
             html('tr', [
-              html('th', { class: 'highlight' }, '2.1'),
-              html('td', { class: 'highlight', highlight: 'v h c' }, '2.2'),
+              html('th', { class: 'highlight', 'data-highlight-extension': '+' }, '2.1'),
+              html('td', { class: 'highlight', 'data-highlight-level': '1', highlight: 'v h c' }, '2.2'),
             ]),
           ]),
           html('tfoot'),
         ]).outerHTML], '']);
       assert.deepStrictEqual(
-        inspect(parser('~~~table\n-\n# 1.1\n#! 1.2\n-\n# 2.1\n:2:2 2.2\n: 2.4\n-\n#! 3.1\n: 3.4\n-\n# 4.1\n: 4.2\n~~~')),
+        inspect(parser('~~~table\n-\n# 1.1\n#!+ 1.2\n-\n# 2.1\n:2:2 2.2\n: 2.4\n-\n#!+ 3.1\n: 3.4\n-\n# 4.1\n: 4.2\n~~~')),
         [[html('table', [
           html('thead', [
             html('tr', [
               html('th', '1.1'),
-              html('th', { class: 'highlight' }, '1.2'),
+              html('th', { class: 'highlight', 'data-highlight-extension': '+' }, '1.2'),
             ]),
           ]),
           html('tbody', [
@@ -435,7 +457,7 @@ describe('Unit: parser/block/extension/table', () => {
               html('td', '2.4'),
             ]),
             html('tr', [
-              html('th', { class: 'highlight' }, '3.1'),
+              html('th', { class: 'highlight', 'data-highlight-extension': '+' }, '3.1'),
               html('td', { class: 'highlight', highlight: 'h' }, '3.4'),
             ]),
             html('tr', [
@@ -446,17 +468,17 @@ describe('Unit: parser/block/extension/table', () => {
           html('tfoot'),
         ]).outerHTML], '']);
       assert.deepStrictEqual(
-        inspect(parser('~~~table\n-\n# 1.1\n#:2! 1.2\n-\n#2:! 2.1\n: 2.2\n-\n3.2\n3.3\n~~~')),
+        inspect(parser('~~~table\n-\n# 1.1\n#:2!+ 1.2\n-\n#2:!+ 2.1\n: 2.2\n-\n3.2\n3.3\n~~~')),
         [[html('table', [
           html('thead', [
             html('tr', [
               html('th', '1.1'),
-              html('th', { class: 'highlight', colspan: '2' }, '1.2'),
+              html('th', { class: 'highlight', colspan: '2', 'data-highlight-extension': '+' }, '1.2'),
             ]),
           ]),
           html('tbody', [
             html('tr', [
-              html('th', { class: 'highlight', rowspan: '2' }, '2.1'),
+              html('th', { class: 'highlight', rowspan: '2', 'data-highlight-extension': '+' }, '2.1'),
               html('td', { class: 'highlight', highlight: 'v h' }, '2.2'),
             ]),
             html('tr', [
@@ -470,7 +492,7 @@ describe('Unit: parser/block/extension/table', () => {
         inspect(parser([
           '~~~table',
           `-\n#  1\n${[...Array(32)].map((_, i) => `: ${i + 2}`).join('\n')}`,
-          `-\n#! 1\n${[...Array(32)].map((_, i) => `: ${i + 2}`).join('\n')}`,
+          `-\n#!+ 1\n${[...Array(32)].map((_, i) => `: ${i + 2}`).join('\n')}`,
           '~~~'
         ].join('\n'))),
         [[html('table', [
@@ -481,7 +503,7 @@ describe('Unit: parser/block/extension/table', () => {
               ...[...Array(32)].map((_, i) => html('td', `${i + 2}`)),
             ]),
             html('tr', [
-              html('th', { class: 'highlight' }, '1'),
+              html('th', { class: 'highlight', 'data-highlight-extension': '+' }, '1'),
               ...[...Array(32)].map((_, i) => html('td', { class: 'highlight', highlight: 'h' }, `${i + 2}`)),
             ]),
           ]),
@@ -490,7 +512,7 @@ describe('Unit: parser/block/extension/table', () => {
         inspect(parser([
           '~~~table',
           `-\n${[...Array(32)].map((_, i) => `: ${i + 1}`).join('\n')}\n#  33`,
-          `-\n${[...Array(32)].map((_, i) => `: ${i + 1}`).join('\n')}\n#! 33`,
+          `-\n${[...Array(32)].map((_, i) => `: ${i + 1}`).join('\n')}\n#!+ 33`,
           '~~~'
         ].join('\n'))),
         [[html('table', [
@@ -502,14 +524,14 @@ describe('Unit: parser/block/extension/table', () => {
             ]),
             html('tr', [
               ...[...Array(32)].map((_, i) => html('td', { class: 'highlight', highlight: 'h' }, `${i + 1}`)),
-              html('th', { class: 'highlight' }, '33'),
+              html('th', { class: 'highlight', 'data-highlight-extension': '+' }, '33'),
             ]),
           ]),
           html('tfoot')]).outerHTML], '']);
       assert.deepStrictEqual(
         inspect(parser([
           '~~~table',
-          `-\n${[...Array(32)].map((_, i) => `# ${i + 1}`).join('\n')}\n#! 33`,
+          `-\n${[...Array(32)].map((_, i) => `# ${i + 1}`).join('\n')}\n#!+ 33`,
           `-\n${[...Array(33)].map((_, i) => `: ${i + 1}`).join('\n')}`,
           '~~~'
         ].join('\n'))),
@@ -517,7 +539,7 @@ describe('Unit: parser/block/extension/table', () => {
           html('thead', [
             html('tr', [
               ...[...Array(32)].map((_, i) => html('th', `${i + 1}`)),
-              html('th', { class: 'highlight' }, '33'),
+              html('th', { class: 'highlight', 'data-highlight-extension': '+' }, '33'),
             ]),
           ]),
           html('tbody', [
@@ -537,7 +559,8 @@ describe('Unit: parser/block/extension/table', () => {
           html('thead', [
             html('tr', [
               html('th', { class: 'highlight' }, '1'),
-              ...[...Array(6)].map((_, i) => html('th', { class: 'invalid' }, `${i + 2}`)),
+              ...[...Array(5)].map((_, i) => html('th', { class: 'highlight', 'data-highlight-level': `${i + 2}` }, `${i + 2}`)),
+              html('th', { class: 'invalid' }, '7'),
             ]),
           ]),
           html('tbody'),
@@ -561,14 +584,14 @@ describe('Unit: parser/block/extension/table', () => {
           html('tfoot'),
         ]).outerHTML], '']);
       assert.deepStrictEqual(
-        inspect(parser('~~~table\n#! 1\n: 2\n:! 3\n~~~')),
+        inspect(parser('~~~table\n#!+ 1\n: 2\n:! 3\n~~~')),
         [[html('table', [
           html('thead'),
           html('tbody', [
             html('tr', [
-              html('th', { class: 'highlight' }, '1'),
+              html('th', { class: 'highlight', 'data-highlight-extension': '+' }, '1'),
               html('td', { class: 'highlight', highlight: 'h' }, '2'),
-              html('td', { class: 'highlight', highlight: 'h c' }, '3'),
+              html('td', { class: 'highlight', 'data-highlight-level': '1', highlight: 'h c' }, '3'),
             ]),
           ]),
           html('tfoot'),

package/src/parser/block/extension/table.ts

@@ -75,10 +75,10 @@ const align: AlignParser = line(fmap(
   union([str(alignment)]),
   ([s]) => s.split('/').map(s => s.split(''))));
 
-const delimiter = /^[-=<>]+(?:\/[-=^v]*)?(?=[^\S\n]*\n)|^[#:](?:(?!:\D|0)\d*:(?!0)\d*)?!*(?=\s)/;
+const delimiter = /^[-=<>]+(?:\/[-=^v]*)?(?=[^\S\n]*\n)|^[#:](?:(?!:\D|0)\d*:(?!0)\d*)?(?:!+[+]?)?(?=\s)/;
 
 const head: CellParser.HeadParser = creation(1, false, block(fmap(open(
-  str(/^#(?:(?!:\D|0)\d*:(?!0)\d*)?!*(?=\s)/),
+  str(/^#(?:(?!:\D|0)\d*:(?!0)\d*)?(?:!+[+]?)?(?=\s)/),
   rewrite(
     inits([
       anyline,
@@ -90,7 +90,7 @@ const head: CellParser.HeadParser = creation(1, false, block(fmap(open(
   false));
 
 const data: CellParser.DataParser = creation(1, false, block(fmap(open(
-  str(/^:(?:(?!:\D|0)\d*:(?!0)\d*)?!*(?=\s)/),
+  str(/^:(?:(?!:\D|0)\d*:(?!0)\d*)?(?:!+[+]?)?(?=\s)/),
   rewrite(
     inits([
       anyline,
@@ -110,28 +110,40 @@ const dataline: CellParser.DatalineParser = creation(1, false, line(
     ]))));
 
 function attributes(source: string) {
-  let [, rowspan = undefined, colspan = undefined, highlight = undefined] = source.match(/^.(?:(\d+)?:(\d+)?)?(!+)?$/) ?? [];
+  let [, rowspan = undefined, colspan = undefined, highlight = undefined, extension = undefined] =
+    source.match(/^[#:](?:(\d+)?:(\d+)?)?(?:(!+)([+]?))?$/) ?? [];
   assert(rowspan?.[0] !== '0');
   assert(colspan?.[0] !== '0');
   rowspan === '1' ? rowspan = undefined : undefined;
   colspan === '1' ? colspan = undefined : undefined;
   rowspan &&= `${max(0, min(+rowspan, 65534))}`;
   colspan &&= `${max(0, min(+colspan, 1000))}`;
-  highlight &&= highlight.length > 0 ? `${highlight.length}` : undefined;
-  const valid = !highlight
-    || source[0] === '#' && +highlight <= 1
-    || source[0] === ':' && +highlight <= 6;
+  extension ||= undefined;
+  const level = highlight?.length ?? 0;
+  const validH = !highlight
+    || source[0] === '#' && level <= 6
+    || source[0] === ':' && level <= 6;
+  const validE = source[0] === '#' || extension !== '+';
+  const valid = validH && validE;
   return {
     class: valid ? highlight && 'highlight' : 'invalid',
     rowspan,
     colspan,
-    ...valid
-      ? { 'data-highlight-level': +highlight! > 1 ? highlight : undefined }
-      : {
-          'data-invalid-syntax': 'table',
-          'data-invalid-type': 'syntax',
-          'data-invalid-message': 'Too much highlight level',
-        },
+    ...
+    !validH && {
+      'data-invalid-syntax': 'table',
+      'data-invalid-type': 'syntax',
+      'data-invalid-message': 'Too much highlight level',
+    } ||
+    !validE && {
+      'data-invalid-syntax': 'table',
+      'data-invalid-type': 'syntax',
+      'data-invalid-message': 'Extensible cells are only head cells',
+    } ||
+    {
+      'data-highlight-level': level > 1 ? `${level}` : undefined,
+      'data-highlight-extension': extension,
+    },
   };
 }
 
@@ -143,7 +155,8 @@ function format(rows: Tree<RowParser>[]): HTMLTableSectionElement[] {
   const valigns: ('middle' | 'top' | 'bottom' | '')[] = [];
   let target = thead;
   let ranges: Record<number, Record<number, HTMLTableCellElement>> = {};
-  let verticalHighlights = 0n;
+  let verticalHighlightExtensions = 0n;
+  let verticalHighlightLevels: string[] = [];
   ROW:
   for (let i = 0; i < rows.length; ++i) {
     // Copy to make them retryable.
@@ -215,9 +228,11 @@ function format(rows: Tree<RowParser>[]): HTMLTableSectionElement[] {
     const row = html('tr');
     let heads = 0n;
     let highlights = 0n;
+    let highlightExtensions = 0n;
+    let highlightLevels: string[] = [];
     let hasDataCell = false;
-    let lHeadCellIdx: bigint;
-    let rHeadCellIdx: bigint;
+    let lHeadCellIndex: bigint;
+    let rHeadCellIndex: bigint;
     for (let j = 0; j < cells.length; ++j) {
       const jn = BigInt(j);
       const isVirtual = !!ranges[i]?.[j];
@@ -225,14 +240,16 @@ function format(rows: Tree<RowParser>[]): HTMLTableSectionElement[] {
         ? splice(cells, j, 0, undefined) && ranges[i][j]
         : cells[j];
       const isHeadCell = cell.tagName === 'TH';
-      heads |= BigInt(isHeadCell) << jn;
-      highlights |= BigInt(cell.className === 'highlight') << jn;
+      heads |= isHeadCell ? 1n << jn : 0n;
+      highlights |= cell.className === 'highlight' ? 1n << jn : 0n;
+      highlightExtensions |= cell.getAttribute('data-highlight-extension') ? 1n << jn : 0n;
+      highlightLevels[j] = cell.getAttribute('data-highlight-level') ?? '1';
       hasDataCell ||= !isHeadCell;
       if (isHeadCell && !hasDataCell) {
-        lHeadCellIdx = jn;
+        lHeadCellIndex = jn;
       }
       if (isHeadCell && hasDataCell) {
-        rHeadCellIdx ??= jn;
+        rHeadCellIndex ??= jn;
       }
       const rowSpan = cell.rowSpan;
       assert(rowSpan > 0);
@@ -249,6 +266,8 @@ function format(rows: Tree<RowParser>[]): HTMLTableSectionElement[] {
         splice(cells, j + 1, 0, ...Array(colSpan - 1));
         heads |= heads & 1n << jn && ~(~0n << BigInt(colSpan)) << jn;
         highlights |= highlights & 1n << jn && ~(~0n << BigInt(colSpan)) << jn;
+        highlightExtensions |= highlightExtensions & 1n << jn && ~(~0n << BigInt(colSpan)) << jn;
+        splice(highlightLevels, j + 1, 0, ...Array(colSpan - 1));
         j += colSpan - 1;
       }
       if (target === thead) {
@@ -285,22 +304,39 @@ function format(rows: Tree<RowParser>[]): HTMLTableSectionElement[] {
     target.appendChild(row);
     switch (target) {
       case thead:
-        verticalHighlights = heads & highlights;
+        verticalHighlightExtensions = highlightExtensions;
+        verticalHighlightLevels = highlightLevels;
         continue;
       case tbody:
-        lHeadCellIdx ??= -1n;
-        rHeadCellIdx ??= -1n;
-        const tHighlights = verticalHighlights;
-        const horizontalHighlights = heads & highlights;
-        const lHighlight = ~lHeadCellIdx && horizontalHighlights & 1n << lHeadCellIdx;
-        const rHighlight = ~rHeadCellIdx && horizontalHighlights & 1n << rHeadCellIdx;
+        lHeadCellIndex ??= -1n;
+        rHeadCellIndex ??= -1n;
+        const tHighlights = verticalHighlightExtensions;
+        const horizontalHighlights = highlightExtensions;
+        const horizontalHighlightLevels = highlightLevels;
+        const lHighlight = ~lHeadCellIndex && horizontalHighlights & 1n << lHeadCellIndex;
+        const rHighlight = ~rHeadCellIndex && horizontalHighlights & 1n << rHeadCellIndex;
         for (let i = 0, m = 1n; i < cells.length; ++i, m <<= 1n) {
           const cell = cells[i];
           if (!cell) continue;
           if (heads & m) continue;
           assert(cell.tagName === 'TD');
-          if (!(lHighlight || rHighlight || tHighlights & m || highlights & m)) continue;
-          cell.classList.add('highlight');
+          switch (m) {
+            case highlights & m:
+              assert(cell.className === 'highlight');
+              assert(horizontalHighlightLevels[i]);
+              (lHighlight || rHighlight) && cell.setAttribute('data-highlight-level', horizontalHighlightLevels[i]);
+              break;
+            case lHighlight && m:
+            case rHighlight && m:
+              cell.classList.add('highlight');
+              break;
+            case tHighlights & m:
+              cell.classList.add('highlight');
+              +verticalHighlightLevels[i] > 1 && cell.setAttribute('data-highlight-level', verticalHighlightLevels[i]);
+              break;
+            default:
+              continue;
+          }
           assert(!+cell.setAttribute('highlight', [
             '',
             'c',

package/src/parser/block/heading.ts

@@ -3,7 +3,7 @@ import { union, some, state, block, line, validate, focus, rewrite, open, fmap }
 import { inline, indexee, indexer } from '../inline';
 import { str } from '../source';
 import { State } from '../context';
-import { visualize, trimBlank } from '../visibility';
+import { visualize, trimBlankStart, trimNodeEnd } from '../visibility';
 import { html, defrag } from 'typed-dom/dom';
 
 export const segment: HeadingParser.SegmentParser = block(validate('#', focus(
@@ -15,19 +15,19 @@ export const heading: HeadingParser = block(rewrite(segment,
   line(indexee(fmap(union([
     open(
       str(/^##+/),
-      visualize(trimBlank(some(union([indexer, inline])))), true),
+      visualize(trimBlankStart(some(union([indexer, inline])))), true),
     open(
       str('#'),
       state(State.autolink,
-      visualize(trimBlank(some(union([indexer, inline]))))), true),
+      visualize(trimBlankStart(some(union([indexer, inline]))))), true),
   ]),
   ([h, ...ns]: [string, ...(HTMLElement | string)[]]) => [
     h.length <= 6
-      ? html(`h${h.length as 1}`, defrag(ns))
+      ? html(`h${h.length as 1}`, trimNodeEnd(defrag(ns)))
       : html(`h6`, {
           class: 'invalid',
           'data-invalid-syntax': 'heading',
           'data-invalid-type': 'syntax',
           'data-invalid-message': 'Heading level must be up to 6',
-        }, defrag(ns))
+        }, trimNodeEnd(defrag(ns)))
   ]))))));

package/src/parser/block/paragraph.ts

@@ -1,10 +1,10 @@
 import { ParagraphParser } from '../block';
-import { union, some, block, convert, trimEnd, fmap } from '../../combinator';
+import { union, some, block, convert, fmap } from '../../combinator';
 import { inline } from '../inline';
-import { visualize } from '../visibility';
+import { visualize, trimNodeEnd } from '../visibility';
 import { html, defrag } from 'typed-dom/dom';
 
 export const paragraph: ParagraphParser = block(fmap(
   convert(source => `\r${source}`,
-  visualize(trimEnd(some(union([inline]))))),
-  ns => [html('p', defrag(ns))]));
+  visualize(some(union([inline])))),
+  ns => [html('p', trimNodeEnd(defrag(ns)))]));

package/src/parser/block/reply.ts

@@ -1,11 +1,11 @@
 import { ReplyParser } from '../block';
-import { inits, subsequence, some, block, validate, rewrite, trimEnd, fmap } from '../../combinator';
+import { inits, subsequence, some, block, validate, rewrite, fmap } from '../../combinator';
 import { cite } from './reply/cite';
 import { quote, syntax as delimiter } from './reply/quote';
 import { inline } from '../inline';
 import { anyline } from '../source';
-import { visualize } from '../visibility';
-import { push, pop } from 'spica/array';
+import { visualize, trimNodeEnd } from '../visibility';
+import { push } from 'spica/array';
 import { html, defrag } from 'typed-dom/dom';
 
 /*
@@ -25,8 +25,8 @@ export const reply: ReplyParser = block(validate('>', fmap(
       some(quote),
       fmap(rewrite(
         some(anyline, delimiter),
-        visualize(trimEnd(some(inline)))),
+        visualize(some(inline))),
         ns => push(ns, [html('br')])),
     ])),
   ]),
-  ns => [html('p', defrag(pop(ns)[0]))])));
+  ns => [html('p', trimNodeEnd(defrag(ns)))])));

package/src/parser/visibility.ts

@@ -146,12 +146,13 @@ function isVisible(node: HTMLElement | string, strpos?: number): boolean {
   }
 }
 
+// デフラグ前の非効率な後方トリムを避けるため必要のない限りtrimBlankStart+trimNodeEndで処理する。
 export function trimBlank<P extends Parser<HTMLElement | string>>(parser: P): P;
 export function trimBlank<T extends HTMLElement | string>(parser: Parser<T>): Parser<T> {
   return trimBlankStart(trimBlankEnd(parser));
 }
-function trimBlankStart<P extends Parser<unknown>>(parser: P): P;
-function trimBlankStart<T>(parser: Parser<T>): Parser<T> {
+export function trimBlankStart<P extends Parser<unknown>>(parser: P): P;
+export function trimBlankStart<T>(parser: Parser<T>): Parser<T> {
   return convert(
     reduce(source => source.replace(regBlankStart, '')),
     parser);