Discource-C
/
discourse-math
mirror of https://github.com/discourse/discourse-math.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

FIX: don't wrap inline math (#17) 

* adds CSS classes for styling

* don't wrap inline-math

* adds comment about selectors
This commit is contained in:
Joe 2019-09-10 12:56:59 +08:00 committed by Sam
parent 9615034d78
commit 595fc8675b
3 changed files with 89 additions and 54 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
assets/javascripts/initializers/discourse-math-katex.js.es6
View File

@ -21,8 +21,10 @@ function decorate(elem) {
$elem.data("applied-katex", true); $elem.data("applied-katex", true);
if ($elem.hasClass("math")) { if ($elem.hasClass("math")) {
const tag = elem.tagName === "DIV" ? "div" : "span";
const displayClass = tag === "div" ? "block-math" : "inline-math";
const text = $elem.text(); const text = $elem.text();
$elem.addClass("math-container").text(""); $elem.addClass(`math-container ${displayClass} katex-math`).text("");
window.katex.render(text, elem, { displayMode }); window.katex.render(text, elem, { displayMode });
} }
} }

18
assets/javascripts/initializers/discourse-math-mathjax.js.es6
View File

@ -48,16 +48,30 @@ function decorate(elem, isPreview) {
if ($elem.hasClass("math")) { if ($elem.hasClass("math")) {
const tag = elem.tagName === "DIV" ? "div" : "span"; const tag = elem.tagName === "DIV" ? "div" : "span";
const display = tag === "div" ? "; mode=display" : ""; const display = tag === "div" ? "; mode=display" : "";
const displayClass = tag === "div" ? "block-math" : "inline-math";
const type = `math/tex${display}`;
const classList = `math-container ${displayClass} mathjax-math`;
$mathWrapper = $( $mathWrapper = $(
`<${tag} class="math-container" style="display: none;"><script type="math/tex${display}"></script></${tag}>` `<${tag} class="${classList}" style="display: none;">
<script type="${type}"></script>
</${tag}>`
); );
$math = $mathWrapper.children(); $math = $mathWrapper.children();
$math.text($elem.text()); $math.text($elem.text());
$elem.after($mathWrapper); $elem.after($mathWrapper);
} else if ($elem.hasClass("asciimath")) { } else if ($elem.hasClass("asciimath")) {
// asciimath is always inline
const classList = `math-container inline-math ascii-math`;
const type = `math/asciimath`;
$mathWrapper = $( $mathWrapper = $(
`<span class="math-container" style="display: none;"><script type="math/asciimath"></script></span>` `<span class="${classList}" style="display: none;">
<script type="${type}"></script>
</span>`
); );
$math = $mathWrapper.children(); $math = $mathWrapper.children();
$math.text($elem.text()); $math.text($elem.text());
$elem.after($mathWrapper); $elem.after($mathWrapper);

121
assets/stylesheets/common/discourse-math.scss
View File

@ -1,58 +1,77 @@
.math-container { .math-container {
display: block; &.block-math,
&.ascii-math {
display: block;
> div:nth-child(2), // we use tag selectors because MathJax does not provide helpfull classes
> span:nth-child(2), // and the possible combinations a bit absurd. The styles are scoped by the
> .katex-display { // parent selector. So they don't affect any other elements.
// Mathjax ships with !important inline; > {
display: block !important; div,
max-width: 100%; span {
margin-bottom: 1em; // Mathjax ships with !important inline;
display: block !important;
max-width: 100%;
margin-bottom: 1em;
// Inner containers for all renderers // Inner containers for all renderers
> :first-child:not(.katex), // mathjax generic
.katex-html { [id*="-Frame"],
display: block; > nobr,
overflow: auto hidden; > span,
max-width: 100%; // special handeling for SVG
padding: 0.25em 0.5em; &.MathJax_SVG,
box-sizing: border-box; // special handeling for katex
} .katex-html {
} display: block;
overflow: auto hidden;
// On mobile we add a slight fade on either side to indicate that the user can max-width: 100%;
// scroll. However, this should not be added to the composer since mathjax does padding: 0.25em 0.5em;
// not render in the mobile composer box-sizing: border-box;
.cooked & { }
.mobile-view & {
position: relative;
&:before {
content: "";
position: absolute;
z-index: 1;
left: 0;
top: 0;
width: 1em;
height: 100%;
background: linear-gradient(
to right,
rgba($secondary, 1) 0%,
rgba($secondary, 0) 100%
);
} }
&:after { }
content: "";
position: absolute; // On mobile we add a slight fade on either side to indicate that the user can
z-index: 1; // scroll. However, this should not be added to the composer since mathjax does
right: 0; // not render in the mobile composer
top: 0; .cooked & {
width: 1em; .mobile-view & {
height: 100%; position: relative;
background: linear-gradient(
to right, &:before {
rgba($secondary, 0) 0%, content: "";
rgba($secondary, 1) 100% position: absolute;
); z-index: 1;
left: 0;
top: 0;
width: 1em;
height: 100%;
background: linear-gradient(
to right,
rgba($secondary, 1) 0%,
rgba($secondary, 0) 100%
);
}
&:after {
content: "";
position: absolute;
z-index: 1;
right: 0;
top: 0;
width: 1em;
height: 100%;
background: linear-gradient(
to right,
rgba($secondary, 0) 0%,
rgba($secondary, 1) 100%
);
}
.MJXp-mtable,
.MJXp-mstyle {
padding: 0 0.75em;
}
} }
} }
} }