Distinguish block math from inline math #128

Open
opened 2026-01-29 14:28:11 +00:00 by claunia · 8 comments
Owner

Originally created by @BOT-Man-JL on GitHub (Aug 13, 2017).

Current version of markdig renders both $...$ pair and $$...$$ pair into <span class="math">...</span> uniformly. But many math engines treat them differently...

For example, MathJax support this:

image

😉 It will be very helpful for LaTeX guys...

Originally created by @BOT-Man-JL on GitHub (Aug 13, 2017). Current version of markdig renders both `$...$` pair and `$$...$$` pair into `<span class="math">...</span>` uniformly. But many math engines treat them differently... For example, [MathJax](https://www.mathjax.org/) support this: <img width="662" alt="image" src="https://user-images.githubusercontent.com/17026165/29245910-f2382030-801b-11e7-893b-69f329b532a6.png"> 😉 It will be very helpful for LaTeX guys...
claunia added the enhancement label 2026-01-29 14:28:11 +00:00
Author
Owner

@BOT-Man-JL commented on GitHub (Aug 13, 2017):

Inline math: $y=e_i^x$

Block math: $$y=e_i^x$$

will be rendered into

<p id="pragma-line-4">Inline math: <span class="math">y=e_i^x</span></p>
<p id="pragma-line-6">Block math: <span class="math">y=e_i^x</span></p>
@BOT-Man-JL commented on GitHub (Aug 13, 2017): ``` markdown Inline math: $y=e_i^x$ Block math: $$y=e_i^x$$ ``` will be rendered into ``` html <p id="pragma-line-4">Inline math: <span class="math">y=e_i^x</span></p> <p id="pragma-line-6">Block math: <span class="math">y=e_i^x</span></p> ```
Author
Owner

@BOT-Man-JL commented on GitHub (Aug 13, 2017):

Inline math: $y=e_i^x$ support

Block math:

$$
y=e_i^x
$$

support

works...

<p id="pragma-line-6">Inline math: <span class="math">y=e_i^x</span> support</p>
<p id="pragma-line-8">Block math:</p>
<div id="pragma-line-10" class="math">y=e_i^x
</div>
image
@BOT-Man-JL commented on GitHub (Aug 13, 2017): ``` Inline math: $y=e_i^x$ support Block math: $$ y=e_i^x $$ support ``` works... ``` html <p id="pragma-line-6">Inline math: <span class="math">y=e_i^x</span> support</p> <p id="pragma-line-8">Block math:</p> <div id="pragma-line-10" class="math">y=e_i^x </div> ``` <img width="765" alt="image" src="https://user-images.githubusercontent.com/17026165/29246090-e3b9b5fa-8020-11e7-8ab9-a57a3cbfccfb.png">
Author
Owner

@xoofx commented on GitHub (Aug 13, 2017):

Yes, this is the expected behavior of the current code as explained in the Mathematics extension

  • $ and $$ can be used for inline/span maths inside the same line (but $$ cannot start a line)
  • $$ can be used as a block if it is declared alone on a line (like fenced code blocks)
@xoofx commented on GitHub (Aug 13, 2017): Yes, this is the expected behavior of the current code as explained in the [Mathematics extension](https://github.com/lunet-io/markdig/blob/master/src/Markdig.Tests/Specs/MathSpecs.md) - `$` and `$$` can be used for inline/span maths inside the same line (but `$$` cannot start a line) - `$$` can be used as a block if it is declared alone on a line (like fenced code blocks)
Author
Owner

@BOT-Man-JL commented on GitHub (Aug 14, 2017):

The current specs is a bit different from what I usually use...

And MathJax and KaTeX (with auto renderer) support $$ block in the same line... 😕

image

Here is a guideline of MathJax on StackExchange: https://math.meta.stackexchange.com/questions/5020/mathjax-basic-tutorial-and-quick-reference

image

@BOT-Man-JL commented on GitHub (Aug 14, 2017): The current specs is a bit different from what I usually use... And MathJax and KaTeX (with auto renderer) support `$$` block in the same line... 😕 ![image](https://user-images.githubusercontent.com/17026165/29255888-21139c60-80d8-11e7-8cbe-017d3f885a6d.png) Here is a guideline of MathJax on StackExchange: https://math.meta.stackexchange.com/questions/5020/mathjax-basic-tutorial-and-quick-reference ![image](https://user-images.githubusercontent.com/17026165/29255991-57c5abda-80d9-11e7-81f3-eb5b882294e7.png)
Author
Owner

@xoofx commented on GitHub (Aug 14, 2017):

Oh, then it makes sense to make $$ always a block, no problem, will fix that...

@xoofx commented on GitHub (Aug 14, 2017): Oh, then it makes sense to make `$$` always a block, no problem, will fix that...
Author
Owner

@BOT-Man-JL commented on GitHub (Aug 15, 2017):

Oh, thanks 😄 It would be convenient to type short equations inside $$

@BOT-Man-JL commented on GitHub (Aug 15, 2017): Oh, thanks 😄 It would be convenient to type short equations inside `$$`
Author
Owner

@xoofx commented on GitHub (Aug 30, 2017):

I have a remaining issue with this approach though. A $$ inside a paragraph should not generate a <div> as a paragraph is already a <p> and this is a HTML error to have a div inside a p element. We could emit a span with a class math and an additional block to mark that this span content should be display as a block instead (display: block;)

@xoofx commented on GitHub (Aug 30, 2017): I have a remaining issue with this approach though. A `$$` inside a paragraph should not generate a `<div>` as a paragraph is already a `<p>` and this is a HTML error to have a `div` inside a `p` element. We could emit a span with a class `math` and an additional `block` to mark that this span content should be display as a block instead (`display: block;`)
Author
Owner

@BOT-Man-JL commented on GitHub (Aug 30, 2017):

Well, KaTeX adds class katex-display and MathJax adds MJXc-display to span tag if there is an block math code... So I think an additional class works. (math engine always reads the class name in CSS...)

display: block is another good solution, which will have effect directly in plain HTML. 😄

@BOT-Man-JL commented on GitHub (Aug 30, 2017): Well, KaTeX adds class `katex-display` and MathJax adds `MJXc-display` to `span` tag if there is an block math code... So I think an additional class works. (math engine always reads the class name in CSS...) `display: block` is another good solution, which will have effect directly in plain HTML. 😄
Sign in to join this conversation.
1 Participants
Notifications
Due Date
No due date set.
Dependencies

No dependencies set.

Reference: starred/markdig#128