如何在markdown-it中自定义规则将\\包裹文本解析为斜体

你可以通过给markdown-it添加自定义内联解析规则实现需求，不需要修改原有解析逻辑和HTML模板，仅需在初始化md实例后新增自定义规则即可。

完整修改后的JS代码 #

const MarkdownIt = require('markdown-it')
const md = new MarkdownIt({
    html: true,
    linkify: true,
    typographer: true
});

// 新增：自定义双反斜杠斜体规则
md.inline.ruler.before('emphasis', 'custom_backslash_italic', (state, silent) => {
  const start = state.pos;
  // 匹配开头的两个反斜杠
  if (state.src.slice(start, start + 2) !== '\\\\') return false;
  // 查找结尾的两个反斜杠
  const end = state.src.indexOf('\\\\', start + 2);
  if (end === -1) return false;

  if (!silent) {
    // 生成斜体em标签的token
    state.push('em_open', 'em', 1).markup = '\\\\';
    state.push('text', '', 0).content = state.src.slice(start + 2, end);
    state.push('em_close', 'em', -1).markup = '\\\\';
  }
  // 移动解析指针到结束位置
  state.pos = end + 2;
  return true;
});

export default {
    methods: {
        marked(payload: string): string {
            if (payload) return this.parse(md.render(payload));
            return "";
        },
        parse(payload: string, type: any = "") {
            const parser = new DOMParser();
            const htmlDoc = parser.parseFromString(payload, "text/html");
            const links = htmlDoc.querySelectorAll("a");
            links.forEach(link => {
                link.setAttribute("target", "_blank");
                link.classList.add(
                    "hover:underline",
                    "hover:text-orange",
                    "text-indigo-200"
                );
            });
            if (type === "commentTask") {
                const divs = htmlDoc.querySelectorAll(
                    ".phabricator-remarkup-embed-layout-link"
                );
                divs.forEach(div => {
                    const url = div.attributes.item(0)?.value;
                    div.classList.add("border", "border-red-300", "p-2", "w-72", "mt-2");
                    const spans = div.querySelectorAll(
                        ".phabricator-remarkup-embed-layout-name"
                    );
                    spans.forEach(span => {
                        const newA = htmlDoc.createElement("a");
                        newA.classList.add("hover:text-orange", "mr-1", "pr-1");
                        newA.innerHTML = span.innerHTML;
                        newA.setAttribute("href", url as string);
                        newA.setAttribute("target", "_blank");
                        span.innerHTML = "";
                        span.appendChild(newA);
                    });
                    const as = div.querySelectorAll(
                        ".phabricator-remarkup-embed-layout-download"
                    );
                    as.forEach(a => {
                        a.classList.add("ml-2");
                        a.removeAttribute("target");
                    });
                });
            }
            return htmlDoc.documentElement.innerHTML;
        }
    }
};

效果说明 #

修改后原有*斜体文本*语法不受影响，新的\\自定义斜体\\格式会被自动解析为<em>自定义斜体</em>，默认渲染为斜体样式，你也可以自行给em标签添加自定义CSS样式调整效果。

内容的提问来源于stack exchange，提问作者Anjasmara Dwi.S