@cherry-markdown/cherry-markdown-dev 0.8.58-dev

package/src/core/hooks/Emoji.js

@@ -0,0 +1,119 @@
+/**
+ * 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';
+import { escapeHTMLSpecialCharOnce as _e } from '@/utils/sanitize';
+import { compileRegExp } from '@/utils/regexp';
+import { gfmUnicode } from './Emoji.config';
+
+// ref: https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/String/fromCodePoint
+function fromCodePoint(...args) {
+  const codeUnits = [];
+  let codeLen = 0;
+  let result = '';
+  for (let index = 0, len = args.length; index !== len; ++index) {
+    let codePoint = +args[index];
+    // correctly handles all cases including `NaN`, `-Infinity`, `+Infinity`
+    // The surrounding `!(...)` is required to correctly handle `NaN` cases
+    // The (codePoint>>>0) === codePoint clause handles decimals and negatives
+    if (!(codePoint < 0x10ffff && codePoint >>> 0 === codePoint)) {
+      throw new RangeError(`Invalid code point: ${codePoint}`);
+    }
+    if (codePoint <= 0xffff) {
+      // BMP code point
+      codeLen = codeUnits.push(codePoint);
+    } else {
+      // Astral code point; split in surrogate halves
+      // https://mathiasbynens.be/notes/javascript-encoding#surrogate-formulae
+      codePoint -= 0x10000;
+      codeLen = codeUnits.push(
+        (codePoint >> 10) + 0xd800, // highSurrogate
+        (codePoint % 0x400) + 0xdc00, // lowSurrogate
+      );
+    }
+    if (codeLen >= 0x3fff) {
+      result += String.fromCharCode.apply(null, codeUnits);
+      codeUnits.length = 0;
+    }
+  }
+  return result + String.fromCharCode.apply(null, codeUnits);
+}
+
+export default class Emoji extends SyntaxBase {
+  static HOOK_NAME = 'emoji';
+
+  constructor({ config } = { config: undefined }) {
+    super({ config });
+    this.options = {
+      useUnicode: true,
+      upperCase: false,
+      customHandled: false,
+      resourceURL: 'https://github.githubassets.com/images/icons/emoji/unicode/${code}.png?v8',
+      emojis: { ...gfmUnicode.emojis },
+    };
+    if (typeof config !== 'object') {
+      return;
+    }
+    const { useUnicode, customResourceURL, customRenderer, upperCase } = config;
+    this.options.useUnicode = typeof useUnicode === 'boolean' ? useUnicode : this.options.useUnicode;
+    this.options.upperCase = typeof upperCase === 'boolean' ? upperCase : this.options.upperCase;
+    if (useUnicode === false && typeof customResourceURL === 'string') {
+      this.options.resourceURL = customResourceURL;
+    }
+    if (typeof customRenderer === 'function') {
+      this.options.customHandled = true;
+      this.options.customRenderer = customRenderer;
+    }
+    // TODO: URL Validator
+  }
+
+  makeHtml(str, sentenceMakeFunc) {
+    if (!this.test(str)) {
+      return str;
+    }
+    return str.replace(this.RULE.reg, (match, emojiKey) => {
+      // 先走自定义渲染逻辑
+      if (this.options.customHandled && typeof this.options.customRenderer === 'function') {
+        return this.options.customRenderer(emojiKey);
+      }
+      let emojiCode = this.options.emojis[emojiKey];
+      if (typeof emojiCode !== 'string') {
+        return match;
+      }
+      if (this.options.useUnicode) {
+        const codes = emojiCode.split('-').map((unicode) => `0x${unicode}`); // convert to hex string
+        return fromCodePoint(...codes);
+      }
+      if (this.options.upperCase) {
+        emojiCode = emojiCode.toUpperCase();
+      }
+      const src = this.options.resourceURL.replace(/\$\{code\}/g, emojiCode);
+      return `<img class="emoji" src="${src}" alt="${_e(emojiKey)}" />`;
+    });
+  }
+
+  rule() {
+    // (?<protocol>\\w+:)\\/\\/
+    const ret = {
+      // ?<left>
+      begin: ':',
+      content: '([a-zA-Z0-9+_]+?)',
+      // ?<right>
+      end: ':',
+    };
+    ret.reg = compileRegExp(ret, 'g');
+    return ret;
+  }
+}

package/src/core/hooks/Emphasis.js

@@ -0,0 +1,113 @@
+/**
+ * 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';
+import { compileRegExp, ALLOW_WHITESPACE_MULTILINE, UNDERSCORE_EMPHASIS_BOUNDARY } from '@/utils/regexp';
+
+export default class Emphasis extends SyntaxBase {
+  static HOOK_NAME = 'fontEmphasis';
+
+  constructor({ config } = { config: undefined }) {
+    super({ config });
+    if (!config) {
+      return;
+    }
+    this.allowWhitespace = !!config.allowWhitespace;
+  }
+
+  makeHtml(str, sentenceMakeFunc) {
+    const converAsterisk = function (match, leading, symbol, text) {
+      const tagType = symbol.length % 2 === 1 ? 'em' : 'strong';
+      const repeat = Math.floor(symbol.length / 2);
+      let prefix = '<strong>'.repeat(repeat);
+      let suffix = '</strong>'.repeat(repeat);
+      if (tagType === 'em') {
+        prefix += '<em>';
+        suffix = `</em>${suffix}`;
+      }
+      // 这里转义_是为了避免跨标签识别
+      const result = `${leading}${prefix}${sentenceMakeFunc(text).html.replace(/_/g, '~U')}${suffix}`;
+      return result;
+    };
+    let $str = str;
+    if (this.allowWhitespace) {
+      $str = $str.replace(/(^[\s]*|\n[\s]*)(\*)([^\s*](?:.*?)(?:(?:\n.*?)*?))\*/g, converAsterisk);
+      $str = $str.replace(/(^[\s]*|\n[\s]*)(\*{2,})((?:.*?)(?:(?:\n.*?)*?))\2/g, converAsterisk);
+      $str = $str.replace(/([^\n*\\\s][ ]*)(\*+)((?:.*?)(?:(?:\n.*?)*?))\2/g, converAsterisk);
+    } else {
+      // TODO: fix this error
+      // @ts-expect-error
+      $str = $str.replace(this.RULE.asterisk.reg, converAsterisk);
+    }
+
+    // TODO: fix this error
+    // @ts-expect-error
+    $str = $str.replace(this.RULE.underscore.reg, (match, leading, symbol, text, index, string) => {
+      if (text.trim() === '') {
+        return match;
+      }
+      const tagType = symbol.length % 2 === 1 ? 'em' : 'strong';
+      const repeat = Math.floor(symbol.length / 2);
+      let prefix = '<strong>'.repeat(repeat);
+      let suffix = '</strong>'.repeat(repeat);
+      const innerText = sentenceMakeFunc(text).html;
+      if (tagType === 'em') {
+        // if(/<em>.*?<\/em>/.test(innerText)) {
+        //     prefix += symbol;
+        //     suffix = symbol + suffix;
+        // } else {
+        prefix += '<em>';
+        suffix = `</em>${suffix}`;
+        // }
+      }
+      const result = `${leading}${prefix}${innerText}${suffix}`;
+      return result;
+    });
+
+    return $str.replace(/~U/g, '_');
+  }
+
+  test(str, flavor) {
+    return this.RULE[flavor].reg && this.RULE[flavor].reg.test(str);
+  }
+
+  /**
+   * TODO: fix type errors, prefer use `rules` for multiple spec instead
+   * @returns
+   */
+  rule({ config } = { config: undefined }) {
+    const allowWhitespace = config ? !!config.allowWhitespace : false;
+    const emRegexp = (allowWhitespace, symbol) => {
+      const char = `[^${symbol}\\s]`;
+      return allowWhitespace ? ALLOW_WHITESPACE_MULTILINE : `(${char}|${char}(.*?(\n${char}.*)*)${char})`;
+    };
+    const asterisk = {
+      begin: '(^|[^\\\\])([*]+)', // ?<leading>, ?<symbol>
+      content: `(${emRegexp(allowWhitespace, '*')})`, // ?<text>
+      end: '\\2',
+    };
+
+    // UNDERSCORE_EMPHASIS_BORDER：允许除下划线以外的「标点符号」和空格出现，使用[^\w\S \t]或[\W\s]会有性能问题
+    const underscore = {
+      begin: `(^|${UNDERSCORE_EMPHASIS_BOUNDARY})(_+)`, // ?<leading>, ?<symbol>
+      content: `(${emRegexp(allowWhitespace, '_')})`, // ?<text>
+      end: `\\2(?=${UNDERSCORE_EMPHASIS_BOUNDARY}|$)`,
+    };
+
+    asterisk.reg = compileRegExp(asterisk, 'g');
+    underscore.reg = compileRegExp(underscore, 'g');
+    return /** @type {any} */ ({ asterisk, underscore });
+  }
+}

package/src/core/hooks/Footnote.js

@@ -0,0 +1,125 @@
+/**
+ * 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 { compileRegExp } from '@/utils/regexp';
+
+export default class Footnote extends ParagraphBase {
+  static HOOK_NAME = 'footnote';
+
+  constructor({ externals, config }) {
+    super();
+    this.footnoteCache = {};
+    this.footnoteMap = {}; // 角标缓存索引
+    this.footnote = [];
+  }
+
+  $cleanCache() {
+    this.footnoteCache = {};
+    this.footnoteMap = {}; // 角标缓存索引
+    this.footnote = [];
+  }
+
+  pushFootnoteCache(key, cache) {
+    this.footnoteCache[key] = cache;
+  }
+
+  getFootnoteCache(key) {
+    return this.footnoteCache[key] || null;
+  }
+
+  pushFootNote(key, note) {
+    if (this.footnoteMap[key]) {
+      // 重复引用时返回已缓存下标
+      return this.footnoteMap[key];
+    }
+    const num = this.footnote.length + 1;
+    const fn = {};
+    fn.fn = `<sup><a href="#fn:${num}" id="fnref:${num}" title="${key}" class="footnote">[${num}]</a></sup>`;
+    fn.fnref = `<a href="#fnref:${num}" id="fn:${num}" title="${key}" class="footnote-ref">[${num}]</a>`;
+    fn.num = num;
+    fn.note = note.trim();
+    this.footnote.push(fn);
+    const replaceKey = `\0~fn#${num - 1}#\0`;
+    this.footnoteMap[key] = replaceKey;
+    return replaceKey;
+  }
+
+  getFootNote() {
+    return this.footnote;
+  }
+
+  formatFootNote() {
+    const footnote = this.getFootNote();
+    if (footnote.length <= 0) {
+      return '';
+    }
+    let html = footnote.map((note) => `<div class="one-footnote">\n${note.fnref}${note.note}\n</div>`).join('');
+    const sign = this.$engine.hash(html);
+    html = `<div class="footnote" data-sign="${sign}" data-lines="0"><div class="footnote-title">脚注</div>${html}</div>`;
+    return html;
+  }
+
+  // getParagraphHook() {
+  //     return this.commentPAR;
+  // }
+
+  beforeMakeHtml(str) {
+    // 单行注释，TODO: 替换为引用
+    // str = str.replace(/(^|\n)\[([^^][^\]]*?)\]:([^\n]+?)(?=$|\n)/g, '$1');
+    let $str = str;
+    if (this.test($str)) {
+      $str = $str.replace(this.RULE.reg, (match, leading, key, content) => {
+        this.pushFootnoteCache(key, content);
+        const LF = match.match(/\n/g) || [];
+        return LF.join('');
+      });
+      // 替换实际引用
+      $str = $str.replace(/\[\^([^\]]+?)\](?!:)/g, (match, key) => {
+        const cache = this.getFootnoteCache(key);
+        if (cache) {
+          return this.pushFootNote(key, cache);
+        }
+        return match;
+      });
+      $str += this.formatFootNote();
+    }
+    return $str;
+  }
+
+  makeHtml(str, sentenceMakeFunc) {
+    return str;
+  }
+
+  afterMakeHtml(str) {
+    const footNotes = this.getFootNote();
+    const $str = str.replace(/\0~fn#([0-9]+)#\0/g, (match, num) => footNotes[num].fn);
+    // this.$cleanCache();
+    return $str;
+  }
+
+  rule() {
+    const ret = {
+      begin: '(^|\\n)[ \t]*',
+      content: [
+        '\\[\\^([^\\]]+?)\\]:\\h*', // footnote key
+        '([\\s\\S]+?)', // footnote content
+      ].join(''),
+      end: '(?=\\s*$|\\n\\n)',
+    };
+    ret.reg = compileRegExp(ret, 'g', true);
+    return ret;
+  }
+}

package/src/core/hooks/FrontMatter.js

@@ -0,0 +1,51 @@
+/**
+ * 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 { compileRegExp } from '@/utils/regexp';
+
+export default class FrontMatter extends ParagraphBase {
+  static HOOK_NAME = 'frontMatter';
+
+  constructor(options) {
+    super({ needCache: true });
+  }
+
+  beforeMakeHtml(str) {
+    return str.replace(this.RULE.reg, (match, content) => {
+      const lineCount = match.match(/\n/g)?.length ?? 0;
+      const sign = `fontMatter${lineCount}`;
+      content.replace(/(?:^|\n)\s*(font-size|fontSize): ([0-9a-zA-Z]+)(\n|$)/, (match, m1, m2) => {
+        this.$engine.$cherry.previewer.getDom().style.fontSize = m2;
+        return match;
+      });
+      // 预判下是否为json格式，json格式就去掉换行，yaml格式就把换成换成分号
+      const dataContent = /^\s*{/.test(content) ? content.replace(/\n/g, '') : content.replace(/\n/g, ';');
+      const html = `<p data-sign="${sign}" data-type="frontMatter" data-lines="${lineCount}" data-content="${dataContent}"></p>`;
+      const placeHolder = this.pushCache(html, sign, lineCount);
+      return `${placeHolder}\n`;
+    });
+  }
+
+  makeHtml(str, sentenceMakeFunc) {
+    return str;
+  }
+
+  rule() {
+    const ret = { begin: '^\\s*-{3,}[^\\n]*\\n', end: '\\n-{3,}[^\\n]*\\n', content: '([\\s\\S]+?)' };
+    ret.reg = compileRegExp(ret, 'g', true);
+    return ret;
+  }
+}

package/src/core/hooks/Header.js

@@ -0,0 +1,234 @@
+/**
+ * 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 { compileRegExp } from '@/utils/regexp';
+import { calculateLinesOfParagraph } from '@/utils/lineFeed';
+
+const ATX_HEADER = 'atx';
+const SETEXT_HEADER = 'setext';
+const toDashChars = /[\s\-_]/;
+const alphabetic = /[A-Za-z]/;
+const numeric = /[0-9]/;
+
+export default class Header extends ParagraphBase {
+  static HOOK_NAME = 'header';
+
+  constructor({ externals, config } = { config: undefined, externals: undefined }) {
+    super({ needCache: true });
+    this.strict = config ? !!config.strict : true;
+    this.RULE = this.rule();
+    this.headerIDCache = [];
+    this.headerIDCounter = {};
+    this.config = config || {};
+    // TODO: AllowCustomID
+  }
+
+  $parseTitleText(html = '') {
+    if (typeof html !== 'string') {
+      return '';
+    }
+    return html.replace(/<.*?>/g, '').replace(/&#60;/g, '<').replace(/&#62;/g, '>');
+  }
+
+  /**
+   * refer:
+   * @see https://github.com/vsch/flexmark-java/blob/8bf621924158dfed8b84120479c82704020a6927/flexmark
+   * /src/main/java/com/vladsch/flexmark/html/renderer/HeaderIdGenerator.java#L90-L113
+   *
+   * @param {string} headerText
+   * @param {boolean} [toLowerCase]
+   * @returns
+   */
+  $generateId(headerText, toLowerCase = true) {
+    const len = headerText.length;
+    let id = '';
+    for (let i = 0; i < len; i++) {
+      const c = headerText.charAt(i);
+      if (alphabetic.test(c)) {
+        id += toLowerCase ? c.toLowerCase() : c;
+      } else if (numeric.test(c)) {
+        id += c;
+      } else if (toDashChars.test(c)) {
+        id += id.length < 1 || id.charAt(id.length - 1) !== '-' ? '-' : '';
+      } else if (c.charCodeAt(0) > 255) {
+        // unicode
+        try {
+          id += encodeURIComponent(c);
+        } catch (error) {
+          // empty
+        }
+      }
+    }
+    return id;
+  }
+
+  generateIDNoDup(headerText) {
+    // 处理被引擎转换过的实体字符
+    const unescapedHeaderText = headerText.replace(/&#60;/g, '<').replace(/&#62;/g, '>');
+    let newId = this.$generateId(unescapedHeaderText, true);
+    const idIndex = this.headerIDCache.indexOf(newId);
+    if (idIndex !== -1) {
+      this.headerIDCounter[idIndex] += 1;
+      newId += `-${this.headerIDCounter[idIndex] + 1}`;
+    } else {
+      const newIndex = this.headerIDCache.push(newId);
+      this.headerIDCounter[newIndex - 1] = 1;
+    }
+    return newId;
+  }
+
+  $wrapHeader(text, level, dataLines, sentenceMakeFunc) {
+    // 需要经过一次escape
+    const processedText = sentenceMakeFunc(text.trim());
+    let { html } = processedText;
+    // TODO: allowCustomID开关
+    // let htmlAttr = this.getAttributes(html);
+    // html = htmlAttr.str;
+    // let attrs = htmlAttr.attrs;
+    // console.log(attrs);
+    const customIDRegex = /\s+\{#([A-Za-z0-9-]+)\}$/; // ?<id>
+    const idMatch = html.match(customIDRegex);
+    let anchorID;
+    if (idMatch !== null) {
+      html = html.substring(0, idMatch.index);
+      [, anchorID] = idMatch;
+    }
+    const headerTextRaw = this.$parseTitleText(html);
+    if (!anchorID) {
+      const replaceFootNote = /~fn#([0-9]+)#/g;
+      anchorID = this.generateIDNoDup(headerTextRaw.replace(replaceFootNote, ''));
+    }
+    const safeAnchorID = `safe_${anchorID}`; // transform header id to avoid being sanitized
+    const sign = this.$engine.hash(`${level}-${processedText.sign}-${anchorID}-${dataLines}`);
+    const result = [
+      `<h${level} id="${safeAnchorID}" data-sign="${sign}" data-lines="${dataLines}">`,
+      this.$getAnchor(anchorID),
+      `${html}`,
+      `</h${level}>`,
+    ].join('');
+    return { html: result, sign: `${sign}` };
+  }
+
+  $getAnchor(anchorID) {
+    const anchorStyle = this.config.anchorStyle || 'default';
+    if (anchorStyle === 'none') {
+      return '';
+    }
+    return `<a class="anchor" href="#${anchorID}"></a>`;
+  }
+
+  beforeMakeHtml(str) {
+    let $str = str;
+    if (this.$engine.$cherry.options.engine.global.flowSessionContext) {
+      // 适配流式会话的场景，文章末尾的段横线标题语法（`\n-`）失效
+      $str = $str.replace(/(\n\s*-{1,})\s*$/, '$1 ');
+    }
+    // atx 优先
+    if (this.test($str, ATX_HEADER)) {
+      $str = $str.replace(this.RULE[ATX_HEADER].reg, (match, lines, level, text) => {
+        if (text.trim() === '') {
+          return match;
+        }
+        return this.getCacheWithSpace(this.pushCache(match), match, true);
+      });
+    }
+    // 按照目前的引擎，每个hook只会执行一次，所以需要并行执行替换
+    if (this.test($str, SETEXT_HEADER)) {
+      $str = $str.replace(this.RULE[SETEXT_HEADER].reg, (match, lines, text) => {
+        if (text.trim() === '' || this.isContainsCache(text)) {
+          return match;
+        }
+        return this.getCacheWithSpace(this.pushCache(match), match, true);
+      });
+    }
+    return $str;
+  }
+
+  makeHtml(str, sentenceMakeFunc) {
+    // 先还原
+    let $str = this.restoreCache(str);
+    // atx 优先
+    if (this.test($str, ATX_HEADER)) {
+      $str = $str.replace(this.RULE[ATX_HEADER].reg, (match, lines, level, text) => {
+        // 其中有两行是beforeMake加上的
+        const lineCount = calculateLinesOfParagraph(lines, this.getLineCount(match.replace(/^\n+/, '')));
+        const $text = text.replace(/\s+#+\s*$/, ''); // close tag
+        const { html: result, sign } = this.$wrapHeader($text, level.length, lineCount, sentenceMakeFunc);
+        // 文章的开头不加换行
+        return this.getCacheWithSpace(this.pushCache(result, sign, lineCount), match, true);
+      });
+    }
+    // 按照目前的引擎，每个hook只会执行一次，所以需要并行执行替换
+    if (this.test($str, SETEXT_HEADER)) {
+      $str = $str.replace(this.RULE[SETEXT_HEADER].reg, (match, lines, text, level) => {
+        if (this.isContainsCache(text)) {
+          return match;
+        }
+        // 其中有两行是beforeMake加上的
+        const lineCount = calculateLinesOfParagraph(lines, this.getLineCount(match.replace(/^\n+/, '')));
+        const headerLevel = level[0] === '-' ? 2 : 1; // =: H1, -: H2
+        const { html: result, sign } = this.$wrapHeader(text, headerLevel, lineCount, sentenceMakeFunc);
+        // 文章的开头不加换行
+        return this.getCacheWithSpace(this.pushCache(result, sign, lineCount), match, true);
+      });
+    }
+    return $str;
+  }
+
+  afterMakeHtml(html) {
+    const $html = super.afterMakeHtml(html);
+    this.headerIDCache = [];
+    this.headerIDCounter = {};
+    return $html;
+  }
+
+  test(str, flavor) {
+    return this.RULE[flavor].reg && this.RULE[flavor].reg.test(str);
+  }
+
+  /**
+   * TODO: fix type errors, prefer use `rules` for multiple spec instead
+   * @returns
+   */
+  rule() {
+    // setext Header
+    // TODO: 支持多行标题
+    const setext = {
+      begin: '(?:^|\\n)(\\n*)', // (?<lines>\\n*)
+      content: [
+        '(?:\\h*',
+        '(.+)', // (?<text>.+)
+        ')\\n',
+        '(?:\\h*',
+        '([=]+|[-]+)', // (?<level>[=]+|[-]+)
+        ')',
+      ].join(''),
+      end: '(?=$|\\n)',
+    };
+    setext.reg = compileRegExp(setext, 'g', true);
+
+    // atx header
+    const atx = {
+      begin: '(?:^|\\n)(\\n*)(?:\\h*(#{1,6}))', // (?<lines>\\n*), (?<level>#{1,6})
+      content: '(.+?)', // '(?<text>.+?)'
+      end: '(?=$|\\n)',
+    };
+    this.strict && (atx.begin += '(?=\\h+)'); // (?=\\s+) for strict mode
+    atx.reg = compileRegExp(atx, 'g', true);
+
+    return /** @type {any} */ ({ setext, atx });
+  }
+}

package/src/core/hooks/HighLight.js

@@ -0,0 +1,37 @@
+/**
+ * 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.js';
+
+export default class HighLight extends SyntaxBase {
+  static HOOK_NAME = 'highLight';
+
+  makeHtml(str) {
+    if (!this.test(str)) {
+      return str;
+    }
+    return str.replace(this.RULE.reg, '$1<mark>$2</mark>$3');
+  }
+
+  rule() {
+    const ret = {
+      begin: '(^| )==',
+      end: '==( |$|\\n)',
+      content: '([^\\n]+?)',
+    };
+    ret.reg = new RegExp(ret.begin + ret.content + ret.end, 'g');
+    return ret;
+  }
+}