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);
if ($elem.hasClass("math")) {
const tag = elem.tagName === "DIV" ? "div" : "span";
const displayClass = tag === "div" ? "block-math" : "inline-math";
const text = $elem.text();
$elem.addClass("math-container").text("");
$elem.addClass(`math-container ${displayClass} katex-math`).text("");
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")) {
const tag = elem.tagName === "DIV" ? "div" : "span";
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 = $(
`<${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.text($elem.text());
$elem.after($mathWrapper);
} else if ($elem.hasClass("asciimath")) {
// asciimath is always inline
const classList = `math-container inline-math ascii-math`;
const type = `math/asciimath`;
$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.text($elem.text());
$elem.after($mathWrapper);

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

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