cherry-muse 1.0.1

package/src/core/hooks/List.js

@@ -0,0 +1,260 @@
+/**
+ * Copyright (C) 2021 THL A29 Limited, a Tencent company.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import ParagraphBase from '@/core/ParagraphBase';
+
+const INDENT_SPACE_NUM = 4; // commonmark default use 1~4 spaces for indent
+const TAB_SPACE_NUM = 4; // 1 tab === 4 space
+
+function attrsToAttributeString(object) {
+  if (typeof object !== 'object' && Object.keys(object).length < 1) {
+    return '';
+  }
+  const attrs = ['']; // 为了join一步到位
+  Object.keys(object).forEach((key) => {
+    attrs.push(`${key}="${object[key]}"`);
+  });
+  return attrs.join(' ');
+}
+
+export function makeChecklist(text) {
+  return text.replace(/^((?:|[\t ]+)[*+-]\s+)\[(\s|x)\]/gm, (whole, pre, test) => {
+    const checkHtml = /\s/.test(test)
+      ? '<input class="cherry-checkbox" type="checkbox"/>'
+      : '<input class="cherry-checkbox" type="checkbox"  checked="checked" />';
+    return `${pre}${checkHtml}`;
+  });
+}
+
+// 缩进处理
+function handleIndent(str, node) {
+  const indentRegex = /^(\t|[ ])/;
+  let $str = str;
+  while (indentRegex.test($str)) {
+    node.space += $str[0] === '\t' ? TAB_SPACE_NUM : 1;
+    $str = $str.replace(indentRegex, '');
+  }
+  return $str;
+}
+
+// 序号样式处理
+function getListStyle(m2) {
+  if (/^[a-z]/.test(m2)) {
+    return 'lower-greek';
+  }
+  if (/^[一二三四五六七八九十]/.test(m2)) {
+    return 'cjk-ideographic';
+  }
+  if (/^I/.test(m2)) {
+    return 'upper-roman';
+  }
+  if (/^\+/.test(m2)) {
+    return 'circle';
+  }
+  if (/^\*/.test(m2)) {
+    return 'square';
+  }
+  return 'default';
+}
+
+// 标识符处理
+function handleMark(str, node) {
+  const listRegex =
+    /^((([*+-]|\d+[.]|[a-z]\.|[I一二三四五六七八九十]+\.)[ \t]+)([^\r]*?)($|\n{2,}(?=\S)(?![ \t]*(?:[*+-]|\d+[.]|[a-z]\.|[I一二三四五六七八九十]+\.)[ \t]+)))/;
+  if (!listRegex.test(str)) {
+    node.type = 'blank';
+    return str;
+  }
+  return str.replace(listRegex, (wholeMatch, m1, m2, m3, m4) => {
+    node.type = m2.search(/[*+-]/g) > -1 ? 'ul' : 'ol';
+    node.listStyle = getListStyle(m2);
+    node.start = Number(m2.replace('.', '')) ? Number(m2.replace('.', '')) : 1;
+    return m4;
+  });
+}
+
+class Node {
+  // 列表树节点
+  constructor() {
+    this.index = 0;
+    this.space = 0;
+    this.type = '';
+    this.start = 1;
+    this.listStyle = '';
+    this.strs = [];
+    this.children = [];
+    this.lines = 0;
+  }
+}
+
+export default class List extends ParagraphBase {
+  static HOOK_NAME = 'list';
+
+  constructor({ config }) {
+    super({ needCache: true });
+    this.config = config || {};
+    this.tree = [];
+    this.emptyLines = 0;
+    this.indentSpace = Math.max(this.config.indentSpace, 2);
+  }
+
+  addNode(node, current, parent, last) {
+    if (node.type === 'blank') {
+      this.tree[last].strs.push(node.strs[0]);
+    } else {
+      this.tree[parent].children.push(current);
+      this.tree[current] = {
+        ...node,
+        parent,
+      };
+    }
+  }
+
+  buildTree(html, sentenceMakeFunc) {
+    const items = html.split('\n');
+    this.tree = [];
+    items.unshift('');
+    // 列表结尾换行符个数
+    const endLineFlagLength = html.match(/\n*$/g)[0].length;
+    for (let i = 0; i < items.length - endLineFlagLength; i++) {
+      const node = new Node();
+      items[i] = handleIndent(items[i], node);
+      items[i] = handleMark(items[i], node);
+      node.strs.push(sentenceMakeFunc(items[i]).html);
+      node.index = i;
+      if (i === 0) {
+        // 根节点
+        node.space = -2;
+        this.tree.push(node);
+        continue;
+      }
+      let last = i - 1;
+      while (!this.tree[last]) last -= 1;
+      if (node.type === 'blank') {
+        this.addNode(node, i, this.tree[last].parent, last);
+      } else {
+        while (!this.tree[last] || this.tree[last].space > node.space) last -= 1;
+        const { space } = node;
+        const lastSpace = this.tree[last].space;
+        if (space < lastSpace + this.indentSpace) {
+          // 成为同级节点
+          if (this.config.listNested && this.tree[last].type !== node.type) {
+            this.addNode(node, i, last);
+          } else {
+            this.addNode(node, i, this.tree[last].parent);
+          }
+        } else if (space < lastSpace + this.indentSpace + INDENT_SPACE_NUM) {
+          // 成为子节点
+          this.addNode(node, i, last);
+        } else {
+          // 纯文本
+          node.type = 'blank';
+          this.addNode(node, i, this.tree[last].parent, last);
+        }
+      }
+    }
+  }
+
+  renderSubTree(node, children, type) {
+    let lines = 0;
+    const attr = {};
+    const content = children.reduce((html, item) => {
+      const child = this.tree[item];
+      const itemAttr = {
+        class: 'cherry-list-item',
+      };
+      const str = `<p>${child.strs.join('<br>')}</p>`;
+      child.lines += this.getLineCount(child.strs.join('\n'));
+      const children = child.children.length ? this.renderTree(item) : '';
+      node.lines += child.lines;
+      lines += child.lines;
+      // checklist 样式适配
+      if (str.indexOf('input') !== -1) {
+        itemAttr.class += ' check-list-item';
+      }
+      return `${html}<li${attrsToAttributeString(itemAttr)}>${str}${children}</li>`;
+    }, '');
+    if (node.parent === undefined) {
+      // 根节点增加属性
+      attr['data-lines'] = node.index === 0 ? lines + this.emptyLines : lines;
+      attr['data-sign'] = this.sign;
+    }
+    if (children[0] && type === 'ol') {
+      attr.start = this.tree[children[0]].start;
+    }
+    attr.class = `cherry-list__${this.tree[children[0]].listStyle}`;
+    return `<${type}${attrsToAttributeString(attr)}>${content}</${type}>`;
+  }
+
+  renderTree(current) {
+    let from = 0;
+    const node = this.tree[current];
+    const { children } = node;
+    const html = children.reduce((html, item, index) => {
+      if (index === 0) return html;
+      if (this.tree[children[index]].type === this.tree[children[index - 1]].type) {
+        return html;
+      }
+      const subTree = this.renderSubTree(node, children.slice(from, index), this.tree[children[index - 1]].type);
+      from = index;
+      return html + subTree;
+    }, '');
+
+    const childrenHtml = children.length
+      ? this.renderSubTree(node, children.slice(from, children.length), this.tree[children[children.length - 1]].type)
+      : '';
+
+    return html + childrenHtml;
+  }
+
+  toHtml(wholeMatch, sentenceMakeFunc) {
+    // 行数计算吸收的空行
+    this.emptyLines = wholeMatch.match(/^\n\n/)?.length ?? 0;
+    const text = wholeMatch.replace(/~0$/g, '').replace(/^\n+/, '');
+    this.buildTree(makeChecklist(text), sentenceMakeFunc);
+    const result = this.renderTree(0);
+    return this.pushCache(result, this.sign, this.$getLineNum(wholeMatch));
+  }
+
+  $getLineNum(str) {
+    const beginLine = str.match(/^\n\n/)?.length ?? 0;
+    const $str = str.replace(/^\n+/, '').replace(/\n+$/, '\n');
+    return $str.match(/\n/g)?.length ?? 0 + beginLine;
+  }
+
+  makeHtml(str, sentenceMakeFunc) {
+    let $str = `${str}~0`;
+    if (this.test($str)) {
+      $str = $str.replace(this.RULE.reg, (wholeMatch) => {
+        return this.getCacheWithSpace(
+          this.checkCache(wholeMatch, sentenceMakeFunc, this.$getLineNum(wholeMatch)),
+          wholeMatch,
+        );
+      });
+    }
+    $str = $str.replace(/~0$/g, '');
+    return $str;
+  }
+
+  rule() {
+    const ret = {
+      begin: '(?:^|\n)(\n*)(([ ]{0,3}([*+-]|\\d+[.]|[a-z]\\.|[I一二三四五六七八九十]+\\.)[ \\t]+)',
+      content: '([^\\r]+?)',
+      end: '(~0|\\n{2,}(?=\\S)(?![ \\t]*(?:[*+-]|\\d+[.]|[a-z]\\.|[I一二三四五六七八九十]+\\.)[ \\t]+)))',
+    };
+    ret.reg = new RegExp(ret.begin + ret.content + ret.end, 'gm');
+    return ret;
+  }
+}

package/src/core/hooks/Mark.js

@@ -0,0 +1,55 @@
+/**
+ * Copyright (C) 2021 THL A29 Limited, a Tencent company.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import SyntaxBase from '../SyntaxBase';
+
+export default class Mark extends SyntaxBase {
+  static HOOK_NAME = 'mark';
+
+  toHtml(whole, m1, m2) {
+    return `<mark>${m1}</mark>`;
+  }
+
+  makeHtml(str) {
+    if (!this.test(str)) {
+      return str;
+    }
+
+    return str.replace(this.RULE.reg, this.toHtml);
+  }
+
+  rule() {
+    return {
+      begin: '',
+      content: '',
+      end: '',
+      reg: new RegExp('==([^=]+)==', 'g'),
+    };
+  }
+  overlayMode() {
+    return {
+      name: 'mark',
+      token(stream, state) {
+        // 检查行的开头是否有 ':::'
+        if (stream.match(/==([^=]+)==/)) {
+          return 'mark-container';
+        }
+        stream.next(); // 前进到下一个字符
+        return null; // 默认返回 null
+      },
+    };
+  }
+}

package/src/core/hooks/MathBlock.js

@@ -0,0 +1,97 @@
+/**
+ * Copyright (C) 2021 THL A29 Limited, a Tencent company.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import ParagraphBase from '@/core/ParagraphBase';
+import { getHTML } from '@/utils/dom';
+import { isLookbehindSupported } from '@/utils/regexp';
+import { replaceLookbehind } from '@/utils/lookbehind-replace';
+import { Theme } from '@/Theme';
+import Event from '../../Event';
+export default class MathBlock extends ParagraphBase {
+  static HOOK_NAME = 'mathBlock';
+
+  constructor({ config }) {
+    super({ needCache: true });
+    // 非浏览器环境下配置为 node
+    const { MathJax, apiHost = 'https://math.vercel.app' } = config;
+    this.api = !MathJax && !window.MathJax;
+    this.apiHost = apiHost;
+    this.MathJax = MathJax || window.MathJax;
+    if (this.api) {
+      const that = this;
+      Event.on('Theme', 'change', function ([isDark]) {
+        const images = that.$engine.$cherry.wrapperDom.querySelectorAll('img.Cherry-Math-Latex');
+        images.forEach(function (item, index) {
+          if (item instanceof HTMLImageElement) {
+            item.src = item.src.replace(isDark ? 'color=black' : 'color=white', isDark ? 'color=white' : 'color=black');
+          }
+        });
+      });
+    }
+  }
+
+  toHtml(wholeMatch, lineSpace, leadingChar, content) {
+    // 去掉开头的空字符，去掉结尾的换行符
+    const wholeMatchWithoutSpace = wholeMatch.replace(/^[ \f\r\t\v]*/, '').replace(/\s*$/, '');
+    // 去掉匹配到的第一个换行符
+    const lineSpaceWithoutPreSpace = lineSpace.replace(/^[ \f\r\t\v]*\n/, '');
+    const sign = this.$engine.md5(wholeMatch);
+    let lines = this.getLineCount(wholeMatchWithoutSpace, lineSpaceWithoutPreSpace);
+    // 判断公式是不是新行输入，如果不是新行，则行号减1
+    if (!/\n/.test(lineSpace)) {
+      lines -= 1;
+    }
+    // 判断公式后面有没有尾接内容，如果尾接了内容，则行号减1
+    if (!/\n\s*$/.test(wholeMatch)) {
+      lines -= 1;
+    }
+    // 目前的机制还没有测过lines为负数的情况，先不处理
+    lines = lines > 0 ? lines : 0;
+
+    if (this.MathJax?.tex2svg) {
+      // MathJax渲染
+      const svg = getHTML(this.MathJax.tex2svg(content), true);
+      const result = `<div data-sign="${sign}" class="Cherry-Math" data-type="mathBlock"
+            data-lines="${lines}">${svg}</div>`;
+      return leadingChar + this.getCacheWithSpace(this.pushCache(result, sign, lines), wholeMatch);
+    }
+    const result = `<div data-sign="${sign}" class="Cherry-Math" data-type="mathBlock"
+            data-lines="${lines}"><img class="Cherry-Math-Latex" alt="latex" src="${
+      this.apiHost
+    }/?from=${encodeURIComponent(content)}&color=${Theme.isDark() ? 'white' : 'black'}" /></div>`;
+    return leadingChar + this.getCacheWithSpace(this.pushCache(result, sign, lines), wholeMatch);
+  }
+
+  beforeMakeHtml(str) {
+    if (isLookbehindSupported()) {
+      return str.replace(this.RULE.reg, this.toHtml.bind(this));
+    }
+    return replaceLookbehind(str, this.RULE.reg, this.toHtml.bind(this), true, 1);
+  }
+
+  makeHtml(str) {
+    return str;
+  }
+
+  rule() {
+    const ret = {
+      begin: isLookbehindSupported() ? '(\\s*)((?<!\\\\))~D~D\\s*' : '(\\s*)(^|[^\\\\])~D~D\\s*',
+      content: '([\\w\\W]*?)',
+      end: '(\\s*)~D~D(?:\\s{0,1})',
+    };
+    ret.reg = new RegExp(ret.begin + ret.content + ret.end, 'g');
+    return ret;
+  }
+}

package/src/core/hooks/Panel.js

@@ -0,0 +1,170 @@
+/**
+ * Copyright (C) 2021 THL A29 Limited, a Tencent company.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import ParagraphBase from '@/core/ParagraphBase';
+import { prependLineFeedForParagraph } from '@/utils/lineFeed';
+import { getPanelRule } from '@/utils/regexp';
+import { blockNames } from '@/utils/sanitize';
+
+/**
+ * 面板语法
+ * 例：
+ *  :::tip
+ *  这是一段提示信息
+ *  :::
+ *  :::warning
+ *  这是一段警告信息
+ *  :::
+ *  :::danger
+ *  这是一段危险信息
+ *  :::
+ */
+export default class Panel extends ParagraphBase {
+  static HOOK_NAME = 'panel';
+
+  constructor(options) {
+    super({ needCache: true });
+    this.initBrReg(options.globalConfig.classicBr);
+  }
+
+  makeHtml(str, sentenceMakeFunc) {
+    return str.replace(this.RULE.reg, (match, preLines, name, content) => {
+      const lineCount = this.getLineCount(match, preLines);
+      const sign = this.$engine.md5(match);
+      const { title, body, appendStyle, className } = this.$getPanelInfo(name, content, sentenceMakeFunc);
+      const ret = this.pushCache(
+        `<div class="${className}" data-sign="${sign}" data-lines="${lineCount}" ${appendStyle}>${title}${body}</div>`,
+        sign,
+        lineCount,
+      );
+      return prependLineFeedForParagraph(match, ret);
+    });
+  }
+
+  $getClassByType(type) {
+    if (/(left|right|center)/i.test(type)) {
+      return `cherry-text-align cherry-text-align__${type}`;
+    }
+    return `cherry-panel cherry-panel__${type}`;
+  }
+
+  $getPanelInfo(name, str, sentenceMakeFunc) {
+    const ret = {
+      type: this.$getTargetType(name),
+      title: sentenceMakeFunc(this.$getTitle(name)).html,
+      body: str,
+      appendStyle: '',
+      className: '',
+    };
+    ret.className = this.$getClassByType(ret.type);
+    if (/(left|right|center)/i.test(ret.type)) {
+      ret.appendStyle = `style="text-align:${ret.type};"`;
+    }
+    ret.title = `<div class="cherry-panel--title ${ret.title ? 'cherry-panel--title__not-empty' : ''}">${
+      ret.title
+    }</div>`;
+    const paragraphProcessor = (str) => {
+      if (str.trim() === '') {
+        return '';
+      }
+      // 调用行内语法，获得段落的签名和对应html内容
+      const { html } = sentenceMakeFunc(str);
+      let domName = 'p';
+      // 如果包含html块级标签（比如div、blockquote等），则当前段落外层用div包裹，反之用p包裹
+      const isContainBlockTest = new RegExp(`<(${blockNames})[^>]*>`, 'i');
+      if (isContainBlockTest.test(html)) {
+        domName = 'div';
+      }
+      return `<${domName}>${this.$cleanParagraph(html)}</${domName}>`;
+    };
+    let $body = '';
+    if (this.isContainsCache(ret.body)) {
+      $body = this.makeExcludingCached(ret.body, paragraphProcessor);
+    } else {
+      $body = paragraphProcessor(ret.body);
+    }
+    ret.body = `<div class="cherry-panel--body">${$body}</div>`;
+    return ret;
+  }
+
+  $getTitle(name) {
+    const $name = name.trim();
+    return /\s/.test($name) ? $name.replace(/[^\s]+\s/, '') : '';
+  }
+
+  $getTargetType(name) {
+    const $name = /\s/.test(name.trim()) ? name.trim().replace(/\s.*$/, '') : name;
+    const $item = $name.trim().toLowerCase();
+    switch ($item) {
+      case 'im':
+        return 'important';
+      case 'i':
+        return 'info';
+      case 'w':
+        return 'warning';
+      case 'd':
+        return 'danger';
+      case 'n':
+        return 'note';
+      case 'r':
+        return 'right';
+      case 'c':
+        return 'center';
+      case 'l':
+        return 'left';
+      case 't':
+        return 'tip';
+      default:
+        return $item;
+    }
+  }
+
+  rule() {
+    return getPanelRule();
+  }
+
+  overlayMode() {
+    return {
+      inContainer: false,
+      inType: false,
+      name: 'panel',
+      token(stream, state) {
+        // 检查行的开头是否有 ':::'
+        if (stream.sol() && stream.match(':::')) {
+          this.inContainer = stream.peek() !== null;
+          this.inType = false;
+          return 'panel-container';
+        }
+
+        const rule = /\s(important|info|warning|danger|note|center|left|right|tip)/;
+
+        // 尝试匹配规则
+        if (this.inContainer && stream.match(rule)) {
+          this.inContainer = false;
+          this.inType = true;
+          return 'panel-type';
+        }
+        if (this.inType && stream.match(/\s.*$/)) {
+          this.inType = false;
+          return 'panel-title';
+        }
+        this.inType = false;
+        this.inContainer = false;
+        stream.next(); // 前进到下一个字符
+        return null; // 默认返回 null
+      },
+    };
+  }
+}

package/src/core/hooks/Paragraph.js

@@ -0,0 +1,84 @@
+/**
+ * Copyright (C) 2021 THL A29 Limited, a Tencent company.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import ParagraphBase from '@/core/ParagraphBase';
+import { blockNames } from '@/utils/sanitize';
+/**
+ * 段落级语法
+ * 段落级语法可以具备以下特性：
+ *  1、排他性，可以排除将当前语法之后的所有段落语法
+ *  2、可排序，在../HooksConfig.js里设置排序，顺序在前面的段落语法先渲染
+ *  3、可嵌套行内语法
+ *
+ * 段落级语法有以下义务：
+ *  1、维护签名，签名用来实现预览区域的局部更新功能
+ *  2、维护行号，行号用来实现编辑区和预览区同步滚动
+ *     每个段落语法负责计算上文的行号，上文行号不是0就是1，大于1会由BR语法计算行号
+ */
+export default class Paragraph extends ParagraphBase {
+  static HOOK_NAME = 'normalParagraph';
+
+  constructor(options) {
+    super();
+    this.initBrReg(options.globalConfig.classicBr);
+  }
+
+  /**
+   * 段落语法的核心渲染函数
+   * @param {string} str markdown源码
+   * @param {Function} sentenceMakeFunc 行内语法渲染器
+   * @returns {string} html内容
+   */
+  makeHtml(str, sentenceMakeFunc) {
+    if (!this.test(str)) {
+      return str;
+    }
+    return str.replace(this.RULE.reg, (match, preLines, content) => {
+      if (this.isContainsCache(match, true)) {
+        return match;
+      }
+      // 判断当前内容里是否包含段落渲染引擎暂存缓存关键字
+      const cacheMixedInMatches = this.isContainsCache(content);
+      const processor = (p) => {
+        if (p.trim() === '') {
+          return '';
+        }
+        // 调用行内语法，获得段落的签名和对应html内容
+        const { sign, html } = sentenceMakeFunc(p);
+        let domName = 'p';
+        // 如果包含html块级标签（比如div、blockquote等），则当前段落外层用div包裹，反之用p包裹
+        const isContainBlockTest = new RegExp(`<(${blockNames})[^>]*>`, 'i');
+        if (isContainBlockTest.test(html)) {
+          domName = 'div';
+        }
+        // 计算行号
+        const lines = this.getLineCount(p, p);
+        return `<${domName} data-sign="${sign}${lines}" data-type="${domName}" data-lines="${lines}">${this.$cleanParagraph(
+          html,
+        )}</${domName}>`;
+      };
+      if (cacheMixedInMatches) {
+        return this.makeExcludingCached(`${preLines}${content}`, processor);
+      }
+      return processor(`${preLines}${content}`);
+    });
+  }
+
+  rule() {
+    const ret = { begin: '(?:^|\\n)(\\n*)', end: '(?=\\s*$|\\n\\n)', content: '([\\s\\S]+?)' };
+    ret.reg = new RegExp(ret.begin + ret.content + ret.end, 'g');
+    return ret;
+  }
+}

package/src/core/hooks/Ruby.js

@@ -0,0 +1,34 @@
+/**
+ * Copyright (C) 2021 THL A29 Limited, a Tencent company.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import SyntaxBase from '@/core/SyntaxBase';
+
+// 拼音语法
+export default class Ruby extends SyntaxBase {
+  static HOOK_NAME = 'ruby';
+
+  makeHtml(str) {
+    if (!this.test(str)) {
+      return str;
+    }
+    return str.replace(this.RULE.reg, `$1<ruby>$2<rt>$3</rt></ruby>$4`);
+  }
+
+  rule() {
+    const ret = { begin: '(^| )\\{', end: '\\}( |$)', content: '([^\n]+?)\\|([^\n]+?)' };
+    ret.reg = new RegExp(ret.begin + ret.content + ret.end, 'g');
+    return ret;
+  }
+}