Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Add CSS to default HTML template #6601

Merged
merged 1 commit into from
Sep 19, 2020
Merged

Add CSS to default HTML template #6601

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
37 changes: 37 additions & 0 deletions MANUAL.txt
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2142,6 +2142,43 @@ 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`).
Unless you use [`--css`](#option--css), this variable
is set to `true` by default. You can disable it with
e.g. `pandoc -M document-css=false`.

`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.

### Variables for HTML math

`classoption`
Expand Down
108 changes: 108 additions & 0 deletions data/templates/styles.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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;}
Expand Down
2 changes: 2 additions & 0 deletions src/Text/Pandoc/Writers/HTML.hs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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"
Expand All @@ -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 && slideVariant == NoSlides) $
mb21 marked this conversation as resolved.
Show resolved Hide resolved
defField "quotes" (stQuotes st) $
-- for backwards compatibility we populate toc
-- with the contents of the toc, rather than a
Expand Down
106 changes: 106 additions & 0 deletions test/lhs-test.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,112 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes" />
<title>lhs-test</title>
<style>
html {
line-height: 1.7;
font-family: Georgia, serif;
font-size: 20px;
color: #1a1a1a;
background-color: #fdfdfd;
}
body {
margin: 0 auto;
max-width: 40em;
padding-left: 50px;
padding-right: 50px;
padding-top: 50px;
padding-bottom: 50px;
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: #1a1a1a;
}
a:visited {
color: #1a1a1a;
}
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: Menlo, Monaco, 'Lucida Console', Consolas, monospace;
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;
}
code{white-space: pre-wrap;}
span.smallcaps{font-variant: small-caps;}
span.underline{text-decoration: underline;}
Expand Down
106 changes: 106 additions & 0 deletions test/lhs-test.html+lhs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,112 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes" />
<title>lhs-test</title>
<style>
html {
line-height: 1.7;
font-family: Georgia, serif;
font-size: 20px;
color: #1a1a1a;
background-color: #fdfdfd;
}
body {
margin: 0 auto;
max-width: 40em;
padding-left: 50px;
padding-right: 50px;
padding-top: 50px;
padding-bottom: 50px;
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: #1a1a1a;
}
a:visited {
color: #1a1a1a;
}
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: Menlo, Monaco, 'Lucida Console', Consolas, monospace;
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;
}
code{white-space: pre-wrap;}
span.smallcaps{font-variant: small-caps;}
span.underline{text-decoration: underline;}
Expand Down
Loading