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

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:

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