git.iko.soy/typeable/pandoc
on master help sign in
Add CSS to default HTML template (#6601)
commitcaa225ad8216d704afe1b857f552307e490c1a14 authorMauro Bieg <mb21@users.noreply.github.com> dateSun 20 Sep 2020, 01:13 (6 years ago) parentd5a7abd
7 files changed+571
compare with master
unifiedsplit
MANUAL.txt+37 data/templates/styles.html+108 src/Text/Pandoc/Writers/HTML.hs+2 test/lhs-test.html+106 test/lhs-test.html+lhs+106 test/writer.html4+106 test/writer.html5+106
MANUAL.txt+37
@@ -2142,6 +2142,43 @@ ODT or pptx.
21422142[Unicode Bidirectional Algorithm]: https://www.w3.org/International/articles/inline-bidi-markup/uba-basics
21432143[Language subtag lookup]: https://r12a.github.io/app-subtags/
21442144
2145+### Variables for HTML
2146+
2147+`document-css`
2148+: Enables inclusion of most of the CSS in the `styles.html`
2149+ [partial](#partials) (have a look with
2150+ `pandoc --print-default-data-file=templates/styles.html`).
2151+ Unless you use [`--css`](#option--css), this variable
2152+ is set to `true` by default. You can disable it with
2153+ e.g. `pandoc -M document-css=false`.
2154+
2155+`mainfont`
2156+: sets the CSS `font-family` property on the `html` element.
2157+
2158+`fontsize`
2159+: sets the base CSS `font-size`, which you'd usually set
2160+ to e.g. `20px`, but it also accepts `pt`
2161+ (12pt = 16px in most browsers).
2162+
2163+`fontcolor`
2164+: sets the CSS `color` property on the `html` element.
2165+
2166+`linkcolor`
2167+: sets the CSS `color` property on all links.
2168+
2169+`monofont`
2170+: sets the CSS `font-family` property on `code` elements.
2171+
2172+`linestretch`
2173+: sets the CSS `line-height` property on the `html` element,
2174+ which is preferred to be unitless.
2175+
2176+`backgroundcolor`
2177+: sets the CSS `background-color` property on the `html` element.
2178+
2179+`margin-left`, `margin-right`, `margin-top`, `margin-bottom`
2180+: sets the corresponding CSS `padding` properties on the `body` element.
2181+
21452182### Variables for HTML math
21462183
21472184`classoption`
data/templates/styles.html+108
@@ -1,3 +1,111 @@
1+$if(document-css)$
2+html {
3+ line-height: $if(linestretch)$$linestretch$$else$1.7$endif$;
4+ font-family: $if(mainfont)$$mainfont$$else$Georgia, serif$endif$;
5+ font-size: $if(fontsize)$$fontsize$$else$20px$endif$;
6+ color: $if(fontcolor)$$fontcolor$$else$#1a1a1a$endif$;
7+ background-color: $if(backgroundcolor)$$backgroundcolor$$else$#fdfdfd$endif$;
8+}
9+body {
10+ margin: 0 auto;
11+ max-width: 40em;
12+ padding-left: $if(margin-left)$$margin-left$$else$50px$endif$;
13+ padding-right: $if(margin-right)$$margin-right$$else$50px$endif$;
14+ padding-top: $if(margin-top)$$margin-top$$else$50px$endif$;
15+ padding-bottom: $if(margin-bottom)$$margin-bottom$$else$50px$endif$;
16+ hyphens: auto;
17+ word-wrap: break-word;
18+ text-rendering: optimizeLegibility;
19+ font-kerning: normal;
20+}
21+@media (max-width: 600px) {
22+ body {
23+ font-size: 0.9em;
24+ padding: 1em;
25+ }
26+}
27+@media print {
28+ body {
29+ background-color: transparent;
30+ color: black;
31+ }
32+ p, h2, h3 {
33+ orphans: 3;
34+ widows: 3;
35+ }
36+ h2, h3, h4 {
37+ page-break-after: avoid;
38+ }
39+}
40+p {
41+ margin-top: 1.7em;
42+}
43+a {
44+ color: $if(linkcolor)$$linkcolor$$else$#1a1a1a$endif$;
45+}
46+a:visited {
47+ color: $if(linkcolor)$$linkcolor$$else$#1a1a1a$endif$;
48+}
49+img {
50+ max-width: 100%;
51+}
52+h1, h2, h3, h4, h5, h6 {
53+ margin-top: 1.7em;
54+}
55+ol, ul {
56+ padding-left: 1.7em;
57+ margin-top: 1.7em;
58+}
59+li > ol, li > ul {
60+ margin-top: 0;
61+}
62+blockquote {
63+ margin: 1.7em 0 1.7em 1.7em;
64+ padding-left: 1em;
65+ border-left: 2px solid #e6e6e6;
66+ font-style: italic;
67+}
68+code {
69+ font-family: $if(monofont)$$monofont$$else$Menlo, Monaco, 'Lucida Console', Consolas, monospace$endif$;
70+ background-color: #f0f0f0;
71+ font-size: 85%;
72+ margin: 0;
73+ padding: .2em .4em;
74+}
75+pre {
76+ line-height: 1.5em;
77+ padding: 1em;
78+ background-color: #f0f0f0;
79+ overflow: auto;
80+}
81+pre code {
82+ padding: 0;
83+ overflow: visible;
84+}
85+hr {
86+ background-color: #1a1a1a;
87+ border: none;
88+ height: 1px;
89+ margin-top: 1.7em;
90+}
91+table {
92+ border-collapse: collapse;
93+ width: 100%;
94+ overflow-x: auto;
95+ display: block;
96+}
97+th, td {
98+ border-bottom: 1px solid lightgray;
99+ padding: 1em 3em 1em 0;
100+}
101+header {
102+ margin-bottom: 6em;
103+ text-align: center;
104+}
105+nav a:not(:hover) {
106+ text-decoration: none;
107+}
108+$endif$
1109code{white-space: pre-wrap;}
2110span.smallcaps{font-variant: small-caps;}
3111span.underline{text-decoration: underline;}
src/Text/Pandoc/Writers/HTML.hs+2
@@ -310,6 +310,7 @@ pandocToHtml opts (Pandoc meta blocks) = do
310310 "/*]]>*/\n")
311311 | otherwise -> mempty
312312 Nothing -> mempty
313+ let mCss :: Maybe [Text] = lookupContext "css" $ metadata
313314 let context = (if stHighlighting st
314315 then case writerHighlightStyle opts of
315316 Just sty -> defField "highlighting-css"
@@ -328,6 +329,7 @@ pandocToHtml opts (Pandoc meta blocks) = do
328329 PlainMath -> defField "displaymath-css" True
329330 WebTeX _ -> defField "displaymath-css" True
330331 _ -> id) $
332+ defField "document-css" (isNothing mCss && slideVariant == NoSlides) $
331333 defField "quotes" (stQuotes st) $
332334 -- for backwards compatibility we populate toc
333335 -- with the contents of the toc, rather than a
test/lhs-test.html+106
@@ -6,6 +6,112 @@
66 <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes" />
77 <title>lhs-test</title>
88 <style>
9+ html {
10+ line-height: 1.7;
11+ font-family: Georgia, serif;
12+ font-size: 20px;
13+ color: #1a1a1a;
14+ background-color: #fdfdfd;
15+ }
16+ body {
17+ margin: 0 auto;
18+ max-width: 40em;
19+ padding-left: 50px;
20+ padding-right: 50px;
21+ padding-top: 50px;
22+ padding-bottom: 50px;
23+ hyphens: auto;
24+ word-wrap: break-word;
25+ text-rendering: optimizeLegibility;
26+ font-kerning: normal;
27+ }
28+ @media (max-width: 600px) {
29+ body {
30+ font-size: 0.9em;
31+ padding: 1em;
32+ }
33+ }
34+ @media print {
35+ body {
36+ background-color: transparent;
37+ color: black;
38+ }
39+ p, h2, h3 {
40+ orphans: 3;
41+ widows: 3;
42+ }
43+ h2, h3, h4 {
44+ page-break-after: avoid;
45+ }
46+ }
47+ p {
48+ margin-top: 1.7em;
49+ }
50+ a {
51+ color: #1a1a1a;
52+ }
53+ a:visited {
54+ color: #1a1a1a;
55+ }
56+ img {
57+ max-width: 100%;
58+ }
59+ h1, h2, h3, h4, h5, h6 {
60+ margin-top: 1.7em;
61+ }
62+ ol, ul {
63+ padding-left: 1.7em;
64+ margin-top: 1.7em;
65+ }
66+ li > ol, li > ul {
67+ margin-top: 0;
68+ }
69+ blockquote {
70+ margin: 1.7em 0 1.7em 1.7em;
71+ padding-left: 1em;
72+ border-left: 2px solid #e6e6e6;
73+ font-style: italic;
74+ }
75+ code {
76+ font-family: Menlo, Monaco, 'Lucida Console', Consolas, monospace;
77+ background-color: #f0f0f0;
78+ font-size: 85%;
79+ margin: 0;
80+ padding: .2em .4em;
81+ }
82+ pre {
83+ line-height: 1.5em;
84+ padding: 1em;
85+ background-color: #f0f0f0;
86+ overflow: auto;
87+ }
88+ pre code {
89+ padding: 0;
90+ overflow: visible;
91+ }
92+ hr {
93+ background-color: #1a1a1a;
94+ border: none;
95+ height: 1px;
96+ margin-top: 1.7em;
97+ }
98+ table {
99+ border-collapse: collapse;
100+ width: 100%;
101+ overflow-x: auto;
102+ display: block;
103+ }
104+ th, td {
105+ border-bottom: 1px solid lightgray;
106+ padding: 1em 3em 1em 0;
107+ }
108+ header {
109+ margin-bottom: 6em;
110+ text-align: center;
111+ }
112+ nav a:not(:hover) {
113+ text-decoration: none;
114+ }
9115 code{white-space: pre-wrap;}
10116 span.smallcaps{font-variant: small-caps;}
11117 span.underline{text-decoration: underline;}
test/lhs-test.html+lhs+106
@@ -6,6 +6,112 @@
66 <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes" />
77 <title>lhs-test</title>
88 <style>
9+ html {
10+ line-height: 1.7;
11+ font-family: Georgia, serif;
12+ font-size: 20px;
13+ color: #1a1a1a;
14+ background-color: #fdfdfd;
15+ }
16+ body {
17+ margin: 0 auto;
18+ max-width: 40em;
19+ padding-left: 50px;
20+ padding-right: 50px;
21+ padding-top: 50px;
22+ padding-bottom: 50px;
23+ hyphens: auto;
24+ word-wrap: break-word;
25+ text-rendering: optimizeLegibility;
26+ font-kerning: normal;
27+ }
28+ @media (max-width: 600px) {
29+ body {
30+ font-size: 0.9em;
31+ padding: 1em;
32+ }
33+ }
34+ @media print {
35+ body {
36+ background-color: transparent;
37+ color: black;
38+ }
39+ p, h2, h3 {
40+ orphans: 3;
41+ widows: 3;
42+ }
43+ h2, h3, h4 {
44+ page-break-after: avoid;
45+ }
46+ }
47+ p {
48+ margin-top: 1.7em;
49+ }
50+ a {
51+ color: #1a1a1a;
52+ }
53+ a:visited {
54+ color: #1a1a1a;
55+ }
56+ img {
57+ max-width: 100%;
58+ }
59+ h1, h2, h3, h4, h5, h6 {
60+ margin-top: 1.7em;
61+ }
62+ ol, ul {
63+ padding-left: 1.7em;
64+ margin-top: 1.7em;
65+ }
66+ li > ol, li > ul {
67+ margin-top: 0;
68+ }
69+ blockquote {
70+ margin: 1.7em 0 1.7em 1.7em;
71+ padding-left: 1em;
72+ border-left: 2px solid #e6e6e6;
73+ font-style: italic;
74+ }
75+ code {
76+ font-family: Menlo, Monaco, 'Lucida Console', Consolas, monospace;
77+ background-color: #f0f0f0;
78+ font-size: 85%;
79+ margin: 0;
80+ padding: .2em .4em;
81+ }
82+ pre {
83+ line-height: 1.5em;
84+ padding: 1em;
85+ background-color: #f0f0f0;
86+ overflow: auto;
87+ }
88+ pre code {
89+ padding: 0;
90+ overflow: visible;
91+ }
92+ hr {
93+ background-color: #1a1a1a;
94+ border: none;
95+ height: 1px;
96+ margin-top: 1.7em;
97+ }
98+ table {
99+ border-collapse: collapse;
100+ width: 100%;
101+ overflow-x: auto;
102+ display: block;
103+ }
104+ th, td {
105+ border-bottom: 1px solid lightgray;
106+ padding: 1em 3em 1em 0;
107+ }
108+ header {
109+ margin-bottom: 6em;
110+ text-align: center;
111+ }
112+ nav a:not(:hover) {
113+ text-decoration: none;
114+ }
9115 code{white-space: pre-wrap;}
10116 span.smallcaps{font-variant: small-caps;}
11117 span.underline{text-decoration: underline;}
test/writer.html4+106
@@ -9,6 +9,112 @@
99 <meta name="date" content="2006-07-17" />
1010 <title>Pandoc Test Suite</title>
1111 <style type="text/css">
12+ html {
13+ line-height: 1.7;
14+ font-family: Georgia, serif;
15+ font-size: 20px;
16+ color: #1a1a1a;
17+ background-color: #fdfdfd;
18+ }
19+ body {
20+ margin: 0 auto;
21+ max-width: 40em;
22+ padding-left: 50px;
23+ padding-right: 50px;
24+ padding-top: 50px;
25+ padding-bottom: 50px;
26+ hyphens: auto;
27+ word-wrap: break-word;
28+ text-rendering: optimizeLegibility;
29+ font-kerning: normal;
30+ }
31+ @media (max-width: 600px) {
32+ body {
33+ font-size: 0.9em;
34+ padding: 1em;
35+ }
36+ }
37+ @media print {
38+ body {
39+ background-color: transparent;
40+ color: black;
41+ }
42+ p, h2, h3 {
43+ orphans: 3;
44+ widows: 3;
45+ }
46+ h2, h3, h4 {
47+ page-break-after: avoid;
48+ }
49+ }
50+ p {
51+ margin-top: 1.7em;
52+ }
53+ a {
54+ color: #1a1a1a;
55+ }
56+ a:visited {
57+ color: #1a1a1a;
58+ }
59+ img {
60+ max-width: 100%;
61+ }
62+ h1, h2, h3, h4, h5, h6 {
63+ margin-top: 1.7em;
64+ }
65+ ol, ul {
66+ padding-left: 1.7em;
67+ margin-top: 1.7em;
68+ }
69+ li > ol, li > ul {
70+ margin-top: 0;
71+ }
72+ blockquote {
73+ margin: 1.7em 0 1.7em 1.7em;
74+ padding-left: 1em;
75+ border-left: 2px solid #e6e6e6;
76+ font-style: italic;
77+ }
78+ code {
79+ font-family: Menlo, Monaco, 'Lucida Console', Consolas, monospace;
80+ background-color: #f0f0f0;
81+ font-size: 85%;
82+ margin: 0;
83+ padding: .2em .4em;
84+ }
85+ pre {
86+ line-height: 1.5em;
87+ padding: 1em;
88+ background-color: #f0f0f0;
89+ overflow: auto;
90+ }
91+ pre code {
92+ padding: 0;
93+ overflow: visible;
94+ }
95+ hr {
96+ background-color: #1a1a1a;
97+ border: none;
98+ height: 1px;
99+ margin-top: 1.7em;
100+ }
101+ table {
102+ border-collapse: collapse;
103+ width: 100%;
104+ overflow-x: auto;
105+ display: block;
106+ }
107+ th, td {
108+ border-bottom: 1px solid lightgray;
109+ padding: 1em 3em 1em 0;
110+ }
111+ header {
112+ margin-bottom: 6em;
113+ text-align: center;
114+ }
115+ nav a:not(:hover) {
116+ text-decoration: none;
117+ }
12118 code{white-space: pre-wrap;}
13119 span.smallcaps{font-variant: small-caps;}
14120 span.underline{text-decoration: underline;}
test/writer.html5+106
@@ -9,6 +9,112 @@
99 <meta name="dcterms.date" content="2006-07-17" />
1010 <title>Pandoc Test Suite</title>
1111 <style>
12+ html {
13+ line-height: 1.7;
14+ font-family: Georgia, serif;
15+ font-size: 20px;
16+ color: #1a1a1a;
17+ background-color: #fdfdfd;
18+ }
19+ body {
20+ margin: 0 auto;
21+ max-width: 40em;
22+ padding-left: 50px;
23+ padding-right: 50px;
24+ padding-top: 50px;
25+ padding-bottom: 50px;
26+ hyphens: auto;
27+ word-wrap: break-word;
28+ text-rendering: optimizeLegibility;
29+ font-kerning: normal;
30+ }
31+ @media (max-width: 600px) {
32+ body {
33+ font-size: 0.9em;
34+ padding: 1em;
35+ }
36+ }
37+ @media print {
38+ body {
39+ background-color: transparent;
40+ color: black;
41+ }
42+ p, h2, h3 {
43+ orphans: 3;
44+ widows: 3;
45+ }
46+ h2, h3, h4 {
47+ page-break-after: avoid;
48+ }
49+ }
50+ p {
51+ margin-top: 1.7em;
52+ }
53+ a {
54+ color: #1a1a1a;
55+ }
56+ a:visited {
57+ color: #1a1a1a;
58+ }
59+ img {
60+ max-width: 100%;
61+ }
62+ h1, h2, h3, h4, h5, h6 {
63+ margin-top: 1.7em;
64+ }
65+ ol, ul {
66+ padding-left: 1.7em;
67+ margin-top: 1.7em;
68+ }
69+ li > ol, li > ul {
70+ margin-top: 0;
71+ }
72+ blockquote {
73+ margin: 1.7em 0 1.7em 1.7em;
74+ padding-left: 1em;
75+ border-left: 2px solid #e6e6e6;
76+ font-style: italic;
77+ }
78+ code {
79+ font-family: Menlo, Monaco, 'Lucida Console', Consolas, monospace;
80+ background-color: #f0f0f0;
81+ font-size: 85%;
82+ margin: 0;
83+ padding: .2em .4em;
84+ }
85+ pre {
86+ line-height: 1.5em;
87+ padding: 1em;
88+ background-color: #f0f0f0;
89+ overflow: auto;
90+ }
91+ pre code {
92+ padding: 0;
93+ overflow: visible;
94+ }
95+ hr {
96+ background-color: #1a1a1a;
97+ border: none;
98+ height: 1px;
99+ margin-top: 1.7em;
100+ }
101+ table {
102+ border-collapse: collapse;
103+ width: 100%;
104+ overflow-x: auto;
105+ display: block;
106+ }
107+ th, td {
108+ border-bottom: 1px solid lightgray;
109+ padding: 1em 3em 1em 0;
110+ }
111+ header {
112+ margin-bottom: 6em;
113+ text-align: center;
114+ }
115+ nav a:not(:hover) {
116+ text-decoration: none;
117+ }
12118 code{white-space: pre-wrap;}
13119 span.smallcaps{font-variant: small-caps;}
14120 span.underline{text-decoration: underline;}