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;
}