Tissevert/pandoc
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 1

Use CSS in favor of <br> for display math (#6372)

Browse source 
Some CSS to ensure that display math is
displayed centered and on a new line is now included
in the default HTML-based templates; this may be
overridden if the user wants a different behavior.
This commit is contained in:
Lila 2020-05-19 07:45:44 +02:00 • committed by GitHub
parent 57fa394eb0
commit f4185fcef0
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
9 changed files with 23 additions and 17 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
data/templates/styles.html
View file

@ -10,3 +10,6 @@ $endif$
$if(highlighting-css)$
$highlighting-css$
$endif$
$if(displaymath-css)$
.display.math{display: block; text-align: center; margin: 0.5rem auto;}
$endif$

23
src/Text/Pandoc/Writers/HTML.hs
View file

@ -318,6 +318,10 @@ pandocToHtml opts (Pandoc meta blocks) = do
defField "mathjaxurl"
(T.takeWhile (/='?') u)
_ -> defField "mathjax" False) $
(case writerHTMLMathMethod opts of
PlainMath -> defField "displaymath-css" True
WebTeX _ -> defField "displaymath-css" True
_ -> id) $
defField "quotes" (stQuotes st) $
-- for backwards compatibility we populate toc
-- with the contents of the toc, rather than a
@ -1108,14 +1112,11 @@ inlineToHtml opts inline = do
let s = case t of
InlineMath -> "\\textstyle "
DisplayMath -> "\\displaystyle "
let m = imtag ! A.style "vertical-align:middle"
! A.src (toValue $ url <> T.pack (urlEncode (T.unpack $ s <> str)))
! A.alt (toValue str)
! A.title (toValue str)
let brtag = if html5 then H5.br else H.br
return $ case t of
InlineMath -> m
DisplayMath -> brtag >> m >> brtag
return $ imtag ! A.style "vertical-align:middle"
! A.src (toValue $ url <> T.pack (urlEncode (T.unpack $ s <> str)))
! A.alt (toValue str)
! A.title (toValue str)
! A.class_ mathClass
GladTeX ->
return $
customParent (textTag "eq") !
@ -1142,11 +1143,7 @@ inlineToHtml opts inline = do
DisplayMath -> str
PlainMath -> do
x <- lift (texMathToInlines t str) >>= inlineListToHtml opts
let m = H.span ! A.class_ mathClass $ x
let brtag = if html5 then H5.br else H.br
return $ case t of
InlineMath -> m
DisplayMath -> brtag >> m >> brtag
return $ H.span ! A.class_ mathClass $ x
(RawInline f str) -> do
ishtml <- isRawHtml f
if ishtml

4
test/command/5655.md
View file

@ -2,13 +2,13 @@
% pandoc --webtex
$T_n={n+1 \choose 2}$
^D
<p><img style="vertical-align:middle" src="https://latex.codecogs.com/png.latex?%5Ctextstyle%20T_n%3D%7Bn%2B1%20%5Cchoose%202%7D" alt="T_n={n+1 \choose 2}" title="T_n={n+1 \choose 2}" /></p>
<p><img style="vertical-align:middle" src="https://latex.codecogs.com/png.latex?%5Ctextstyle%20T_n%3D%7Bn%2B1%20%5Cchoose%202%7D" alt="T_n={n+1 \choose 2}" title="T_n={n+1 \choose 2}" class="math inline" /></p>
````
````
% pandoc --webtex
$$T_n={n+1 \choose 2}$$
^D
<p><br /><img style="vertical-align:middle" src="https://latex.codecogs.com/png.latex?%5Cdisplaystyle%20T_n%3D%7Bn%2B1%20%5Cchoose%202%7D" alt="T_n={n+1 \choose 2}" title="T_n={n+1 \choose 2}" /><br /></p>
<p><img style="vertical-align:middle" src="https://latex.codecogs.com/png.latex?%5Cdisplaystyle%20T_n%3D%7Bn%2B1%20%5Cchoose%202%7D" alt="T_n={n+1 \choose 2}" title="T_n={n+1 \choose 2}" class="math display" /></p>
````

1
test/lhs-test.html
View file

@ -74,6 +74,7 @@
code span.va { color: #19177c; } /* Variable */
code span.vs { color: #4070a0; } /* VerbatimString */
code span.wa { color: #60a0b0; font-weight: bold; font-style: italic; } /* Warning */
.display.math{display: block; text-align: center; margin: 0.5rem auto;}
</style>
<!--[if lt IE 9]>
<script src="//cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv-printshiv.min.js"></script>

1
test/lhs-test.html+lhs
View file

@ -74,6 +74,7 @@
code span.va { color: #19177c; } /* Variable */
code span.vs { color: #4070a0; } /* VerbatimString */
code span.wa { color: #60a0b0; font-weight: bold; font-style: italic; } /* Warning */
.display.math{display: block; text-align: center; margin: 0.5rem auto;}
</style>
<!--[if lt IE 9]>
<script src="//cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv-printshiv.min.js"></script>

1
test/s5-basic.html
View file

@ -17,6 +17,7 @@
div.column{display: inline-block; vertical-align: top; width: 50%;}
div.hanging-indent{margin-left: 1.5em; text-indent: -1.5em;}
ul.task-list{list-style: none;}
.display.math{display: block; text-align: center; margin: 0.5rem auto;}
</style>
<!-- configuration parameters -->
<meta name="defaultView" content="slideshow" />

1
test/s5-inserts.html
View file

@ -15,6 +15,7 @@
div.column{display: inline-block; vertical-align: top; width: 50%;}
div.hanging-indent{margin-left: 1.5em; text-indent: -1.5em;}
ul.task-list{list-style: none;}
.display.math{display: block; text-align: center; margin: 0.5rem auto;}
</style>
<link rel="stylesheet" href="main.css" type="text/css" />
STUFF INSERTED

3
test/writer.html4
View file

@ -15,6 +15,7 @@
div.column{display: inline-block; vertical-align: top; width: 50%;}
div.hanging-indent{margin-left: 1.5em; text-indent: -1.5em;}
ul.task-list{list-style: none;}
.display.math{display: block; text-align: center; margin: 0.5rem auto;}
</style>
</head>
<body>
@ -432,7 +433,7 @@ Blah
<li><span class="math inline"><em>α</em> ∧ <em>ω</em></span></li>
<li><span class="math inline">223</span></li>
<li><span class="math inline"><em>p</em></span>-Tree</li>
<li>Here’s some display math: <br /><span class="math display">$$\frac{d}{dx}f(x)=\lim_{h\to 0}\frac{f(x+h)-f(x)}{h}$$</span><br /></li>
<li>Here’s some display math: <span class="math display">$$\frac{d}{dx}f(x)=\lim_{h\to 0}\frac{f(x+h)-f(x)}{h}$$</span></li>
<li>Here’s one that has a line break in it: <span class="math inline"><em>α</em> + <em>ω</em> × <em>x</em><sup>2</sup></span>.</li>
</ul>
<p>These shouldn’t be math:</p>

3
test/writer.html5
View file

@ -15,6 +15,7 @@
div.column{display: inline-block; vertical-align: top; width: 50%;}
div.hanging-indent{margin-left: 1.5em; text-indent: -1.5em;}
ul.task-list{list-style: none;}
.display.math{display: block; text-align: center; margin: 0.5rem auto;}
</style>
<!--[if lt IE 9]>
<script src="//cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv-printshiv.min.js"></script>
@ -435,7 +436,7 @@ Blah
<li><span class="math inline"><em>α</em> ∧ <em>ω</em></span></li>
<li><span class="math inline">223</span></li>
<li><span class="math inline"><em>p</em></span>-Tree</li>
<li>Here’s some display math: <br /><span class="math display">$$\frac{d}{dx}f(x)=\lim_{h\to 0}\frac{f(x+h)-f(x)}{h}$$</span><br /></li>
<li>Here’s some display math: <span class="math display">$$\frac{d}{dx}f(x)=\lim_{h\to 0}\frac{f(x+h)-f(x)}{h}$$</span></li>
<li>Here’s one that has a line break in it: <span class="math inline"><em>α</em> + <em>ω</em> × <em>x</em><sup>2</sup></span>.</li>
</ul>
<p>These shouldn’t be math:</p>