Pandoc转换含内嵌HTML/CSS的Markdown为HTML时渲染异常

云原生阿岚

2026-6-19

问题原因

转义引号解析异常：你在Markdown内嵌HTML中使用了转义双引号（"），Pandoc解析时无法正确识别完整的CSS样式规则，导致display: flex等关键布局属性失效，条形图无法横向排列。
默认模板样式冲突：Pandoc默认的HTML输出模板包含基础全局CSS，这些样式可能与你的内嵌inline CSS产生冲突，干扰布局的正常渲染。

VS Code的Markdown预览对HTML的解析逻辑更直接，既不会添加额外全局样式，也能兼容转义引号，因此可以正常显示图表。

解决方案

方案1：修正HTML引号格式

把内嵌HTML中所有的"替换为普通双引号，确保Pandoc能正确解析CSS样式。修改后的Markdown内容如下：

# Bar Chart Example

<div style="width: 300px; height: 200px; border: 1px solid #ccc; padding: 20px; display: flex; align-items: flex-end; justify-content: space-around;">
  <div style="width: 40px; background-color: #3498db; margin: 0 5px; height: 60%;">
    <div style="text-align: center; font-family: Arial, sans-serif; font-size: 12px; padding-top: 5px;">A</div>
  </div>
  <div style="width: 40px; background-color: #3498db; margin: 0 5px; height: 80%;">
    <div style="text-align: center; font-family: Arial, sans-serif; font-size: 12px; padding-top: 5px;">B</div>
  </div>
  <div style="width: 40px; background-color: #3498db; margin: 0 5px; height: 40%;">
    <div style="text-align: center; font-family: Arial, sans-serif; font-size: 12px; padding-top: 5px;">C</div>
  </div>
  <div style="width: 40px; background-color: #3498db; margin: 0 5px; height: 100%;">
    <div style="text-align: center; font-family: Arial, sans-serif; font-size: 12px; padding-top: 5px;">D</div>
  </div>
  <div style="width: 40px; background-color: #3498db; margin: 0 5px; height: 70%;">
    <div style="text-align: center; font-family: Arial, sans-serif; font-size: 12px; padding-top: 5px;">E</div>
  </div>
</div>

This is a simple bar chart created using HTML and inline CSS, embedded in Markdown.

方案2：禁用Pandoc默认样式

如果修改引号后仍存在样式冲突，可使用--no-default-style参数生成不含默认全局CSS的HTML，彻底避免样式干扰：

pandoc -o output.html --no-default-style bar_chart.md

方案3：使用自定义HTML模板

若需要保留基础页面样式但避免布局冲突，可创建自定义HTML模板（移除或修改可能干扰的CSS规则），转换时指定模板：

pandoc -o output.html --template=custom-template.html bar_chart.md

内容的提问来源于stack exchange，提问作者Foad S. Farimani