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_915921431 小时前
运营日志驱动,在 iOS 26 上掌握 App 日志管理实践
android·macos·ios·小程序·uni-app·cocoa·iphone
马拉萨的春天2 小时前
iOS的多线程下数据安全和内存泄漏以及工具使用监测内存泄漏
macos·ios·cocoa·多线程
麦麦大数据8 小时前
D025 摩托车推荐价格预测可视化系统|推荐算法|机器学习|预测算法|用户画像与数据分析
mysql·算法·机器学习·django·vue·推荐算法·价格预测
2501_9151063210 小时前
HTTPS 爬虫实战指南 从握手原理到反爬应对与流量抓包分析
爬虫·网络协议·ios·小程序·https·uni-app·iphone
2501_9160074710 小时前
iOS 上架技术支持全流程解析,从签名配置到使用 开心上架 的实战经验分享
android·macos·ios·小程序·uni-app·cocoa·iphone
七仔的博客10 小时前
Vue视差标题背景
vue·博客·动画·视差
梁辰兴10 小时前
企业培训笔记:外卖平台后端--套餐管理模块--回显套餐信息
笔记·vue·mybatis·springboot·外卖管理系统
非专业程序员Ping20 小时前
一文读懂字体文件
ios·swift·assembly·font
Olrookie1 天前
若依前后端分离版学习笔记(二十)——实现滑块验证码(vue3)
java·前端·笔记·后端·学习·vue·ruoyi
duansamve1 天前
Vue3和vue2的Diff算法有何差异?
vue·vue3·vue2·diff