Instantly share code, notes, and snippets.

# ryangray/buttondown.css Created Feb 22, 2012

A clean, minimal CSS stylesheet for Markdown, Pandoc and MultiMarkdown HTML output.
 /* Buttondown A Markdown/MultiMarkdown/Pandoc HTML output CSS stylesheet Author: Ryan Gray Date: 15 Feb 2011 Revised: 21 Feb 2012 General style is clean, with minimal re-definition of the defaults or overrides of user font settings. The body text and header styles are left alone except title, author and date classes are centered. A Pandoc TOC is not printed, URLs are printed after hyperlinks in parentheses. Block quotes are italicized. Tables are lightly styled with lines above and below the table and below the header with a boldface header. Code blocks are line wrapped. All elements that Pandoc and MultiMarkdown use should be listed here, even if the style is empty so you can easily add styling to anything. There are some elements in here for HTML5 output of Pandoc, but I have not gotten around to testing that yet. */ /* NOTES: Stuff tried and failed: It seems that specifying font-family:serif in Safari will always use Times New Roman rather than the user's preferences setting. Making the font size different or a fixed value for print in case the screen font size is making the print font too big: Making font-size different for print than for screen causes horizontal lines to disappear in math when using MathJax under Safari. */ /* ---- Front Matter ---- */ /* Pandoc header DIV. Contains .title, .author and .date. Comes before div#TOC. Only appears if one of those three are in the document. */ div#header, header { /* Put border on bottom. Separates it from TOC or body that comes after it. */ border-bottom: 1px solid #aaa; margin-bottom: 0.5em; } .title /* Pandoc title header (h1.title) */ { text-align: center; } .author, .date /* Pandoc author(s) and date headers (h2.author and h3.date) */ { text-align: center; } /* Pandoc table of contents DIV when using the --toc option. NOTE: this doesn't support Pandoc's --id-prefix option for #TOC and #header. Probably would need to use div[id$='TOC'] and div[id$='header'] as selectors. */ div#TOC, nav#TOC { /* Put border on bottom to separate it from body. */ border-bottom: 1px solid #aaa; margin-bottom: 0.5em; } @media print { div#TOC, nav#TOC { /* Don't display TOC in print */ display: none; } } /* ---- Headers and sections ---- */ h1, h2, h3, h4, h5, h6 { font-family: "Helvetica Neue", Helvetica, "Liberation Sans", Calibri, Arial, sans-serif; /* Sans-serif headers */ /* font-family: "Liberation Serif", "Georgia", "Times New Roman", serif; /* Serif headers */ page-break-after: avoid; /* Firefox, Chrome, and Safari do not support the property value "avoid" */ } /* Pandoc with --section-divs option */ div div, section section /* Nested sections */ { margin-left: 2em; /* This will increasingly indent nested header sections */ } p {} blockquote { font-style: italic; } li /* All list items */ { } li > p /* Loosely spaced list item */ { margin-top: 1em; /* IE: lack of space above a
• when the item is inside a

• Owner Author

### ryangray commented Feb 22, 2012

 I need to work on the MultiMarkdown specifics --- I've been using Pandoc mostly.

### fak commented Mar 28, 2013

 This worked great for me, thx for sharing!

### ghost commented Jun 30, 2013

 Works exceedingly well with Pandoc. Second result in Google for "pandoc css". Thanks :)

### stockphrase commented Aug 15, 2014

 How do you call this .css template in a pandoc command? Say I want to convert a markdown file to html or pdf using the css?

### jottr commented Sep 2, 2014

 You can use css to convert to html. To convert to pdf from html you will either need to use wkhtmltopdf, or alternatively use a tex based template instead of css. To convert to html you can do the following: pandoc foo.md -s -c buttondown.css -o foo.html

### pbettens commented Dec 1, 2015

 If you want css file contained into html filey you can use --self-contained pandoc foo.md -s -c buttondown.css --self-contained -o foo.html  I read this there

### machocam commented Dec 4, 2015

 Magnificent! Great template to part from to create you own personal look with minimal work. Thanks!

### pgiu commented Feb 19, 2016

 Thanks for your work! I really like how it looks like. The only thing I changed on my setup was something related to how images are displayed. I changed this near line 193: img { /* Let it be inline left/right where it wants to be, but verticality make it in the middle to look nicer, but opinions differ, and if in a multi-line paragraph, it might not be so great. */ vertical-align: middle; height: auto; max-width: 98%; }  This makes images never overflow the width of the screen. I was actually looking for a way of zooming in images when the user click on them but this is as close as I could get.

### joelpet commented Mar 3, 2016

 Since pandoc supports remote files, something like this seems to work fine: \$ pandoc README.md -s -c https://gist.githubusercontent.com/ryangray/1882525/raw/2a6e53f645b960f0bed16d686ba3df36505f839f/buttondown.css --self-contained -o /tmp/README.html

### vandanachadha commented Mar 26, 2016

 Any idea on the reverse? generate docx from an html which has css files? The css files are referred to in the html document, and I have also tried including the css elements in the style tag in the html document. However, the docx is generated without any css impact.

### epo071 commented Jul 10, 2017

 What would be the RMarkdown YAML line to insert your buttondown.css? thks

### Gullumluvl commented Jan 12, 2018

 It's great and simple! :) How would you put all text in a centered column? It would look nicer on larger screens...

### vvsinghkeenable commented Apr 29, 2019

 hi, is there a way of using Pandoc with Texlive to create a pdf file where a table has borders around all rows and columns. I don't want to use any css since my workflow is a single step. Thanks in advance