Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Code block formatting issues with Bootstrap and Pandoc

I have a code block in a Pandoc markdown file designated as:

```python
for x in range(10):
  print('id is', x)
```

When I use the command

pandoc example.md -s -o example.html

I get the following output in a web page:

enter image description here

However, when I use a custom html template that uses Bootstrap CSS to generate the HTML, the indentation in the code block is wrong. The command

pandoc example.md --template=custom.html -s -o example2.html

produces the following output in the web page:

example two

Notice how the indentation in the second example is too large. This only happens when Bootstrap is used to style the code blocks. The indentation problem does not occur on the first line, only on the subsequent lines in the code block.

The template I'm using to generate the HTML is:

<!DOCTYPE html>
<html lang="en">

  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>Example Pandoc HTML</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

    $if(quotes)$
      <style type="text/css">q { quotes: "“" "”" "‘" "’"; }</style>
    $endif$

    $if(highlighting-css)$
      <style type="text/css">$highlighting-css$</style>
    $endif$

    $if(math)$
      $math$
    $endif$
  </head>

  <body>

    <div class="container">
      $body$
    </div>

  </body>

</html>

How can I correctly format code blocks with Bootstrap and Pandoc when using a custom HTML template?

like image 625
wigging Avatar asked Mar 13 '17 21:03

wigging


1 Answers

Un-indent $body$ in your template, and it won't indent your code blocks.

    <div class="container">
$body$
    </div>
like image 120
snak Avatar answered Oct 20 '22 22:10

snak