securemark 0.270.2 → 0.272.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "securemark",
-  "version": "0.270.2",
+  "version": "0.272.0",
   "description": "Secure markdown renderer working on browsers for user input data.",
   "private": false,
   "homepage": "https://github.com/falsandtru/securemark",
@@ -28,35 +28,35 @@
     "LICENSE"
   ],
   "devDependencies": {
-    "@types/dompurify": "3.0.0",
+    "@types/dompurify": "3.0.2",
     "@types/jquery": "3.5.16",
     "@types/mathjax": "0.0.37",
     "@types/mocha": "10.0.1",
     "@types/power-assert": "1.5.8",
     "@types/prismjs": "1.26.0",
-    "@typescript-eslint/parser": "^5.55.0",
+    "@typescript-eslint/parser": "^5.59.0",
     "babel-loader": "^9.1.2",
     "babel-plugin-unassert": "^3.2.0",
-    "concurrently": "^7.6.0",
-    "eslint": "^8.36.0",
+    "concurrently": "^8.0.1",
+    "eslint": "^8.39.0",
     "eslint-plugin-redos": "^4.4.5",
-    "eslint-webpack-plugin": "^4.0.0",
-    "glob": "^8.1.0",
-    "karma": "^6.4.1",
-    "karma-chrome-launcher": "^3.1.1",
+    "eslint-webpack-plugin": "^4.0.1",
+    "glob": "^10.2.1",
+    "karma": "^6.4.2",
+    "karma-chrome-launcher": "^3.2.0",
     "karma-coverage": "^2.2.0",
     "karma-firefox-launcher": "^2.1.2",
     "karma-mocha": "^2.0.1",
     "karma-power-assert": "^1.0.0",
     "mocha": "^10.2.0",
-    "npm-check-updates": "^16.7.12",
-    "semver": "^7.3.8",
-    "spica": "0.0.719",
+    "npm-check-updates": "^16.10.9",
+    "semver": "^7.5.0",
+    "spica": "0.0.721",
     "ts-loader": "^9.4.2",
-    "typed-dom": "^0.0.317",
-    "typescript": "4.9.5",
-    "webpack": "^5.76.1",
-    "webpack-cli": "^5.0.1",
+    "typed-dom": "^0.0.330",
+    "typescript": "5.0.4",
+    "webpack": "^5.80.0",
+    "webpack-cli": "^5.0.2",
     "webpack-merge": "^5.8.0"
   },
   "scripts": {

package/src/parser/api/bind.test.ts

@@ -214,15 +214,15 @@ describe('Unit: parser/api/bind', () => {
         cfgs.footnotes.references?.outerHTML,
         html('ol', [
           html('li', { id: 'reference::def:1' }, [
-            html('span', { id: 'note::1' }, '1'),
+            html('span', '1'),
             html('sup', [html('a', { href: '#reference::ref:1' }, '^1')]),
           ]),
           html('li', { id: 'reference::def:2' }, [
-            html('span', { id: 'note::2' }, '2'),
+            html('span', '2'),
             html('sup', [html('a', { href: '#reference::ref:2' }, '^2')]),
           ]),
           html('li', { id: 'reference::def:3' }, [
-            html('span', { id: 'note::3' }, '3'),
+            html('span', '3'),
             html('sup', [html('a', { href: '#reference::ref:3' }, '^3')]),
           ]),
         ]).outerHTML);

package/src/parser/api/parse.test.ts

@@ -124,7 +124,7 @@ describe('Unit: parser/api/parse', () => {
           '<p><a class="index" href="#index::a">a</a></p>',
           '<figure data-type="math" data-label="$-a" data-group="$" data-number="1" id="label:$-a"><figcaption><span class="figindex">(1)</span><span class="figtext"></span></figcaption><div><div class="math" translate="no">$$\n$$</div></div></figure>',
           '<p><a class="label" data-label="$-a" href="#label:$-a">(1)</a></p>',
-          '<p><sup class="annotation" id="annotation::ref:1" title="a"><span hidden="">a</span><a href="#annotation::def:1">*1</a></sup></p>',
+          '<p><sup class="annotation" id="annotation::ref:1" title="a"><span hidden="">a</span><a href="#annotation::def:a">*1</a></sup></p>',
           '<p><a class="url" href="https://source/x/a" target="_blank">a</a></p>',
           '<p><a class="url" href="https://source/a" target="_blank">/a</a></p>',
           '<p><a class="url" href="/z/a">^/a</a></p>',
@@ -135,7 +135,7 @@ describe('Unit: parser/api/parse', () => {
           '<p><a href="https://source/x/a" target="_blank"><img class="media" data-src="https://source/x/a" alt=""></a></p>',
           '<p><a href="/z/a" target="_blank"><img class="media" data-src="/z/a" alt=""></a></p>',
           '<p><a href="https://source/a" target="_blank"><img class="media" data-src="https://source/a" alt=""></a></p>',
-          '<ol class="annotations"><li id="annotation::def:1" data-marker="*1"><span id="note::a">a</span><sup><a href="#annotation::ref:1">^1</a></sup></li></ol>',
+          '<ol class="annotations"><li id="annotation::def:a" data-marker="*1"><span>a</span><sup><a href="#annotation::ref:1">^1</a></sup></li></ol>',
         ]);
       assert.deepStrictEqual(
         [...parse([
@@ -207,12 +207,12 @@ describe('Unit: parser/api/parse', () => {
         [...parse('$-a\n$$\n$$\n\n(($-a[[b]][[c_d_]]))', { footnotes }).children].map(el => el.outerHTML),
         [
           '<figure data-type="math" data-label="$-a" data-group="$" data-number="1" id="label:$-a"><figcaption><span class="figindex">(1)</span><span class="figtext"></span></figcaption><div><div class="math" translate="no">$$\n$$</div></div></figure>',
-          '<p><sup class="annotation" id="annotation::ref:1" title="(1)"><span hidden=""><a class="label" data-label="$-a" href="#label:$-a">(1)</a><sup class="reference" id="reference::ref:1" title="b"><span hidden="">b</span><a href="#reference::def:1">[1]</a></sup><sup class="reference" id="reference::ref:2" title="cd"><span hidden="">c<em>d</em></span><a href="#reference::def:2">[2]</a></sup></span><a href="#annotation::def:1">*1</a></sup></p>',
-          '<ol class="annotations"><li id="annotation::def:1" data-marker="*1"><span id="note::(1)"><a class="label" data-label="$-a" href="#label:$-a">(1)</a><sup class="reference" id="reference::ref:1" title="b"><span hidden="">b</span><a href="#reference::def:1">[1]</a></sup><sup class="reference" id="reference::ref:2" title="cd"><span hidden="">c<em>d</em></span><a href="#reference::def:2">[2]</a></sup></span><sup><a href="#annotation::ref:1">^1</a></sup></li></ol>',
+          '<p><sup class="annotation" id="annotation::ref:1" title="(1)"><span hidden=""><a class="label" data-label="$-a" href="#label:$-a">(1)</a><sup class="reference"><span>b</span></sup><sup class="reference"><span>c<em>d</em></span></sup></span><a href="#annotation::def:(1)">*1</a></sup></p>',
+          '<ol class="annotations"><li id="annotation::def:(1)" data-marker="*1"><span><a class="label" data-label="$-a" href="#label:$-a">(1)</a><sup class="reference" id="reference::ref:1" title="b"><span hidden="">b</span><a href="#reference::def:b">[1]</a></sup><sup class="reference" id="reference::ref:2" title="cd"><span hidden="">c<em>d</em></span><a href="#reference::def:cd">[2]</a></sup></span><sup><a href="#annotation::ref:1">^1</a></sup></li></ol>',
         ]);
       assert.deepStrictEqual(
         footnotes.references.outerHTML,
-        '<ol><li id="reference::def:1"><span id="note::b">b</span><sup><a href="#reference::ref:1">^1</a></sup></li><li id="reference::def:2"><span id="note::cd">c<em>d</em></span><sup><a href="#reference::ref:2">^2</a></sup></li></ol>');
+        '<ol><li id="reference::def:b"><span>b</span><sup><a href="#reference::ref:1">^1</a></sup></li><li id="reference::def:cd"><span>c<em>d</em></span><sup><a href="#reference::ref:2">^2</a></sup></li></ol>');
     });
 
     it('normalize', () => {

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

@@ -1,6 +1,6 @@
 import { ExtensionParser } from '../../block';
 import { block, validate, fence, fmap } from '../../../combinator';
-import { identity, text } from '../../inline/extension/indexee';
+import { identity, index } from '../../inline/extension/indexee';
 import { parse } from '../../api/parse';
 import { html } from 'typed-dom/dom';
 
@@ -34,9 +34,9 @@ export const aside: ExtensionParser.AsideParser = block(validate('~~~', fmap(
       'data-invalid-type': 'content',
       'data-invalid-message': 'Missing the title at the first line',
     }, `${opener}${body}${closer}`)];
-    assert(identity(context.id, text(heading)));
+    assert(identity(context.id, index(heading)));
     return [
-      html('aside', { id: identity(context.id, text(heading)), class: 'aside' }, [
+      html('aside', { id: identity(context.id, index(heading)), class: 'aside' }, [
         document,
         html('h2', 'References'),
         references,

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/inline/autolink/url.ts

@@ -13,7 +13,7 @@ export const url: AutolinkParser.UrlParser = lazy(() => validate(['http://', 'ht
     url => `{ ${url} }`,
     union([unsafelink])))));
 
-export const lineurl: AutolinkParser.UrlParser.LineUrlParser = open(
+export const lineurl: AutolinkParser.UrlParser.LineUrlParser = lazy(() => open(
   linebreak,
   tails([
     str('!'),
@@ -22,7 +22,7 @@ export const lineurl: AutolinkParser.UrlParser.LineUrlParser = open(
       convert(
         url => `{ ${url} }`,
         unsafelink)),
-  ]));
+  ])));
 
 const bracket: AutolinkParser.UrlParser.BracketParser = lazy(() => creation(precedence(2, union([
   surround('(', some(union([bracket, unescsource]), ')'), ')', true),

package/src/parser/inline/autolink.ts

@@ -1,5 +1,5 @@
 import { AutolinkParser } from '../inline';
-import { union, some, syntax, constraint, validate, focus, fmap } from '../../combinator';
+import { union, some, syntax, constraint, validate, focus, lazy, fmap } from '../../combinator';
 import { url, lineurl } from './autolink/url';
 import { email } from './autolink/email';
 import { channel } from './autolink/channel';
@@ -11,7 +11,7 @@ import { str } from '../source';
 import { Syntax, State } from '../context';
 import { stringify } from '../util';
 
-export const autolink: AutolinkParser =
+export const autolink: AutolinkParser = lazy(() =>
   validate(/^(?:[@#>0-9a-z\r\n]|\S[#>])/i,
   constraint(State.autolink, false,
   syntax(Syntax.autolink, 1, 1, ~State.shortcut,
@@ -44,4 +44,4 @@ export const autolink: AutolinkParser =
       anchor,
     ])),
     ns => ns.length === 1 ? ns : [stringify(ns)]),
-  ]))));
+  ])))));