markdown-to-html-github-style How to automatically use your style.css

Dear Felix,

Thank you for providing this repository!

For our bioinformatics work at the DRESDEN-concept Genome Center, we started to write Markdown files to provide READMEs to our collaborators. We are currently using Gitlab for that, and wrote our first CI/CD script to automatically generate HTML and PDF files when a Markdown file has been changed.

The basic pandoc-generated files look pretty ugly, so I started to play around to make them prettier. I followed your recipe today, and ran into a question.

First, I tried pandoc --standalone --css="style.css" (and various versions of it), but it would not incorporate the CSS file properly.

Then, I pretty literally followed your advise and automatically "injected" the content of your style.css file to the end of the basic pandoc-generated HTML file. That worked!

# Convert Markdown to HTML 
pandoc --standalone --from=markdown --to=html $file -o "doc/${id}.html"

# Add CSS at the bottom of the HTML
# Remove last two lines
mv doc/${id}.html doc/${id}_orig.html
head -n -2 doc/${id}_orig.html > doc/${id}.html

# Inject CSS file
echo "<style type='text/css'>" >> doc/${id}.html
cat style.css >> doc/${id}.html

# Close blocks again
echo "</style>" >> doc/${id}.html
echo "</body>" >> doc/${id}.html
echo "</html>" >> doc/${id}.html

It looks so much better than before, but I still wouldn't get the same text width (it looks quite narrow) and am missing the outer border. Would you have any idea?

Thanks a lot in advance! Best wishes from Dresden :) Katrin

Jan 17 '23 16:01 ktrns

Good morning,

I found a new way to incorporate your style.css, that allows me to skip the editing in the HTML file. I generated a minimal template.html that includes the content of style.css. I can use it with pandoc --template, and it works in general.

This time the width is the full width of my screen, and the borders around the text are still missing :-).

Jan 18 '23 08:01 ktrns

I made it work!

I adapted my template so that my $body is within <div id='content'>:

<!doctype html>
<html lang="en">
    <head>
        <title>DRESDEN-concept Genome Center - README</title>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <meta charset="UTF-8">
    </head>
    <body>
        <div id='content'>
        $body$
        </div>
        <style type='text/css'>
            /**
            * Copied from https://github.com/KrauseFx/markdown-to-html-github-style/blob/master/style.css
            */

            body {

With this template style.html I can automatically convert a Markdown file into a pretty HTML file using pandoc: pandoc --resource-path=. --standalone --from=markdown --to=html --template=style.html input.md -o output.html

Thanks again for providing this repository!

Best wishes from Dresden Katrin

Jan 18 '23 10:01 ktrns

markdown-to-html-github-style markdown-to-html-github-style copied to clipboard

How to automatically use your style.css

markdown-to-html-github-style
markdown-to-html-github-style copied to clipboard