zenn-markdown-html 0.1.100-alpha.1 → 0.1.101

package/lib/index.js

@@ -9,7 +9,6 @@ var crypto_1 = __importDefault(require("crypto"));
 var md_container_1 = require("./utils/md-container");
 var md_renderer_fence_1 = require("./utils/md-renderer-fence");
 var md_linkify_to_card_1 = require("./utils/md-linkify-to-card");
-var md_prism_1 = require("./utils/md-prism");
 var md_katex_1 = require("./utils/md-katex");
 var md_br_1 = require("./utils/md-br");
 var md_custom_block_1 = require("./utils/md-custom-block");
@@ -26,7 +25,6 @@ var md = markdown_it_1.default({
 });
 md.linkify.set({ fuzzyLink: false });
 md.use(md_br_1.mdBr)
-    .use(md_prism_1.mdPrism)
     .use(md_renderer_fence_1.mdRendererFence)
     .use(markdown_it_imsize_1.default)
     .use(md_custom_block_1.mdCustomBlock)

package/lib/utils/highlight.d.ts

@@ -0,0 +1 @@
+export declare function highlight(text: string, langName: string, hasDiff: boolean): string;

package/lib/utils/highlight.js

@@ -0,0 +1,38 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.highlight = void 0;
+var prismjs_1 = __importDefault(require("prismjs"));
+var utils_1 = require("markdown-it/lib/common/utils");
+var components_1 = __importDefault(require("prismjs/components/"));
+var prism_diff_highlight_1 = __importDefault(require("@steelydylan/prism-diff-highlight"));
+// diffプラグインを有効化
+prism_diff_highlight_1.default();
+function loadPrismGrammer(lang) {
+    if (!lang)
+        return undefined;
+    var langObject = prismjs_1.default.languages[lang];
+    if (langObject === undefined) {
+        components_1.default([lang]);
+        langObject = prismjs_1.default.languages[lang];
+    }
+    return langObject;
+}
+function highlightContent(_a) {
+    var text = _a.text, prismGrammer = _a.prismGrammer, langName = _a.langName, hasDiff = _a.hasDiff;
+    if (prismGrammer && langName) {
+        if (hasDiff)
+            return prismjs_1.default.highlight(text, prismjs_1.default.languages.diff, "diff-" + langName);
+        return prismjs_1.default.highlight(text, prismGrammer, langName);
+    }
+    if (hasDiff)
+        return prismjs_1.default.highlight(text, prismjs_1.default.languages.diff, 'diff');
+    return utils_1.escapeHtml(text);
+}
+function highlight(text, langName, hasDiff) {
+    var prismGrammer = loadPrismGrammer(langName);
+    return highlightContent({ text: text, prismGrammer: prismGrammer, langName: langName, hasDiff: hasDiff });
+}
+exports.highlight = highlight;

package/lib/utils/md-renderer-fence.d.ts

@@ -1,2 +1,7 @@
 import MarkdownIt from 'markdown-it';
+export declare function parseInfo(str: string): {
+    hasDiff: boolean;
+    langName: string;
+    fileName?: string;
+};
 export declare function mdRendererFence(md: MarkdownIt): void;

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

@@ -1,22 +1,64 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.mdRendererFence = void 0;
-// get langName supporting diff
-// - `diff js` => `diff-js`
-// - `js diff` => `js-diff`
-// - `js` => `js`
+exports.mdRendererFence = exports.parseInfo = void 0;
+var utils_1 = require("markdown-it/lib/common/utils");
+var highlight_1 = require("./highlight");
+function getHtml(_a) {
+    var content = _a.content, className = _a.className, fileName = _a.fileName;
+    var escapedClass = utils_1.escapeHtml(className);
+    return "<div class=\"code-block-container\">" + (fileName
+        ? "<div class=\"code-block-filename-container\"><span class=\"code-block-filename\">" + utils_1.escapeHtml(fileName) + "</span></div>"
+        : '') + "<pre class=\"" + escapedClass + "\"><code class=\"" + escapedClass + "\">" + content + "</code></pre></div>";
+}
+function getClassName(_a) {
+    var _b = _a.langName, langName = _b === void 0 ? '' : _b, hasDiff = _a.hasDiff;
+    var isSafe = /^[\w-]{0,30}$/.test(langName);
+    if (!isSafe)
+        return '';
+    if (hasDiff) {
+        return "diff-highlight " + (langName.length ? "language-diff-" + langName : '');
+    }
+    return langName ? "language-" + langName : '';
+}
+var fallbackLanguages = {
+    vue: 'html',
+    react: 'jsx',
+    fish: 'shell',
+    sh: 'shell',
+    cwl: 'yaml',
+    tf: 'hcl',
+};
 function normalizeLangName(str) {
-    return str
-        .split(' ')
-        .filter(function (lang) { return !!lang; })
-        .join('-');
+    var _a;
+    if (!(str === null || str === void 0 ? void 0 : str.length))
+        return '';
+    var langName = str.toLocaleLowerCase();
+    return (_a = fallbackLanguages[langName]) !== null && _a !== void 0 ? _a : langName;
 }
-function mdRendererFence(md) {
-    // default renederer
-    var defaultRender = md.renderer.rules.fence ||
-        function (tokens, idx, options, env, self) {
-            return self.renderToken(tokens, idx, options);
+function parseInfo(str) {
+    if (str.trim() === '') {
+        return {
+            langName: '',
+            fileName: undefined,
+            hasDiff: false,
         };
+    }
+    // e.g. foo:filename => ["foo", "filename"]
+    // e.g. foo diff:filename => ["foo diff", "filename"]
+    var _a = str.split(':'), langInfo = _a[0], fileName = _a[1];
+    var langNames = langInfo.split(' ');
+    var hasDiff = langNames.some(function (name) { return name === 'diff'; });
+    var langName = hasDiff
+        ? langNames.find(function (lang) { return lang !== 'diff'; })
+        : langNames[0];
+    return {
+        langName: normalizeLangName(langName),
+        fileName: fileName,
+        hasDiff: hasDiff,
+    };
+}
+exports.parseInfo = parseInfo;
+function mdRendererFence(md) {
     // override fence
     md.renderer.rules.fence = function () {
         var args = [];
@@ -24,25 +66,21 @@ function mdRendererFence(md) {
             args[_i] = arguments[_i];
         }
         var tokens = args[0], idx = args[1];
-        // e.g. info = `js:fooBar.js`
-        var langInfo = tokens[idx].info.split(/:/);
-        var langName = (langInfo === null || langInfo === void 0 ? void 0 : langInfo.length) ? normalizeLangName(langInfo[0]) : '';
+        var _a = tokens[idx], info = _a.info, content = _a.content;
+        var _b = parseInfo(info), langName = _b.langName, fileName = _b.fileName, hasDiff = _b.hasDiff;
         if (langName === 'mermaid') {
-            return "<div class=\"embed-mermaid\"><embed-mermaid><pre class=\"zenn-mermaid\">" + md.utils.escapeHtml(tokens[idx].content.trim()) + "</pre></embed-mermaid></div>";
+            return "<div class=\"embed-mermaid\"><embed-mermaid><pre class=\"zenn-mermaid\">" + utils_1.escapeHtml(content.trim()) + "</pre></embed-mermaid></div>";
         }
-        // Override info (e.g "js:fooBar.js" -> "js")
-        // - This value is read by syntax highlighter.
-        // - Should not pass unsupported langName such as `mermaid`,
-        //   otherwise `Language does not exist` is shown on console.
-        tokens[idx].info = langName;
-        var originalHTML = defaultRender.apply(void 0, args);
-        if (tokens[idx].content.length === 0)
-            return originalHTML;
-        // e.g `js:fooBar.js` => `fooBar.js`
-        var labelText = langName.length && langInfo[1] ? langInfo[1] : null;
-        return "\n      <div class=\"code-block-container\">\n        " + (labelText
-            ? "<div class=\"code-block-filename-container\"><span class=\"code-block-filename\">" + md.utils.escapeHtml(labelText) + "</span></div>"
-            : '') + "\n        " + originalHTML + "\n      </div>\n      ";
+        var className = getClassName({
+            langName: langName,
+            hasDiff: hasDiff,
+        });
+        var highlightedContent = highlight_1.highlight(content, langName, hasDiff);
+        return getHtml({
+            content: highlightedContent,
+            className: className,
+            fileName: fileName,
+        });
     };
 }
 exports.mdRendererFence = mdRendererFence;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "zenn-markdown-html",
-  "version": "0.1.100-alpha.1",
+  "version": "0.1.101",
   "license": "MIT",
   "description": "Convert markdown to zenn flavor html.",
   "main": "lib/index.js",
@@ -45,7 +45,7 @@
     "markdown-it-task-lists": "^2.1.1",
     "prismjs": "^1.25.0"
   },
-  "gitHead": "db95c1b5ea2cbc4a90a20ce535bb9419331fdae2",
+  "gitHead": "9713490577e00d1dc2dd710d7a0eb32b12b15436",
   "publishConfig": {
     "access": "public"
   }

package/lib/utils/md-prism.d.ts

@@ -1,21 +0,0 @@
-import Prism from 'prismjs';
-import MarkdownIt from 'markdown-it';
-interface Options {
-    plugins: string[];
-    /**
-     * Callback for Prism initialisation. Useful for initialising plugins.
-     * @param prism The Prism instance that will be used by the plugin.
-     */
-    init: (prism: typeof Prism) => void;
-}
-/**
- * Initialisation function of the plugin. This function is not called directly by clients, but is rather provided
- * to MarkdownIt’s {@link MarkdownIt.use} function.
- *
- * @param markdownit
- *        The markdown it instance the plugin is being registered to.
- * @param useroptions
- *        The options this plugin is being initialised with.
- */
-export declare function mdPrism(markdownit: MarkdownIt, useroptions: Options): void;
-export {};

package/lib/utils/md-prism.js

@@ -1,149 +0,0 @@
-"use strict";
-var __spreadArrays = (this && this.__spreadArrays) || function () {
-    for (var s = 0, i = 0, il = arguments.length; i < il; i++) s += arguments[i].length;
-    for (var r = Array(s), k = 0, i = 0; i < il; i++)
-        for (var a = arguments[i], j = 0, jl = a.length; j < jl; j++, k++)
-            r[k] = a[j];
-    return r;
-};
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.mdPrism = void 0;
-var prismjs_1 = __importDefault(require("prismjs"));
-var components_1 = __importDefault(require("prismjs/components/"));
-var prism_diff_highlight_1 = __importDefault(require("@steelydylan/prism-diff-highlight"));
-// diffプラグインを有効化
-prism_diff_highlight_1.default();
-var DEFAULTS = {
-    plugins: [],
-    init: function () {
-        // do nothing by default
-    },
-};
-/**
- * Loads the provided {@code lang} into prism.
- *
- * @param lang
- *        Code of the language to load.
- * @param isDiff
- *        whether to use diff with language or not
- * @return The Prism language object for the provided {@code lang} code. {@code undefined} if the language is not known to Prism.
- */
-function loadPrismLang(lang) {
-    if (!lang)
-        return undefined;
-    var langObject = prismjs_1.default.languages[lang];
-    if (langObject === undefined) {
-        components_1.default([lang]);
-        langObject = prismjs_1.default.languages[lang];
-    }
-    return langObject;
-}
-/**
- * Check given lang should be treated as `diff` and parse name of language.
- *
- * @param lang
- *        String given by `markdown-it`. this must be lower case.
- * @return  whether `lang` includes `diff` or not, and parsed name if recognized as `diff`.
- *          If not, return `lang` directly.
- *
- */
-function checkIncludingDiff(lang) {
-    var _a;
-    // TODO: Determine the method to find `diff`(`match`, `indexOf` e.t.c.).
-    var langs = lang.split('-');
-    var hasDiff = langs.some(function (lang) { return lang === 'diff'; });
-    if (hasDiff) {
-        var newLang = (_a = langs.find(function (lang) { return lang !== 'diff'; })) !== null && _a !== void 0 ? _a : '';
-        return {
-            isDiff: true,
-            lang: newLang,
-        };
-    }
-    return {
-        isDiff: false,
-        lang: lang,
-    };
-}
-var fallbackLanguages = {
-    vue: 'html',
-    react: 'jsx',
-    fish: 'shell',
-    sh: 'shell',
-    cwl: 'yaml',
-    tf: 'hcl',
-};
-/**
- * Select the language to use for highlighting, based on the provided options and the specified language.
- *
- * @param lang
- *        Code of the language to highlight the text in.
- * @return  The name of the language to use and the Prism language object for that language.
- */
-function selectLanguage(lang) {
-    var loweredLang = (lang === null || lang === void 0 ? void 0 : lang.toLowerCase()) || '';
-    var _a = checkIncludingDiff(loweredLang), isDiff = _a.isDiff, langNormalized = _a.lang;
-    var langAlias = fallbackLanguages[langNormalized];
-    var langToUse = langAlias || langNormalized;
-    var prismLang = loadPrismLang(langToUse);
-    return {
-        langToUse: langToUse,
-        grammer: prismLang,
-        isDiff: isDiff,
-    };
-}
-/**
- * Highlights the provided text using Prism.
- *
- * @param markdownit
- *        The markdown-it instance
- * @param text
- *        The text to highlight.
- * @param lang
- *        Code of the language to highlight the text in.
- * @return {@code text} wrapped in {@code &lt;pre&gt;} and {@code &lt;code&gt;}, both equipped with the appropriate class
- *  (markdown-it’s langPrefix + lang). If Prism knows {@code lang}, {@code text} will be highlighted by it.
- */
-function highlight(markdownit, text, lang) {
-    var _a = selectLanguage(lang), langToUse = _a.langToUse, isDiff = _a.isDiff, grammer = _a.grammer;
-    // 1. Use `diff` highlight with `language` if set.
-    // 2. Use `language` (or `diff`, which is included) only.
-    // 3. Use plain Markdown.
-    var code = grammer
-        ? isDiff
-            ? prismjs_1.default.highlight(text, prismjs_1.default.languages.diff, 'diff-' + langToUse)
-            : prismjs_1.default.highlight(text, grammer, langToUse)
-        : isDiff
-            ? prismjs_1.default.highlight(text, prismjs_1.default.languages.diff, 'diff')
-            : markdownit.utils.escapeHtml(text);
-    var classAttribute = langToUse
-        ? isDiff
-            ? " class=\"diff-highlight " + markdownit.options.langPrefix + "diff-" + markdownit.utils.escapeHtml(langToUse) + "\""
-            : " class=\"" + markdownit.options.langPrefix + markdownit.utils.escapeHtml(langToUse) + "\""
-        : '';
-    return "<pre" + classAttribute + "><code" + classAttribute + ">" + code + "</code></pre>";
-}
-/**
- * Initialisation function of the plugin. This function is not called directly by clients, but is rather provided
- * to MarkdownIt’s {@link MarkdownIt.use} function.
- *
- * @param markdownit
- *        The markdown it instance the plugin is being registered to.
- * @param useroptions
- *        The options this plugin is being initialised with.
- */
-function mdPrism(markdownit, useroptions) {
-    var options = Object.assign({}, DEFAULTS, useroptions);
-    options.init(prismjs_1.default);
-    // register ourselves as highlighter
-    markdownit.options.highlight = function () {
-        var args = [];
-        for (var _i = 0; _i < arguments.length; _i++) {
-            args[_i] = arguments[_i];
-        }
-        return highlight.apply(void 0, __spreadArrays([markdownit], args));
-    };
-}
-exports.mdPrism = mdPrism;