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:
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:
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?
Un-indent $body$
in your template, and it won't indent your code blocks.
<div class="container">
$body$
</div>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With