mardown-it 有序列表ios序号溢出解决办法

javascript 复制代码
const md = new MarkdownIt({ html: true })

if (Tools.browserEnv().isIOS()) {
  // 先保存默认规则,避免覆盖掉 ul 的逻辑
  const defaultOrderedListOpen = md.renderer.rules.ordered_list_open || function (tokens, idx, options, env, self) {
    return self.renderToken(tokens, idx, options);
  };
  const defaultOrderedListClose = md.renderer.rules.ordered_list_close || function (tokens, idx, options, env, self) {
    return self.renderToken(tokens, idx, options);
  };
  const defaultListItemOpen = md.renderer.rules.list_item_open || function (tokens, idx, options, env, self) {
    return self.renderToken(tokens, idx, options);
  };
  const defaultListItemClose = md.renderer.rules.list_item_close || function (tokens, idx, options, env, self) {
    return self.renderToken(tokens, idx, options);
  };

  // 只改 <ol>
  md.renderer.rules.ordered_list_open = function (tokens, idx, options, env, self) {
    const token = tokens[idx];
    if (token.type !== 'ordered_list_open') {
      return defaultOrderedListOpen(tokens, idx, options, env, self);
    }
    return '<div class="markdown-list">\n';
  };

  md.renderer.rules.ordered_list_close = function (tokens, idx, options, env, self) {
    const token = tokens[idx];
    if (token.type !== 'ordered_list_close') {
      return defaultOrderedListClose(tokens, idx, options, env, self);
    }
    return '</div>\n';
  };

  // 只改 <ol> 下的 <li>
  md.renderer.rules.list_item_open = function (tokens, idx, options, env, self) {
    const token = tokens[idx];

    // 向上找父级
    let parent;
    for (let i = idx - 1; i >= 0; i--) {
      if (tokens[i].type.endsWith('_open') && tokens[i].level === token.level - 1) {
        parent = tokens[i];
        break;
      }
    }

    // 不是 ol → 默认渲染
    if (!parent || parent.type !== 'ordered_list_open') {
      return defaultListItemOpen(tokens, idx, options, env, self);
    }

    // --- 处理 ol ---
    let order = 1;
    if (parent.attrGet('start')) {
      order = parseInt(parent.attrGet('start'));
    }

    // 计算 li 的序号
    let liIndex = 0;
    for (let i = idx; i >= 0; i--) {
      if (tokens[i].type === 'list_item_open' && tokens[i].level === token.level) {
        liIndex++;
      } else if (tokens[i].type === 'ordered_list_open' && tokens[i].level < token.level) {
        break;
      }
    }

    return `<div class="markdown-list-item"><span class="number">${order + liIndex - 1}.</span><span class="text">`;
  };

  md.renderer.rules.list_item_close = function (tokens, idx, options, env, self) {
    const token = tokens[idx];

    // 向上找父级
    let parent;
    for (let i = idx - 1; i >= 0; i--) {
      if (tokens[i].type.endsWith('_open') && tokens[i].level === token.level - 1) {
        parent = tokens[i];
        break;
      }
    }

    // 不是 ol → 默认渲染
    if (!parent || parent.type !== 'ordered_list_open') {
      return defaultListItemClose(tokens, idx, options, env, self);
    }

    return '</span></div>\n';
  };
}

style:

css 复制代码
.markdown-list {
  padding-left: 0;
}

.markdown-list-item {
  display: flex;
  align-items: flex-start;
  // margin-bottom: 0.5em;
}

.markdown-list-item .number {
  // width: 3ch; /* 适应最大编号长度 */
  margin-right: 0.5em;
  text-align: left;
  // font-variant-numeric: tabular-nums;
  flex-shrink: 0;
}

.markdown-list-item .text {
  flex: 1;
}
相关推荐
2501_916013748 小时前
iOS 26 系统流畅度检测 从视觉特效到帧率稳定的实战策略
android·macos·ios·小程序·uni-app·cocoa·iphone
咕噜企业签名分发-淼淼13 小时前
App防止恶意截屏功能的方法:iOS、Android和鸿蒙系统的实现方案
android·ios·harmonyos
游戏开发爱好者818 小时前
iOS 26 崩溃日志深度解读,获取方式、系统变动、定位策略
android·macos·ios·小程序·uni-app·cocoa·iphone
深盾科技21 小时前
如何读懂Mach-O:构建macOS和iOS应用安全的第一道认知防线
安全·macos·ios
FreeBuf_1 天前
iOS 0Day漏洞CVE-2025-24085相关PoC利用细节已公开
macos·ios·cocoa
林鸿群1 天前
MacOS arm64 编译GStreamer iOS平台库
macos·ios
2501_916007472 天前
iOS 混淆与团队协作,研发、安全、运维、测试如何在加固流程中高效配合(iOS 混淆、ipa 加固、协作治理)
android·ios·小程序·https·uni-app·iphone·webview
HarderCoder2 天前
Swift 6.1 `withTaskGroup` & `withThrowingTaskGroup` 新语法导读
ios·swift
HarderCoder2 天前
Swift 并发:Actor、isolated、nonisolated 完全导读
ios·swift
贝多财经2 天前
OPPO手机“绿线”问题争议,高价等于高端,何以分食iPhone市场?
ios·智能手机·iphone