From 35b05b5f2021c04b4c79932cdfcdf99c79c6b918 Mon Sep 17 00:00:00 2001 From: mb21 Date: Sat, 8 Aug 2020 13:23:20 +0200 Subject: [PATCH] Add CSS to default HTML template --- MANUAL.txt | 50 +++++++++++++++ data/templates/default.html5 | 1 + data/templates/styles.html | 108 ++++++++++++++++++++++++++++++++ src/Text/Pandoc/Writers/HTML.hs | 2 + 4 files changed, 161 insertions(+) diff --git a/MANUAL.txt b/MANUAL.txt index ae55669fc3d86..880e6e7633ebf 100644 --- a/MANUAL.txt +++ b/MANUAL.txt @@ -2142,6 +2142,56 @@ ODT or pptx. [Unicode Bidirectional Algorithm]: https://www.w3.org/International/articles/inline-bidi-markup/uba-basics [Language subtag lookup]: https://r12a.github.io/app-subtags/ +### Variables for HTML + +`document-css` +: Enables inclusion of most of the CSS in the `styles.html` + [partial](#partials) (have a look with + `pandoc --print-default-data-file=templates/styles.html`). + This variable is set to `true` by default, unless you use + [`--css`](#option--css). + +`mainfont` +: sets the CSS `font-family` property on the `html` element. + +`fontsize` +: sets the base CSS `font-size`, which you'd usually set + to e.g. `20px`, but it also accepts `pt` + (12pt = 16px in most browsers). + +`fontcolor` +: sets the CSS `color` property on the `html` element. + +`linkcolor` +: sets the CSS `color` property on all links. + +`monofont` +: sets the CSS `font-family` property on `code` elements. + +`linestretch` +: sets the CSS `line-height` property on the `html` element, + which is preferred to be unitless. + +`backgroundcolor` +: sets the CSS `background-color` property on the `html` element. + +`margin-left`, `margin-right`, `margin-top`, `margin-bottom` +: sets the corresponding CSS `padding` properties on the `body` element. + +`style` +: can be used to provide additional CSS, + potentially overriding the default. For example: + + ``` + --- + title: my doc + style: | + blockquote { + border-left: none; + } + --- + ``` + ### Variables for HTML math `classoption` diff --git a/data/templates/default.html5 b/data/templates/default.html5 index 0676215d43972..c34c702404894 100644 --- a/data/templates/default.html5 +++ b/data/templates/default.html5 @@ -16,6 +16,7 @@ $endif$ $if(title-prefix)$$title-prefix$ – $endif$$pagetitle$ $for(css)$ diff --git a/data/templates/styles.html b/data/templates/styles.html index ea92c39ec58be..b179d4871bfc9 100644 --- a/data/templates/styles.html +++ b/data/templates/styles.html @@ -1,3 +1,111 @@ +$if(document-css)$ +html { + line-height: $if(linestretch)$$linestretch$$else$1.7$endif$; + font-family: $if(mainfont)$$mainfont$$else$Georgia, serif$endif$; + font-size: $if(fontsize)$$fontsize$$else$20px$endif$; + color: $if(fontcolor)$$fontcolor$$else$#1a1a1a$endif$; + background-color: $if(backgroundcolor)$$backgroundcolor$$else$#fdfdfd$endif$; +} +body { + margin: 0 auto; + max-width: 40em; + padding-left: $if(margin-left)$$margin-left$$else$50px$endif$; + padding-right: $if(margin-right)$$margin-right$$else$50px$endif$; + padding-top: $if(margin-top)$$margin-top$$else$50px$endif$; + padding-bottom: $if(margin-bottom)$$margin-bottom$$else$50px$endif$; + hyphens: auto; + word-wrap: break-word; + text-rendering: optimizeLegibility; + font-kerning: normal; +} +@media (max-width: 600px) { + body { + font-size: 0.9em; + padding: 1em; + } +} +@media print { + body { + background-color: transparent; + color: black; + } + p, h2, h3 { + orphans: 3; + widows: 3; + } + h2, h3, h4 { + page-break-after: avoid; + } +} +p { + margin-top: 1.7em; +} +a { + color: $if(linkcolor)$$linkcolor$$else$#1a1a1a$endif$; +} +a:visited { + color: $if(linkcolor)$$linkcolor$$else$#1a1a1a$endif$; +} +img { + max-width: 100%; +} +h1, h2, h3, h4, h5, h6 { + margin-top: 1.7em; +} +ol, ul { + padding-left: 1.7em; + margin-top: 1.7em; +} +li > ol, li > ul { + margin-top: 0; +} +blockquote { + margin: 1.7em 0 1.7em 1.7em; + padding-left: 1em; + border-left: 2px solid #e6e6e6; + font-style: italic; +} +code { + font-family: $if(monofont)$$monofont$$else$Menlo, Monaco, 'Lucida Console', Consolas, monospace$endif$; + background-color: #f0f0f0; + font-size: 85%; + margin: 0; + padding: .2em .4em; +} +pre { + line-height: 1.5em; + padding: 1em; + background-color: #f0f0f0; + overflow: auto; +} +pre code { + padding: 0; + overflow: visible; +} +hr { + background-color: #1a1a1a; + border: none; + height: 1px; + margin-top: 1.7em; +} +table { + border-collapse: collapse; + width: 100%; + overflow-x: auto; + display: block; +} +th, td { + border-bottom: 1px solid lightgray; + padding: 1em 3em 1em 0; +} +header { + margin-bottom: 6em; + text-align: center; +} +nav a:not(:hover) { + text-decoration: none; +} +$endif$ code{white-space: pre-wrap;} span.smallcaps{font-variant: small-caps;} span.underline{text-decoration: underline;} diff --git a/src/Text/Pandoc/Writers/HTML.hs b/src/Text/Pandoc/Writers/HTML.hs index 4bfd95674e8e5..192e1d1fb147d 100644 --- a/src/Text/Pandoc/Writers/HTML.hs +++ b/src/Text/Pandoc/Writers/HTML.hs @@ -307,6 +307,7 @@ pandocToHtml opts (Pandoc meta blocks) = do "/*]]>*/\n") | otherwise -> mempty Nothing -> mempty + let mCss :: Maybe [Text] = lookupContext "css" $ metadata let context = (if stHighlighting st then case writerHighlightStyle opts of Just sty -> defField "highlighting-css" @@ -325,6 +326,7 @@ pandocToHtml opts (Pandoc meta blocks) = do PlainMath -> defField "displaymath-css" True WebTeX _ -> defField "displaymath-css" True _ -> id) $ + defField "document-css" (isNothing mCss) $ defField "quotes" (stQuotes st) $ -- for backwards compatibility we populate toc -- with the contents of the toc, rather than a