Navigation Menu

Skip to content

Instantly share code, notes, and snippets.

@killercup
Created July 3, 2013 11:31
Show Gist options
  • Save killercup/5917178 to your computer and use it in GitHub Desktop.
Save killercup/5917178 to your computer and use it in GitHub Desktop.
Add this to your Pandoc HTML documents using `--css pandoc.css` to make them look more awesome. (Tested with Markdown and LaTeX.)
/*
* I add this to html files generated with pandoc.
*/
html {
font-size: 100%;
overflow-y: scroll;
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
}
body {
color: #444;
font-family: Georgia, Palatino, 'Palatino Linotype', Times, 'Times New Roman', serif;
font-size: 12px;
line-height: 1.7;
padding: 1em;
margin: auto;
max-width: 42em;
background: #fefefe;
}
a {
color: #0645ad;
text-decoration: none;
}
a:visited {
color: #0b0080;
}
a:hover {
color: #06e;
}
a:active {
color: #faa700;
}
a:focus {
outline: thin dotted;
}
*::-moz-selection {
background: rgba(255, 255, 0, 0.3);
color: #000;
}
*::selection {
background: rgba(255, 255, 0, 0.3);
color: #000;
}
a::-moz-selection {
background: rgba(255, 255, 0, 0.3);
color: #0645ad;
}
a::selection {
background: rgba(255, 255, 0, 0.3);
color: #0645ad;
}
p {
margin: 1em 0;
}
img {
max-width: 100%;
}
h1, h2, h3, h4, h5, h6 {
color: #111;
line-height: 125%;
margin-top: 2em;
font-weight: normal;
}
h4, h5, h6 {
font-weight: bold;
}
h1 {
font-size: 2.5em;
}
h2 {
font-size: 2em;
}
h3 {
font-size: 1.5em;
}
h4 {
font-size: 1.2em;
}
h5 {
font-size: 1em;
}
h6 {
font-size: 0.9em;
}
blockquote {
color: #666666;
margin: 0;
padding-left: 3em;
border-left: 0.5em #EEE solid;
}
hr {
display: block;
height: 2px;
border: 0;
border-top: 1px solid #aaa;
border-bottom: 1px solid #eee;
margin: 1em 0;
padding: 0;
}
pre, code, kbd, samp {
color: #000;
font-family: monospace, monospace;
_font-family: 'courier new', monospace;
font-size: 0.98em;
}
pre {
white-space: pre;
white-space: pre-wrap;
word-wrap: break-word;
}
b, strong {
font-weight: bold;
}
dfn {
font-style: italic;
}
ins {
background: #ff9;
color: #000;
text-decoration: none;
}
mark {
background: #ff0;
color: #000;
font-style: italic;
font-weight: bold;
}
sub, sup {
font-size: 75%;
line-height: 0;
position: relative;
vertical-align: baseline;
}
sup {
top: -0.5em;
}
sub {
bottom: -0.25em;
}
ul, ol {
margin: 1em 0;
padding: 0 0 0 2em;
}
li p:last-child {
margin-bottom: 0;
}
ul ul, ol ol {
margin: .3em 0;
}
dl {
margin-bottom: 1em;
}
dt {
font-weight: bold;
margin-bottom: .8em;
}
dd {
margin: 0 0 .8em 2em;
}
dd:last-child {
margin-bottom: 0;
}
img {
border: 0;
-ms-interpolation-mode: bicubic;
vertical-align: middle;
}
figure {
display: block;
text-align: center;
margin: 1em 0;
}
figure img {
border: none;
margin: 0 auto;
}
figcaption {
font-size: 0.8em;
font-style: italic;
margin: 0 0 .8em;
}
table {
margin-bottom: 2em;
border-bottom: 1px solid #ddd;
border-right: 1px solid #ddd;
border-spacing: 0;
border-collapse: collapse;
}
table th {
padding: .2em 1em;
background-color: #eee;
border-top: 1px solid #ddd;
border-left: 1px solid #ddd;
}
table td {
padding: .2em 1em;
border-top: 1px solid #ddd;
border-left: 1px solid #ddd;
vertical-align: top;
}
.author {
font-size: 1.2em;
text-align: center;
}
@media only screen and (min-width: 480px) {
body {
font-size: 14px;
}
}
@media only screen and (min-width: 768px) {
body {
font-size: 16px;
}
}
@media print {
* {
background: transparent !important;
color: black !important;
filter: none !important;
-ms-filter: none !important;
}
body {
font-size: 12pt;
max-width: 100%;
}
a, a:visited {
text-decoration: underline;
}
hr {
height: 1px;
border: 0;
border-bottom: 1px solid black;
}
a[href]:after {
content: " (" attr(href) ")";
}
abbr[title]:after {
content: " (" attr(title) ")";
}
.ir a:after, a[href^="javascript:"]:after, a[href^="#"]:after {
content: "";
}
pre, blockquote {
border: 1px solid #999;
padding-right: 1em;
page-break-inside: avoid;
}
tr, img {
page-break-inside: avoid;
}
img {
max-width: 100% !important;
}
@page :left {
margin: 15mm 20mm 15mm 10mm;
}
@page :right {
margin: 15mm 10mm 15mm 20mm;
}
p, h2, h3 {
orphans: 3;
widows: 3;
}
h2, h3 {
page-break-after: avoid;
}
}
@woneiros
Copy link

Absolutely wonderful!

@ekaitz-zarraga
Copy link

WOW!
This is perfect!

@netsamir
Copy link

Clean, perfect. Good Job

@durka
Copy link

durka commented Nov 17, 2016

What's the license for this? May I use it on a public website?

@killercup
Copy link
Author

Thanks for your interest! Gist doesn't send notifications for comments, if you want to get in touch with me, tweet/mail/IM me.

@durka, feel free to assume its public domain || CC0 || MIT || Apache 2.0 :) I'm not sure I came up with all of it myself (like that _font-face trick or the usage of content with attr), but what I did copy should be (commonly) known patterns.

@ericmjl
Copy link

ericmjl commented Jan 13, 2017

@killercup this is awesome. Thank you for sharing!

@freelsn
Copy link

freelsn commented Mar 22, 2017

Nice theme, thank you very much.

@dnng
Copy link

dnng commented May 17, 2017

Love it! Thanks a bunch!

@sje30
Copy link

sje30 commented Aug 1, 2017

Thank you!

@zkamvar
Copy link

zkamvar commented Nov 30, 2017

Bra-vo!

@JagadishVaranasi
Copy link

I have added css in below format , but its not working . Please help me on this.

args = ' --css pandoc.css inputfile.html -o outputfile.docx ';
Where the i/p file is html and output is an docx file.

and calling the pandoc as
src = ' ';
callback = function(err, result) {
if (err) console.error('Oh Nos: ', err);
else {
// Without the -o arg, the converted value will be returned.
return console.log(result), result;
}
};

// // Call pandoc

pandoc(src, args, callback);

@andresakle
Copy link

Thank you. Amazing css.

@kylebarron
Copy link

From the command line you now need to use --css=pandoc.css or -c pandoc.css not --css pandoc.css

@swarnimaeverest
Copy link

Hello everyone. I stuck at one place while converting html to word file. I want to add stylesheet_green.css to html but it is displaying only data not css in word file. Please suggest me what mistake I am doing.
Code is:

import pypandoc
output = pypandoc.convert(source='demo.html', format='html', to='docx', outputfile='swar.docx', extra_args='--css=stylesheet_green.css'])
 

@aminmkhan
Copy link

Just a note: When running from command line with the latest pandoc v2.2.1, it works only when passed the --standalone or -s flag:

pandoc -c pandoc.css -s in.md -o out.html

@PatrikSteuer
Copy link

@swarnimaeverest pandoc doesn't interpret the css for docx, only for doc, see jgm/pandoc#4354

Hello everyone. I stuck at one place while converting html to word file. I want to add stylesheet_green.css to html but it is displaying only data not css in word file. Please suggest me what mistake I am doing.
Code is:

import pypandoc
output = pypandoc.convert(source='demo.html', format='html', to='docx', outputfile='swar.docx', extra_args='--css=stylesheet_green.css'])
 

@typetetris
Copy link

Under what license did you release that css? Could you include a license notice?

@Biganon
Copy link

Biganon commented Jun 17, 2019

I second typetetris. In the meantime, I will include your name in a comment, if that's not a problem.

@mnm364
Copy link

mnm364 commented Jun 30, 2019

Great stuff! Really makes a nice looking layout. However, wondering what is the point of this?

pre {
  white-space: pre;
  white-space: pre-wrap;
  word-wrap: break-word;  /* (this) */
}

As is, it breaks the format I put my code blocks in. For example, given

```java
boolean hasAnyAddressValue =
	location.hasLine1()
	|| location.hasLine2()
	|| location.hasCity()
	|| location.hasState()
	|| location.hasPostalCode();
```

Will generate,
image

However, when that line is commented out, I get the (more pleasing) output as below,

image

FWIW, I am compiling this using pandoc -t html5 --css pandoc.css file.md -o file.pdf.

@SecT0uch
Copy link

SecT0uch commented Nov 5, 2019

For those interested in code readability, I added background-color: #ececec; in the block pre, code, kbd, samp {}
and added this block for code blocks :

pre.sourceCode, code.sourceCode {
    background-color: #ececec;
}

Here is a screenshot for the inline code :
image

@between40and2
Copy link

From the command line you now need to use --css=pandoc.css or -c pandoc.css not --css pandoc.css

Thanks!

@gnuy
Copy link

gnuy commented Sep 9, 2020

Just a note: When running from command line with the latest pandoc v2.2.1, it works only when passed the --standalone or -s flag:

pandoc -c pandoc.css -s in.md -o out.html

This saved me, thank you!

@mb21
Copy link

mb21 commented Oct 24, 2020

btw. pandoc >= version 2.11 comes with built-in CSS that's fairly similar... see https://pandoc.org/MANUAL.html#variables-for-html

@bgolinvaux
Copy link

This is wonderful. I am now able to charge two times more money when generating docs for customers 😇 (in my dreams...)

THANK YOU!

@athalhammer
Copy link

Just to make @mb21's comment a bit more tangible:

From version 2.11 onwards you can just do (and it will get you fairly close):

pandoc -s README.md -o index.html -M document-css==templates/styles.html

@mb21
Copy link

mb21 commented Jul 30, 2021

@athalhammer you don't even need to set the document-css variable... that should be the default...

@athalhammer
Copy link

Thanks, @mb21, makes sense!

@alexellis
Copy link

I have no idea what I'm doing wrong, but I cannot get this to work with line breaks.

Screenshot 2021-11-08 at 21 02 07

Screenshot 2021-11-08 at 21 02 11

/* This defines styles and classes used in the book */
body { margin: 5%; text-align: justify; font-size: medium; }

pre {
    white-space: pre;
    white-space: pre-wrap;
    word-wrap: break-word;
  }

pre, code, kbd, samp {
    color: #000;
    font-family: monospace, monospace;
    _font-family: 'courier new', monospace;
    font-size: 0.98em;
}

pre.sourceCode, code.sourceCode {
    background-color: #ececec;
}

/* code, pre {
    white-space: pre-wrap;
    font-family: monospace;
} */

h1 { text-align: left; }
h2 { text-align: left; }
h3 { text-align: left; }
h4 { text-align: left; }
h5 { text-align: left; }
h6 { text-align: left; }
h1.title { }
h2.author { }
h3.date { }
ol.toc { padding: 0; margin-left: 1em; }
ol.toc li { list-style-type: none; margin: 0; padding: 0; }
a.footnote-ref { vertical-align: super; }
em, em em em, em em em em em { font-style: italic;}
em em, em em em em { font-style: normal; }
epub:
	pandoc -s $(INPUT_FILES) --toc $(EPUB_METADATA_FILE) -c $(STYLE) --variable subparagraph -o $(EPUB_OUTPUT_FILENAME)

@ryanb8
Copy link

ryanb8 commented May 30, 2022

This is wonderful and going to be commonly used by me. Thanks SO much!

@rlue
Copy link

rlue commented Feb 14, 2024

In case anyone wants to use this without having to save this file locally:

$ pandoc --css "https://rawgit.com/killercup/5917178/raw/40840de5352083adb2693dc742e9f75dbb18650f/pandoc.css" -so outfile.html infile.md

Credit to @iconoclast on StackOverflow.

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