mirror of
https://github.com/Smaug123/KaTeX
synced 2025-10-06 03:38:39 +00:00
d729ba5281
Summary: Keep track of the color inside the style now, and use that when we are rendering things. Added a custom lexing mode to handle lexing colors correctly. Prefixed the old katex colors (internally) with "katex-" to distinguish them from CSS colors. Test Plan: - Run the normal tests, see they work - Run the huxley tests, see that they didn't change except for the color one which looks right Reviewers: alpert Reviewed By: alpert Differential Revision: http://phabricator.khanacademy.org/D7763
324 lines
7.5 KiB
Plaintext
324 lines
7.5 KiB
Plaintext
/*
|
|
things to do:
|
|
\sum, \int, \lim
|
|
\sqrt
|
|
big parens
|
|
*/
|
|
|
|
.katex {
|
|
font: normal 1.21em katex_main;
|
|
line-height: 1.2;
|
|
white-space: nowrap;
|
|
|
|
.katex-inner {
|
|
// Making .katex inline-block allows line breaks before and after,
|
|
// which is undesireable ("to $x$,"). Instead, adjust the .katex-inner
|
|
// style and put nowrap on the inline .katex element.
|
|
display: inline-block;
|
|
}
|
|
|
|
.base {
|
|
display: inline-block;
|
|
}
|
|
|
|
.strut {
|
|
display: inline-block;
|
|
|
|
&.bottom {
|
|
vertical-align: top;
|
|
}
|
|
}
|
|
|
|
.mathit {
|
|
font-family: katex_math;
|
|
font-style: italic;
|
|
}
|
|
|
|
.amsrm {
|
|
font-family: katex_ams;
|
|
}
|
|
|
|
@thinspace: 0.16667em;
|
|
@mediumspace: 0.22222em;
|
|
@thickspace: 0.27778em;
|
|
|
|
.textstyle {
|
|
> .mord {
|
|
& + .mord {}
|
|
& + .mop { margin-left: @thinspace; }
|
|
& + .mbin { margin-left: @mediumspace; }
|
|
& + .mrel { margin-left: @thickspace; }
|
|
& + .mopen {}
|
|
& + .mclose {}
|
|
& + .mpunct {}
|
|
& + .minner { margin-left: @thinspace; }
|
|
}
|
|
|
|
> .mop {
|
|
& + .mord { margin-left: @thinspace; }
|
|
& + .mop { margin-left: @thinspace; }
|
|
& + .mbin {}
|
|
& + .mrel { margin-left: @thickspace; }
|
|
& + .mopen {}
|
|
& + .mclose {}
|
|
& + .mpunct {}
|
|
& + .minner { margin-left: @thinspace; }
|
|
}
|
|
|
|
> .mbin {
|
|
& + .mord { margin-left: @mediumspace; }
|
|
& + .mop { margin-left: @mediumspace; }
|
|
& + .mbin {}
|
|
& + .mrel {}
|
|
& + .mopen { margin-left: @mediumspace; }
|
|
& + .mclose {}
|
|
& + .mpunct {}
|
|
& + .minner { margin-left: @mediumspace; }
|
|
}
|
|
|
|
> .mrel {
|
|
& + .mord { margin-left: @thickspace; }
|
|
& + .mop { margin-left: @thickspace; }
|
|
& + .mbin {}
|
|
& + .mrel {}
|
|
& + .mopen { margin-left: @thickspace; }
|
|
& + .mclose {}
|
|
& + .mpunct {}
|
|
& + .minner { margin-left: @thickspace; }
|
|
}
|
|
|
|
> .mopen {
|
|
& + .mord {}
|
|
& + .mop {}
|
|
& + .mbin {}
|
|
& + .mrel {}
|
|
& + .mopen {}
|
|
& + .mclose {}
|
|
& + .mpunct {}
|
|
& + .minner {}
|
|
}
|
|
|
|
> .mclose {
|
|
& + .mord {}
|
|
& + .mop { margin-left: @thinspace; }
|
|
& + .mbin { margin-left: @mediumspace; }
|
|
& + .mrel { margin-left: @thickspace; }
|
|
& + .mopen {}
|
|
& + .mclose {}
|
|
& + .mpunct {}
|
|
& + .minner { margin-left: @thinspace; }
|
|
}
|
|
|
|
> .mpunct {
|
|
& + .mord { margin-left: @thinspace; }
|
|
& + .mop { margin-left: @thinspace; }
|
|
& + .mbin {}
|
|
& + .mrel { margin-left: @thinspace; }
|
|
& + .mopen { margin-left: @thinspace; }
|
|
& + .mclose { margin-left: @thinspace; }
|
|
& + .mpunct { margin-left: @thinspace; }
|
|
& + .minner { margin-left: @thinspace; }
|
|
}
|
|
|
|
> .minner {
|
|
& + .mord { margin-left: @thinspace; }
|
|
& + .mop { margin-left: @thinspace; }
|
|
& + .mbin { margin-left: @mediumspace; }
|
|
& + .mrel { margin-left: @thickspace; }
|
|
& + .mopen { margin-left: @thinspace; }
|
|
& + .mclose {}
|
|
& + .mpunct { margin-left: @thinspace; }
|
|
& + .minner { margin-left: @thinspace; }
|
|
}
|
|
}
|
|
|
|
.mord {
|
|
& + .mop { margin-left: @thinspace; }
|
|
}
|
|
|
|
.mop {
|
|
& + .mord { margin-left: @thinspace; }
|
|
& + .mop { margin-left: @thinspace; }
|
|
}
|
|
|
|
.mclose {
|
|
& + .mop { margin-left: @thinspace; }
|
|
}
|
|
|
|
.minner {
|
|
& + .mop { margin-left: @thinspace; }
|
|
}
|
|
|
|
.reset-textstyle.textstyle { font-size: 1em; }
|
|
.reset-textstyle.scriptstyle { font-size: 0.66667em; }
|
|
.reset-textstyle.scriptscriptstyle { font-size: 0.5em; }
|
|
|
|
.reset-scriptstyle.textstyle { font-size: 1.5em; }
|
|
.reset-scriptstyle.scriptstyle { font-size: 1em; }
|
|
.reset-scriptstyle.scriptscriptstyle { font-size: 0.75em; }
|
|
|
|
.reset-scriptscriptstyle.textstyle { font-size: 2em; }
|
|
.reset-scriptscriptstyle.scriptstyle { font-size: 1.5em; }
|
|
.reset-scriptscriptstyle.scriptscriptstyle { font-size: 1em; }
|
|
|
|
.baseline-align-hack-outer() {
|
|
display: inline-block;
|
|
}
|
|
|
|
.baseline-align-hack-middle() {
|
|
display: block;
|
|
height: 0;
|
|
}
|
|
|
|
.baseline-align-hack-inner() {
|
|
display: inline-block;
|
|
}
|
|
|
|
.msupsub {
|
|
.baseline-align-hack-outer;
|
|
text-align: left;
|
|
|
|
// The rendering of $y'$, for example, looks bad without this.
|
|
// TODO(alpert): Obviously incorrect. Figure out the proper fix here.
|
|
margin-left: 0.05em;
|
|
|
|
.msup,
|
|
.msub,
|
|
.fix-ie {
|
|
.baseline-align-hack-middle;
|
|
position: relative;
|
|
|
|
> span {
|
|
.baseline-align-hack-inner;
|
|
}
|
|
}
|
|
|
|
.fix-ie {
|
|
display: inline-block;
|
|
}
|
|
}
|
|
|
|
.mfrac {
|
|
.baseline-align-hack-outer;
|
|
|
|
.mfracnum,
|
|
.mfracmid,
|
|
.mfracden,
|
|
.fix-ie {
|
|
.baseline-align-hack-middle;
|
|
position: relative;
|
|
text-align: center;
|
|
|
|
> span {
|
|
.baseline-align-hack-inner;
|
|
}
|
|
}
|
|
|
|
.fix-ie {
|
|
display: inline-block;
|
|
}
|
|
|
|
.mfracmid > span {
|
|
width: 100%;
|
|
|
|
&:before {
|
|
border-bottom-style: solid;
|
|
border-bottom-width: 1px;
|
|
content: "";
|
|
display: block;
|
|
}
|
|
|
|
&:after {
|
|
border-bottom-style: solid;
|
|
border-bottom-width: 0.05em;
|
|
content: "";
|
|
display: block;
|
|
margin-top: -1px;
|
|
}
|
|
}
|
|
}
|
|
|
|
.mspace {
|
|
display: inline-block;
|
|
|
|
&.negativethinspace {
|
|
margin-left: -@thinspace;
|
|
}
|
|
|
|
&.thinspace {
|
|
width: @thinspace;
|
|
}
|
|
|
|
&.mediumspace {
|
|
width: @mediumspace;
|
|
}
|
|
|
|
&.thickspace {
|
|
width: @thickspace;
|
|
}
|
|
|
|
&.enspace {
|
|
width: 0.5em;
|
|
}
|
|
|
|
&.quad {
|
|
width: 1em;
|
|
}
|
|
|
|
&.qquad {
|
|
width: 2em;
|
|
}
|
|
}
|
|
|
|
.llap,
|
|
.rlap {
|
|
width: 0;
|
|
position: relative;
|
|
|
|
> span {
|
|
position: absolute;
|
|
}
|
|
}
|
|
|
|
.llap > span {
|
|
right: 0;
|
|
}
|
|
|
|
.rlap > span {
|
|
left: 0;
|
|
}
|
|
|
|
.katex-logo {
|
|
.a {
|
|
font-size: 0.75em;
|
|
margin-left: -0.32em;
|
|
position: relative;
|
|
top: -0.2em;
|
|
}
|
|
.t {
|
|
margin-left: -0.23em;
|
|
}
|
|
.e {
|
|
margin-left: -0.1667em;
|
|
position: relative;
|
|
top: 0.2155em;
|
|
}
|
|
.x {
|
|
margin-left: -0.125em;
|
|
}
|
|
}
|
|
|
|
.sizing { display: inline-block; }
|
|
|
|
.reset-size5.size1 { font-size: 0.5em; }
|
|
.reset-size5.size2 { font-size: 0.7em; }
|
|
.reset-size5.size3 { font-size: 0.8em; }
|
|
.reset-size5.size4 { font-size: 0.9em; }
|
|
.reset-size5.size5 { font-size: 1.0em; }
|
|
.reset-size5.size6 { font-size: 1.2em; }
|
|
.reset-size5.size7 { font-size: 1.44em; }
|
|
.reset-size5.size8 { font-size: 1.73em; }
|
|
.reset-size5.size9 { font-size: 2.07em; }
|
|
.reset-size5.size10 { font-size: 2.49em; }
|
|
}
|