Html Question posted in
Some basic documentation can be found here.

Pandoc Incorrectly Renders Inline HTML/CSS in Markdown to HTML

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):

enter image description here

Pandoc HTML Output (Incorrect):

enter image description here

Does anyone know why Pandoc might be rendering the inline HTML incorrectly, and how I can fix this?

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    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.

    enter image description here

    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.

    enter image description here

    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!

    P.S.1. I was able to sort the Visual Studio Code issue out. Create a .vscode folder in the same place as the root of the project, and create a settings.json file in that folder with the content:

    {
  "markdown.styles": ["Style.css"]
}

    P.S.2. I just discovered Charts.css and it seems amazing.


  2. 0

    First, let us look at why the pandoc output looks different:

    Pandoc supports various Markdown flavors and features, with one of them being markdown_in_html_blocks. That extension is enabled by default and allows to use Markdown syntax even in content nested in HTML blocks.

    As you probably know, Markdown syntax requires lines indented by four spaces (or more) to be parsed as part of a code block.

    And know we can see what’s happening: the innermost div is indented by four spaces, so pandoc parses it as a Markdown code block.

    There are three solutions:

    1. Re-indent the HTML to ensure that there are never more than three spaces at the start of the line.

    2. Disable the markdown_in_html_blocks extension by calling pandoc with the --from=markdown-markdown_in_html_blocks parameter.

    3. Use the "raw attribute" syntax to explicitly mark the diagram as HTML:

      ``` {=html}
<div>...</div>
```

    VS Code preview might not support the raw attribute syntax, so the first two options are probably preferable in your case.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search