Rust终端渲染Markdown代码块行宽对齐问题求助

核心问题分析 #

你之前错误监听了HTML的<pre>标签事件，但pulldown_cmark解析原生Markdown代码块时，触发的是Start(CodeBlock(_))和End(CodeBlock(_))事件，而非HTML标签事件，这是状态跟踪失效的根本原因。另外，直接用字符串长度补全会包含ANSI转义码，导致实际显示宽度计算错误。

修复步骤 #

• 跟踪正确的代码块状态：在处理pulldown_cmark事件流时，通过CodeBlock事件标记代码块的开始和结束。
• 计算真实显示宽度：使用unicode-width crate计算文本的终端显示宽度，排除ANSI转义码的影响。
• 补全行到统一宽度：收集代码块内所有行的显示宽度，找到最大值后，对每一行补空格到该宽度。

代码示例 #

修改后的事件处理逻辑 #

use pulldown_cmark::{Event, Options, Parser, Tag};
use unicode_width::UnicodeWidthStr;
use regex::Regex;

fn render_markdown_to_terminal(markdown: &str) -> String {
    let mut options = Options::empty();
    options.insert(Options::ENABLE_CODE_BLOCKS);
    let parser = Parser::new_ext(markdown, options);

    let mut output = String::new();
    let mut in_code_block = false;
    let mut code_lines = Vec::new();
    let mut current_code_line = String::new();
    let ansi_re = Regex::new(r"\x1B\[[0-9;]*m").unwrap();

    for event in parser {
        match event {
            Event::Start(Tag::CodeBlock(_)) => {
                in_code_block = true;
                current_code_line.clear();
            }
            Event::End(Tag::CodeBlock(_)) => {
                // 添加最后一行到代码行列表
                if !current_code_line.is_empty() {
                    code_lines.push(current_code_line.clone());
                    current_code_line.clear();
                }
                // 计算代码块内最长行的显示宽度
                let max_width = code_lines
                    .iter()
                    .map(|line| {
                        let clean_line = ansi_re.replace_all(line, "");
                        clean_line.width()
                    })
                    .max()
                    .unwrap_or(0);
                // 补全行并输出
                for line in code_lines {
                    let clean_line = ansi_re.replace_all(&line, "");
                    let current_width = clean_line.width();
                    let padded_line = if current_width < max_width {
                        let pad_len = max_width - current_width;
                        format!("{}{}", line, " ".repeat(pad_len))
                    } else {
                        line
                    };
                    output.push_str(&padded_line);
                    output.push('\n');
                }
                code_lines.clear();
                in_code_block = false;
            }
            Event::Text(text) => {
                if in_code_block {
                    // 这里替换为你的实际语法高亮逻辑
                    let highlighted = apply_syntax_highlight(&text);
                    current_code_line.push_str(&highlighted);
                } else {
                    output.push_str(&text);
                }
            }
            Event::HardBreak | Event::SoftBreak => {
                if in_code_block {
                    code_lines.push(current_code_line.clone());
                    current_code_line.clear();
                } else {
                    output.push('\n');
                }
            }
            _ => {}
        }
    }

    output
}

// 示例语法高亮函数，需根据实际需求替换
fn apply_syntax_highlight(text: &str) -> String {
    format!("\x1B[38;5;14m{}\x1B[0m", text)
}

依赖调整 #

在Cargo.toml中添加所需依赖：

[dependencies]
pulldown-cmark = "0.9"
unicode-width = "0.1"
regex = "1.10"

测试用例验证 #

使用以下测试Markdown内容验证效果：

# 测试代码块
```rust
fn main() {
    println!("Hello");
    let x = 123456789;
}

运行后代码块内的每一行都会被补全到最长行的显示宽度，高亮背景区域将保持均匀一致。

内容的提问来源于stack exchange，提问作者bradys dev