zenn-markdown-html 0.1.121 → 0.1.122-alpha.2

package/README.md

@@ -1,17 +1,34 @@
 # Zenn Markdown Html
 
-マークダウンを HTML へ変換するためのライブラリ。
+マークダウンを HTML へ変換するためのライブラリです。
 
-## 使い方
+## API
+
+### markdownToHtml
+
+MarkdownをHTMLに変換します。
 
 ```js
 import markdownToHtml from 'zenn-markdown-html';
 const html = markdownToHtml(markdown);
 ```
 
-## 使用できる Markdown の記法について
+サポートする記法については、[Zenn の Markdown 記法一覧](https://zenn.dev/zenn/articles/markdown-guide) を参照してください。
+
+### markdownToSimpleHtml
+
+MarkdownをHTMLに変換します。markdownToHtmlと比べてサポートする記法が限られています。
+
+```js
+import { markdownToSimpleHtml } from 'zenn-markdown-html';
+const html = markdownToSimpleHtml(markdown);
+```
+
+サポートする記法
 
-- [Zenn の Markdown 記法一覧 | Zenn](https://zenn.dev/zenn/articles/markdown-guide)
+- Markdown記法（リンク、リスト、太字・斜体）
+- パラグラフ内の改行
+- URLをリンクに変換
 
 ## 開発者向けのドキュメント
 

package/lib/index.d.ts

@@ -1,2 +1,4 @@
 declare const markdownToHtml: (text: string) => string;
 export default markdownToHtml;
+import { markdownToSimpleHtml } from './markdown-to-simple-html';
+export { markdownToSimpleHtml };

package/lib/index.js

@@ -4,6 +4,12 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
+Object.defineProperty(exports, "markdownToSimpleHtml", {
+  enumerable: true,
+  get: function () {
+    return _markdownToSimpleHtml.markdownToSimpleHtml;
+  }
+});
 
 var _markdownIt = _interopRequireDefault(require("markdown-it"));
 
@@ -13,6 +19,8 @@ var _mdContainer = require("./utils/md-container");
 
 var _mdRendererFence = require("./utils/md-renderer-fence");
 
+var _mdLinkAttributes = require("./utils/md-link-attributes");
+
 var _mdLinkifyToCard = require("./utils/md-linkify-to-card");
 
 var _mdKatex = require("./utils/md-katex");
@@ -25,6 +33,8 @@ var _markdownItImsize = _interopRequireDefault(require("@steelydylan/markdown-it
 
 var _markdownItAnchor = _interopRequireDefault(require("markdown-it-anchor"));
 
+var _markdownToSimpleHtml = require("./markdown-to-simple-html");
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 // plugis
@@ -36,8 +46,6 @@ const mdTaskLists = require('markdown-it-task-lists');
 
 const mdInlineComments = require('markdown-it-inline-comments');
 
-const mdLinkAttributes = require('markdown-it-link-attributes');
-
 const md = (0, _markdownIt.default)({
   breaks: true,
   linkify: true
@@ -47,20 +55,7 @@ md.linkify.set({
 });
 md.use(_mdBr.mdBr).use(_mdRendererFence.mdRendererFence).use(_markdownItImsize.default).use(_mdCustomBlock.mdCustomBlock).use(mdContainer, 'details', _mdContainer.containerDetailsOptions).use(mdContainer, 'message', _mdContainer.containerMessageOptions).use(mdFootnote).use(mdTaskLists, {
   enabled: true
-}).use(mdInlineComments).use(mdLinkAttributes, [// 内部リンク
-{
-  pattern: /^(?:https:\/\/zenn\.dev$)|(?:https:\/\/zenn\.dev\/.*$)/,
-  attrs: {
-    target: '_blank'
-  }
-}, // 外部リンク
-{
-  pattern: /^https?:\/\//,
-  attrs: {
-    target: '_blank',
-    rel: 'nofollow noopener noreferrer'
-  }
-}]).use(_markdownItAnchor.default, {
+}).use(mdInlineComments).use(_mdLinkAttributes.mdLinkAttributes).use(_markdownItAnchor.default, {
   level: [1, 2, 3, 4],
   permalink: _markdownItAnchor.default.permalink.ariaHidden({
     placement: 'before',

package/lib/markdown-to-simple-html.d.ts

@@ -0,0 +1 @@
+export declare const markdownToSimpleHtml: (text: string) => string;

package/lib/markdown-to-simple-html.js

@@ -0,0 +1,46 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.markdownToSimpleHtml = void 0;
+
+var _markdownIt = _interopRequireDefault(require("markdown-it"));
+
+var _mdLinkAttributes = require("./utils/md-link-attributes");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+// preset 'zero' はデフォルトで全ての変換を無効化したプリセットです。
+// Ref: https://github.com/markdown-it/markdown-it/blob/master/lib/presets/zero.js
+const md = (0, _markdownIt.default)('zero', {
+  breaks: true,
+  // 改行を<br>に変換する
+  linkify: true // URLをリンクに変換する
+
+});
+md.enable('emphasis'); // 太字と斜体を有効化
+
+md.enable('link'); // リンクを有効化
+
+md.enable('list'); // リストを有効化
+// 改行コードを<br>に変換する（'zero'presetの場合、newlineを有効化する必要がある）
+// Ref: https://github.com/markdown-it/markdown-it/issues/491
+
+md.enable('newline'); // linkify を有効化('zero'presetの場合、linkifyを有効化する必要がある)
+// Ref: https://github.com/markdown-it/markdown-it/issues/396
+
+md.enable('linkify'); // fuzzyLink - recognize URL-s without http(s):// head. Default true.
+// Ref: http://markdown-it.github.io/linkify-it/doc/#LinkifyIt.prototype.set
+
+md.linkify.set({
+  fuzzyLink: false
+});
+md.use(_mdLinkAttributes.mdLinkAttributes); // 限られた記法のみをHTMLに変換するパーサー
+
+const markdownToSimpleHtml = text => {
+  if (!(text && text.length)) return '';
+  return md.render(text);
+};
+
+exports.markdownToSimpleHtml = markdownToSimpleHtml;

package/lib/utils/md-custom-block.js

@@ -84,6 +84,16 @@ const blockOptions = {
     return (0, _helper.generateEmbedIframe)('tweet', str);
   },
 
+  blueprintue(str) {
+    if (!(0, _urlMatcher.isBlueprintUEUrl)(str)) return '「https://blueprintue.com/render/」から始まる正しいURLを指定してください';
+    return `<div class="embed-blueprintue"><iframe src="${str}" width="100%" height="500px" scrolling="no" frameborder="no" loading="lazy" allowfullscreen></iframe></div>`;
+  },
+
+  figma(str) {
+    if (!(0, _urlMatcher.isFigmaUrl)(str)) return 'ファイルまたはプロトタイプのFigma URLを指定してください';
+    return `<div class="embed-figma"><iframe src="https://www.figma.com/embed?embed_host=zenn&url=${str}" scrolling="no" frameborder="no" loading="lazy" allowfullscreen width="100%" height="500px"></iframe></div>`;
+  },
+
   card(str) {
     if (!(0, _helper.isValidHttpUrl)(str)) return 'URLが不正です';
     return (0, _helper.generateEmbedIframe)('link-card', str);

package/lib/utils/md-link-attributes.d.ts

@@ -0,0 +1,2 @@
+import MarkdownIt from 'markdown-it';
+export declare function mdLinkAttributes(md: MarkdownIt): void;

package/lib/utils/md-link-attributes.js

@@ -0,0 +1,33 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.mdLinkAttributes = mdLinkAttributes;
+
+const markdownItLinkAttributes = require('markdown-it-link-attributes');
+
+function mdLinkAttributes(md) {
+  // <a>タグの属性を設定する
+  // Ref: https://github.com/crookedneighbor/markdown-it-link-attributes
+  md.use(markdownItLinkAttributes, [// 内部リンク
+  {
+    matcher(href) {
+      return href.match(/^(?:https:\/\/zenn\.dev$)|(?:https:\/\/zenn\.dev\/.*$)/);
+    },
+
+    attrs: {
+      target: '_blank'
+    }
+  }, // 外部リンク
+  {
+    matcher(href) {
+      return href.match(/^https?:\/\//);
+    },
+
+    attrs: {
+      target: '_blank',
+      rel: 'nofollow noopener noreferrer'
+    }
+  }]);
+}

package/lib/utils/md-linkify-to-card.js

@@ -88,9 +88,21 @@ function mdLinkifyToCard(md) {
   md.core.ruler.after('replacements', 'link-to-card', function ({
     tokens
   }) {
-    // 本文内のすべてのtokenをチェック
+    // 埋め込みを許可するネストレベル
+    let allowLevel = 0; // 本文内のすべてのtokenをチェック
+
     tokens.forEach((token, i) => {
-      // autolinkはinline内のchildrenにのみ存在
+      if (token.type === 'container_details_open') {
+        allowLevel++;
+        return;
+      }
+
+      if (token.type === 'container_details_close' && allowLevel > 0) {
+        allowLevel--;
+        return;
+      } // autolinkはinline内のchildrenにのみ存在
+
+
       if (token.type !== 'inline') return; // childrenが存在しない場合は変換しない
 
       const children = token.children;
@@ -100,7 +112,7 @@ function mdLinkifyToCard(md) {
       if (!hasAnyAutolink) return; // 親がコンテンツ直下のp要素の場合のみ変換
 
       const parentToken = tokens[i - 1];
-      const isParentRootParagraph = parentToken && parentToken.type === 'paragraph_open' && parentToken.level === 0;
+      const isParentRootParagraph = parentToken && parentToken.type === 'paragraph_open' && parentToken.level === allowLevel;
       if (!isParentRootParagraph) return;
       token.children = convertAutolinkToEmbed(children);
     });

package/lib/utils/url-matcher.d.ts

@@ -9,3 +9,12 @@ export declare function extractYoutubeVideoParameters(youtubeUrl: string): {
     start?: string;
 } | undefined;
 export declare function isYoutubeUrl(url: string): boolean;
+/**
+ * 参考: https://blueprintue.com/
+ * 生成されるURLをもとに正規表現を定義した
+ */
+export declare function isBlueprintUEUrl(url: string): boolean;
+/**
+ * 参考: https://www.figma.com/developers/embed
+ */
+export declare function isFigmaUrl(url: string): boolean;

package/lib/utils/url-matcher.js

@@ -4,8 +4,10 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.extractYoutubeVideoParameters = extractYoutubeVideoParameters;
+exports.isBlueprintUEUrl = isBlueprintUEUrl;
 exports.isCodepenUrl = isCodepenUrl;
 exports.isCodesandboxUrl = isCodesandboxUrl;
+exports.isFigmaUrl = isFigmaUrl;
 exports.isGistUrl = isGistUrl;
 exports.isJsfiddleUrl = isJsfiddleUrl;
 exports.isStackblitzUrl = isStackblitzUrl;
@@ -57,4 +59,21 @@ function extractYoutubeVideoParameters(youtubeUrl) {
 
 function isYoutubeUrl(url) {
   return youtubeRegexp.test(url);
+}
+/**
+ * 参考: https://blueprintue.com/
+ * 生成されるURLをもとに正規表現を定義した
+ */
+
+
+function isBlueprintUEUrl(url) {
+  return /^https:\/\/blueprintue\.com\/render\/.+\/$/.test(url);
+}
+/**
+ * 参考: https://www.figma.com/developers/embed
+ */
+
+
+function isFigmaUrl(url) {
+  return /^https:\/\/([\w.-]+\.)?figma.com\/(file|proto)\/([0-9a-zA-Z]{22,128})(?:\/.*)?$/.test(url);
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "zenn-markdown-html",
-  "version": "0.1.121",
+  "version": "0.1.122-alpha.2",
   "license": "MIT",
   "description": "Convert markdown to zenn flavor html.",
   "main": "lib/index.js",
@@ -49,11 +49,11 @@
     "markdown-it-container": "^2.0.0",
     "markdown-it-footnote": "^3.0.3",
     "markdown-it-inline-comments": "^1.0.1",
-    "markdown-it-link-attributes": "^3.0.0",
+    "markdown-it-link-attributes": "^4.0.1",
     "markdown-it-task-lists": "^2.1.1",
     "prismjs": "^1.27.0"
   },
-  "gitHead": "33ab0a916ef1fb08271fe03fa694d11d7bd77e66",
+  "gitHead": "9e1bb555f5ecb60466b58287820f07ac4940da42",
   "publishConfig": {
     "access": "public"
   }