zenn-markdown-html 0.1.155-alpha.2 → 0.1.155

package/lib/index.js

@@ -20,6 +20,7 @@ var _mdBr = require("./utils/md-br");
 var _mdKatex = require("./utils/md-katex");
 var _mdCustomBlock = require("./utils/md-custom-block");
 var _mdLinkAttributes = require("./utils/md-link-attributes");
+var _mdSourceMap = require("./utils/md-source-map");
 var _mdLinkifyToCard = require("./utils/md-linkify-to-card");
 var _mdRendererFence = require("./utils/md-renderer-fence");
 var _mdContainer = require("./utils/md-container");
@@ -57,7 +58,7 @@ const markdownToHtml = (text, options) => {
       symbol: ''
     }),
     tabIndex: false
-  });
+  }).use(_mdSourceMap.mdSourceMap);
 
   // custom footnote
   md.renderer.rules.footnote_block_open = () => '<section class="footnotes">\n' + '<span class="footnotes-title">脚注</span>\n' + '<ol class="footnotes-list">\n';

package/lib/sanitizer.js

@@ -10,44 +10,44 @@ const tags = ['a', 'aside', 'blockquote', 'br', 'circle', 'code', 'details', 'di
 const attributes = {
   a: ['aria-hidden', 'class', 'href', 'id', 'rel', 'style', 'target', 'title'],
   aside: ['class'],
-  blockquote: [],
+  blockquote: ['class', 'data-line'],
   br: ['style'],
   circle: ['cx', 'cy', 'fill', 'r'],
-  code: ['class'],
+  code: ['class', 'data-line'],
   details: [],
   div: ['class'],
   em: [],
   'embed-katex': ['display-mode'],
   eq: ['class'],
   eqn: [],
-  h1: ['id'],
-  h2: ['id'],
-  h3: ['id'],
-  h4: ['id'],
-  h5: [],
-  h6: [],
-  hr: [],
+  h1: ['id', 'class', 'data-line'],
+  h2: ['id', 'class', 'data-line'],
+  h3: ['id', 'class', 'data-line'],
+  h4: ['id', 'class', 'data-line'],
+  h5: ['class', 'data-line'],
+  h6: ['class', 'data-line'],
+  hr: ['class', 'data-line'],
   iframe: ['allow', 'allowfullscreen', 'allowtransparency', 'data-content', 'frameborder', 'id', 'loading', 'sandbox', 'scrolling', 'src', 'style', 'width'],
   img: ['alt', 'class', 'height', 'loading', 'src', 'title', 'width'],
   input: ['checked', 'class', 'type'],
-  li: ['class', 'id'],
-  ol: ['class', 'start'],
-  p: [],
+  li: ['class', 'id', 'data-line'],
+  ol: ['class', 'start', 'data-line'],
+  p: ['class', 'data-line'],
   pre: ['class'],
   s: [],
-  section: ['class'],
+  section: ['class', 'data-line'],
   span: ['class', 'title'],
   strong: [],
   summary: [],
   sup: ['class'],
-  table: [],
-  tbody: [],
+  table: ['class', 'data-line'],
+  tbody: ['class', 'data-line'],
   td: ['style'],
   text: ['dominant-baseline', 'fill', 'font-size', 'font-weight', 'text-anchor', 'x', 'y'],
   th: ['style'],
-  thead: [],
-  tr: [],
-  ul: ['class']
+  thead: ['class', 'data-line'],
+  tr: ['class', 'data-line'],
+  ul: ['class', 'data-line']
 };
 const sanitize = html => (0, _sanitizeHtml.default)(html, {
   allowedTags: tags,

package/lib/utils/md-katex.js

@@ -42,12 +42,12 @@ const inlineRules = [{
 const blockRules = [{
   name: 'math_block_eqno',
   rex: /\${2}([^$]+?)\${2}\s*?\(([^)\s]+?)\)/gmy,
-  tmpl: `<section class="${katexClassName} eqno"><eqn><embed-katex display-mode="1">$1</embed-katex></eqn><span>($2)</span></section>`,
+  tmpl: `<section class="${katexClassName} eqno code-line" $3><eqn><embed-katex display-mode="1">$1</embed-katex></eqn><span>($2)</span></section>`,
   tag: '$$'
 }, {
   name: 'math_block',
   rex: /\${2}([^$]+?)\${2}/gmy,
-  tmpl: `<section class="${katexClassName}"><eqn><embed-katex display-mode="1">$1</embed-katex></eqn></section>`,
+  tmpl: `<section class="${katexClassName} code-line" $3><eqn><embed-katex display-mode="1">$1</embed-katex></eqn></section>`,
   tag: '$$'
 }];
 function mdKatex(md) {
@@ -115,6 +115,6 @@ function mdKatex(md) {
     }); // ! important for ```math delimiters
 
     md.renderer.rules[rule.name] = (tokens, idx) => rule.tmpl.replace(/\$2/, md.utils.escapeHtml(tokens[idx].info)) // equation number .. ?
-    .replace(/\$1/, md.utils.escapeHtml(tokens[idx].content));
+    .replace(/\$1/, md.utils.escapeHtml(tokens[idx].content)).replace(/\$3/, 'data-line="' + tokens[idx].attrGet('data-line') + '"');
   }
 }

package/lib/utils/md-renderer-fence.js

@@ -10,10 +10,11 @@ var _highlight = require("./highlight");
 function getHtml({
   content,
   className,
-  fileName
+  fileName,
+  line
 }) {
   const escapedClass = (0, _utils.escapeHtml)(className);
-  return `<div class="code-block-container">${fileName ? `<div class="code-block-filename-container"><span class="code-block-filename">${(0, _utils.escapeHtml)(fileName)}</span></div>` : ''}<pre class="${escapedClass}"><code class="${escapedClass}">${content}</code></pre></div>`;
+  return `<div class="code-block-container">${fileName ? `<div class="code-block-filename-container"><span class="code-block-filename">${(0, _utils.escapeHtml)(fileName)}</span></div>` : ''}<pre class="${escapedClass}"><code class="${escapedClass !== '' ? `${escapedClass} code-line` : 'code-line'}" ${line !== undefined ? `data-line="${line}"` : ''}>${content}</code></pre></div>`;
 }
 function getClassName({
   langName = '',
@@ -64,6 +65,7 @@ function parseInfo(str) {
 function mdRendererFence(md, options) {
   // override fence
   md.renderer.rules.fence = function (...args) {
+    var _tokens$idx$map;
     const [tokens, idx] = args;
     const {
       info,
@@ -85,10 +87,12 @@ function mdRendererFence(md, options) {
       hasDiff
     });
     const highlightedContent = (0, _highlight.highlight)(content, langName, hasDiff);
+    const fenceStart = (_tokens$idx$map = tokens[idx].map) === null || _tokens$idx$map === void 0 ? void 0 : _tokens$idx$map[0];
     return getHtml({
       content: highlightedContent,
       className,
-      fileName
+      fileName,
+      line: fenceStart
     });
   };
 }

package/lib/utils/md-source-map.d.ts

@@ -0,0 +1,7 @@
+import MarkdownIt from "markdown-it";
+/**
+ * Adds begin line index to the output via the 'data-line' data attribute.
+ *
+ * Ref: https://github.com/microsoft/vscode/blob/84f63bf4e54c60e40865c8c4d8002893a337fe61/extensions/markdown-language-features/src/markdownEngine.ts#L17-L40
+ */
+export declare function mdSourceMap(md: MarkdownIt): void;

package/lib/utils/md-source-map.js

@@ -0,0 +1,22 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.mdSourceMap = mdSourceMap;
+/**
+ * Adds begin line index to the output via the 'data-line' data attribute.
+ *
+ * Ref: https://github.com/microsoft/vscode/blob/84f63bf4e54c60e40865c8c4d8002893a337fe61/extensions/markdown-language-features/src/markdownEngine.ts#L17-L40
+ */
+function mdSourceMap(md) {
+  // Set the attribute on every possible token.
+  md.core.ruler.push("source_map_data_attribute", state => {
+    for (const token of state.tokens) {
+      if (token.map && token.type !== "inline") {
+        token.attrSet("data-line", String(token.map[0]));
+        token.attrJoin("class", "code-line");
+      }
+    }
+  });
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "zenn-markdown-html",
-  "version": "0.1.155-alpha.2",
+  "version": "0.1.155",
   "license": "MIT",
   "description": "Convert markdown to zenn flavor html.",
   "main": "lib/index.js",
@@ -60,7 +60,7 @@
     "prismjs": "^1.29.0",
     "sanitize-html": "^2.9.0"
   },
-  "gitHead": "577c1e248e10e2bc5a10214e01c4b7223d66a637",
+  "gitHead": "7c4b0fd3e18ab7df9ff92657598ebd8616cac538",
   "publishConfig": {
     "access": "public"
   }