discourse/discourse-math
1
0
Fork 0
mirror of https://github.com/discourse/discourse-math.git synced 2025-07-02 03:52:29 +00:00
Code Issues Packages Projects Releases Wiki Activity

FEATURE: Responsive equations (#16)

Browse Source 
* adds class to math containers for styling
* adds responsive styles
This commit is contained in:
Joe 2019-09-09 13:08:01 +08:00 committed by Sam
parent 59123ce98b
commit 9615034d78
4 changed files with 64 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -22,7 +22,7 @@ function decorate(elem) {
if ($elem.hasClass("math")) { if ($elem.hasClass("math")) {
const text = $elem.text(); const text = $elem.text();
$elem.text(""); $elem.addClass("math-container").text("");
window.katex.render(text, elem, { displayMode }); window.katex.render(text, elem, { displayMode });
} }
} }

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

@ -49,14 +49,14 @@ function decorate(elem, isPreview) {
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" : "";
$mathWrapper = $( $mathWrapper = $(
`<${tag} style="display: none;"><script type="math/tex${display}"></script></${tag}>` `<${tag} class="math-container" style="display: none;"><script type="math/tex${display}"></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")) {
$mathWrapper = $( $mathWrapper = $(
`<span style="display: none;"><script type="math/asciimath"></script></span>` `<span class="math-container" style="display: none;"><script type="math/asciimath"></script></span>`
); );
$math = $mathWrapper.children(); $math = $mathWrapper.children();
$math.text($elem.text()); $math.text($elem.text());

59
assets/stylesheets/common/discourse-math.scss Normal file
View File

@ -0,0 +1,59 @@
.math-container {
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;
// 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%
);
}
&: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%
);
}
}
}
}

2
plugin.rb
View File

@ -6,4 +6,6 @@
# authors: Sam Saffron (sam) # authors: Sam Saffron (sam)
# url: https://github.com/discourse/discourse-math # url: https://github.com/discourse/discourse-math
register_asset "stylesheets/common/discourse-math.scss"
enabled_site_setting :discourse_math_enabled enabled_site_setting :discourse_math_enabled