I’m trying to convert a Markdown file containing a simple bar chart created with inline HTML and CSS to an HTML file using Pandoc. The Markdown preview in Visual Studio Code displays the chart perfectly fine, but the output from Pandoc is incorrect, with the chart elements not being rendered properly.
Here is the Markdown content I’m using:
# 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.
To convert it to HTML, I’m using the following Pandoc command:
pandoc -o output.html bar_chart.md
The resulting HTML file doesn’t render the chart as expected. Here’s a screenshot comparison between the Markdown preview in Visual Studio Code (which is correct) and the HTML output from Pandoc:
Visual Studio Code (Correct):
Pandoc HTML Output (Incorrect):
Does anyone know why Pandoc might be rendering the inline HTML incorrectly, and how I can fix this?
I found a partial solution to the problem by switching from inline CSS to an external CSS file. Pandoc seems to handle external stylesheets better, which resolves the rendering issue in the HTML output.
Here’s how I updated the Markdown file:
# 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>
And here’s the content of the styles.css file:
.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;
}
With this setup, running the command:
pandoc -o output.html bar_chart.md
produces the correct HTML output where the bar chart is rendered as expected.
The downside, however, is that Visual Studio Code’s Markdown preview can no longer render the chart since it doesn’t automatically load external CSS files.
This approach works if you prioritize the final HTML output over the Markdown preview in VS Code. If anyone has a way to make this work both in Pandoc and VS Code, I’d love to hear it!