Pandoc 错误地将 Markdown 中的内联 HTML/CSS 渲染为 HTML

Question

我正在尝试使用 Pandoc 将包含使用内联 HTML 和 CSS 创建的简单条形图的 Markdown 文件转换为 HTML 文件。 Visual Studio Code 中的 Markdown 预览完美地显示了图表，但 Pandoc 的输出不正确，图表元素未正确渲染。

这是我正在使用的 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.

要将其转换为 HTML，我使用以下 Pandoc 命令：

pandoc -o output.html bar_chart.md

生成的 HTML 文件未按预期呈现图表。以下是 Visual Studio Code 中的 Markdown 预览（正确）与 Pandoc 的 HTML 输出之间的屏幕截图比较：

Visual Studio 代码（正确）：

Pandoc HTML 输出（不正确）：

有谁知道为什么 Pandoc 可能会错误地渲染内联 HTML，以及如何解决这个问题？

Answer 1

我通过从内联 CSS 切换到外部 CSS 文件找到了该问题的部分解决方案。 Pandoc 似乎可以更好地处理外部样式表，这解决了 HTML 输出中的渲染问题。

以下是我更新 Markdown 文件的方法：

# Bar Chart Example

<link rel="stylesheet" type="text/css" href="styles.css">
<div class="chart-container">
  <div class="bar" style="height: 60%;">A</div>
  <div class="bar" style="height: 80%;">B</div>
  <div class="bar" style="height: 40%;">C</div>
  <div class="bar" style="height: 100%;">D</div>
  <div class="bar" style="height: 70%;">E</div>
</div>

这是

styles.css

文件的内容：

.chart-container {
  width: 300px;
  height: 200px;
  border: 1px solid #ccc;
  padding: 20px;
  display: flex;
  align-items: flex-end;
  justify-content: space-around;
}

.bar {
  width: 40px;
  background-color: #3498db;
  margin: 0 5px;
  text-align: center;
  font-family: Arial, sans-serif;
  font-size: 12px;
  padding-top: 5px;
}

通过此设置，运行命令：

pandoc -o output.html bar_chart.md

产生正确的 HTML 输出，其中条形图按预期呈现。

然而，缺点是 Visual Studio Code 的 Markdown 预览无法再渲染图表，因为它不会自动加载外部 CSS 文件。

如果您优先考虑最终 HTML 输出而不是 VS Code 中的 Markdown 预览，则此方法有效。如果有人有办法在 Pandoc 和 VS Code 中实现此功能，我很想听听！