Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
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;
}
}
@cferdinandi

This comment has been minimized.

Copy link

@cferdinandi cferdinandi commented Jul 25, 2016

Add this to your Pandoc... to make them look more awesome.

You did not oversell this. I've tried a few of these. Best of the bunch. Nice work, and thanks so much for sharing!

@WillahScott

This comment has been minimized.

Copy link

@WillahScott WillahScott commented Sep 11, 2016

Absolutely wonderful!

@ekaitz-zarraga

This comment has been minimized.

Copy link

@ekaitz-zarraga ekaitz-zarraga commented Oct 13, 2016

WOW!
This is perfect!

@netsamir

This comment has been minimized.

Copy link

@netsamir netsamir commented Oct 13, 2016

Clean, perfect. Good Job

@durka

This comment has been minimized.

Copy link

@durka durka commented Nov 17, 2016

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

@killercup

This comment has been minimized.

Copy link
Owner Author

@killercup killercup commented Nov 17, 2016

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

This comment has been minimized.

Copy link

@ericmjl ericmjl commented Jan 13, 2017

@killercup this is awesome. Thank you for sharing!

@freelsn

This comment has been minimized.

Copy link

@freelsn freelsn commented Mar 22, 2017

Nice theme, thank you very much.

@dnng

This comment has been minimized.

Copy link

@dnng dnng commented May 17, 2017

Love it! Thanks a bunch!

@sje30

This comment has been minimized.

Copy link

@sje30 sje30 commented Aug 1, 2017

Thank you!

@zkamvar

This comment has been minimized.

Copy link

@zkamvar zkamvar commented Nov 30, 2017

Bra-vo!

@JagadishVaranasi

This comment has been minimized.

Copy link

@JagadishVaranasi JagadishVaranasi commented Feb 12, 2018

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

This comment has been minimized.

Copy link

@andresakle andresakle commented Apr 19, 2018

Thank you. Amazing css.

@kylebarron

This comment has been minimized.

Copy link

@kylebarron kylebarron commented May 10, 2018

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

@swarnimaeverest

This comment has been minimized.

Copy link

@swarnimaeverest swarnimaeverest commented May 31, 2018

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

This comment has been minimized.

Copy link

@aminmkhan aminmkhan commented Jun 1, 2018

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

This comment has been minimized.

Copy link

@PatrikSteuer PatrikSteuer commented Nov 2, 2018

@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

This comment has been minimized.

Copy link

@typetetris typetetris commented Jan 11, 2019

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

@Biganon

This comment has been minimized.

Copy link

@Biganon 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

This comment has been minimized.

Copy link

@mnm364 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

This comment has been minimized.

Copy link

@SecT0uch 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

This comment has been minimized.

Copy link

@between40and2 between40and2 commented Jun 25, 2020

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

Thanks!

@gnuy

This comment has been minimized.

Copy link

@gnuy 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

This comment has been minimized.

Copy link

@mb21 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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.