Skip to content

Instantly share code, notes, and snippets.

@ryangray
Created February 22, 2012 06:45
Show Gist options
  • Save ryangray/1882525 to your computer and use it in GitHub Desktop.
Save ryangray/1882525 to your computer and use it in GitHub Desktop.
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 <li> when the item is inside a <p> */
}
ul /* Whole unordered list */
{
}
ul li /* Unordered list item */
{
}
ol /* Whole ordered list */
{
}
ol li /* Ordered list item */
{
}
hr {}
/* ---- Some span elements --- */
sub /* Subscripts. Pandoc: H~2~O */
{
}
sup /* Superscripts. Pandoc: The 2^nd^ try. */
{
}
em /* Emphasis. Markdown: *emphasis* or _emphasis_ */
{
}
em > em /* Emphasis within emphasis: *This is all *emphasized* except that* */
{
font-style: normal;
}
strong /* Markdown **strong** or __strong__ */
{
}
/* ---- Links (anchors) ---- */
a /* All links */
{
/* Keep links clean. On screen, they are colored; in print, they do nothing anyway. */
text-decoration: none;
}
@media screen
{
a:hover
{
/* On hover, we indicate a bit more that it is a link. */
text-decoration: underline;
}
}
@media print
{
a {
/* In print, a colored link is useless, so un-style it. */
color: black;
background: transparent;
}
a[href^="http://"]:after, a[href^="https://"]:after
{
/* However, links that go somewhere else, might be useful to the reader,
so for http and https links, print the URL after what was the link
text in parens
*/
content: " (" attr(href) ") ";
font-size: 90%;
}
}
/* ---- Images ---- */
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;
}
div.figure /* Pandoc figure-style image */
{
/* Center the image and caption */
margin-left: auto;
margin-right: auto;
text-align: center;
font-style: italic;
}
p.caption /* Pandoc figure-style caption within div.figure */
{
/* Inherits div.figure props by default */
}
/* ---- Code blocks and spans ---- */
pre, code
{
background-color: #fdf7ee;
/* BEGIN word wrap */
/* Need all the following to word wrap instead of scroll box */
/* This will override the overflow:auto if present */
white-space: pre-wrap; /* css-3 */
white-space: -moz-pre-wrap !important; /* Mozilla, since 1999 */
white-space: -pre-wrap; /* Opera 4-6 */
white-space: -o-pre-wrap; /* Opera 7 */
word-wrap: break-word; /* Internet Explorer 5.5+ */
/* END word wrap */
}
pre /* Code blocks */
{
/* Distinguish pre blocks from other text by more than the font with a background tint. */
padding: 0.5em; /* Since we have a background color */
border-radius: 5px; /* Softens it */
/* Give it a some definition */
border: 1px solid #aaa;
/* Set it off left and right, seems to look a bit nicer when we have a background */
margin-left: 0.5em;
margin-right: 0.5em;
}
@media screen
{
pre
{
/* On screen, use an auto scroll box for long lines, unless word-wrap is enabled */
white-space: pre;
overflow: auto;
/* Dotted looks better on screen and solid seems to print better. */
border: 1px dotted #777;
}
}
code /* All inline code spans */
{
}
p > code, li > code /* Code spans in paragraphs and tight lists */
{
/* Pad a little from adjacent text */
padding-left: 2px;
padding-right: 2px;
}
li > p code /* Code span in a loose list */
{
/* We have room for some more background color above and below */
padding: 2px;
}
/* ---- Math ---- */
span.math /* Pandoc inline math default and --jsmath inline math */
{
/* Tried font-style:italic here, and it messed up MathJax rendering in some browsers. Maybe don't mess with at all. */
}
div.math /* Pandoc --jsmath display math */
{
}
span.LaTeX /* Pandoc --latexmathml math */
{
}
eq /* Pandoc --gladtex math */
{
}
/* ---- Tables ---- */
/* A clean textbook-like style with horizontal lines above and below and under
the header. Rows highlight on hover to help scanning the table on screen.
*/
table
{
border-collapse: collapse;
border-spacing: 0; /* IE 6 */
border-bottom: 2pt solid #000;
border-top: 2pt solid #000; /* The caption on top will not have a bottom-border */
/* Center */
margin-left: auto;
margin-right: auto;
}
thead /* Entire table header */
{
border-bottom: 1pt solid #000;
background-color: #eee; /* Does this BG print well? */
}
tr.header /* Each header row */
{
}
tbody /* Entire table body */
{
}
/* Table body rows */
tr {
}
tr.odd:hover, tr.even:hover /* Use .odd and .even classes to avoid styling rows in other tables */
{
background-color: #eee;
}
/* Odd and even rows */
tr.odd {}
tr.even {}
td, th /* Table cells and table header cells */
{
vertical-align: top; /* Word */
vertical-align: baseline; /* Others */
padding-left: 0.5em;
padding-right: 0.5em;
padding-top: 0.2em;
padding-bottom: 0.2em;
}
/* Removes padding on left and right of table for a tight look. Good if thead has no background color*/
/*
tr td:last-child, tr th:last-child
{
padding-right: 0;
}
tr td:first-child, tr th:first-child
{
padding-left: 0;
}
*/
th /* Table header cells */
{
font-weight: bold;
}
tfoot /* Table footer (what appears here if caption is on top?) */
{
}
caption /* This is for a table caption tag, not the p.caption Pandoc uses in a div.figure */
{
caption-side: top;
border: none;
font-size: 0.9em;
font-style: italic;
text-align: center;
margin-bottom: 0.3em; /* Good for when on top */
padding-bottom: 0.2em;
}
/* ---- Definition lists ---- */
dl /* The whole list */
{
border-top: 2pt solid black;
padding-top: 0.5em;
border-bottom: 2pt solid black;
}
dt /* Definition term */
{
font-weight: bold;
}
dd+dt /* 2nd or greater term in the list */
{
border-top: 1pt solid black;
padding-top: 0.5em;
}
dd /* A definition */
{
margin-bottom: 0.5em;
}
dd+dd /* 2nd or greater definition of a term */
{
border-top: 1px solid black; /* To separate multiple definitions */
}
/* ---- Footnotes ---- */
a.footnote, a.footnoteRef { /* Pandoc, MultiMarkdown footnote links */
font-size: small;
vertical-align: text-top;
}
a[href^="#fnref"], a.reversefootnote /* Pandoc, MultiMarkdown, ?? footnote back links */
{
}
@media print
{
a[href^="#fnref"], a.reversefootnote /* Pandoc, MultiMarkdown */
{
/* Don't display these at all in print since the arrow is only something to click on */
display: none;
}
}
div.footnotes /* Pandoc footnotes div at end of the document */
{
}
div.footnotes li[id^="fn"] /* A footnote item within that div */
{
}
/* You can class stuff as "noprint" to not print.
Useful since you can't set this media conditional inside an HTML element's
style attribute (I think), and you don't want to make another stylesheet that
imports this one and adds a class just to do this.
*/
@media print
{
.noprint
{
display:none;
}
}
@ryangray
Copy link
Author

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

@fak
Copy link

fak commented Mar 28, 2013

This worked great for me, thx for sharing!

Copy link

ghost commented Jun 30, 2013

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

@coopy
Copy link

coopy commented Aug 15, 2013

@ryangray, nice work. What is your license on this?

@stockphrase
Copy link

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
Copy link

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
Copy link

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
Copy link

machocam commented Dec 4, 2015

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

@pgiu
Copy link

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
Copy link

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
Copy link

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
Copy link

epo071 commented Jul 10, 2017

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

@Gullumluvl
Copy link

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

@vvsinghkeenable
Copy link

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

@sgothel
Copy link

sgothel commented Jul 24, 2021

Thank you Ryan, created a repo for our cgit integration and 'stuff'

https://jausoft.com/cgit/users/sgothel/pandoc-buttondown-cgit.git/about/

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment