alangrainger / share-note

Instantly share an Obsidian note with the full theme exactly like you see in your vault. Data is shared encrypted by default, and only you and the person you send it to have the key.
MIT License
281 stars 14 forks source link

LaTeX equations don't display correctly. #34

Open Neutronicsenthusiast064 opened 11 months ago

Neutronicsenthusiast064 commented 11 months ago

Hello,

As a physics student, I'm using LaTeX on Obsidian every day to write my formulas and equations.

I was searching for a plugin which would help me to display my lectures notes to my colleagues, and I discovered your amazing plugin so first of all, thank you so much.

Now about my issue. I was uploading one of my lectures note and I noticed that LaTeX equations missed some letters and greek letters. I think that some letters (like k, A and f) aren't working, and all greek letters are not working at all. Watch this: https://share.note.sx/h9re66zw

You may find my zipped demo vault in this WeTransfer https://we.tl/t-jK9YXXp7K8 (because its too huge (112 MB) as attachment, even if i removed almost everything in).

You will find also another lecture note inside, that is correctly working with LaTeX but there is no greek letter on.

Thank you again for trying to find a solution to my issue.

alangrainger commented 11 months ago

Sorry - the WeTransfer link doesn't exist - "That page can't be found." Maybe you could just share the Markdown of that particular note?

I confess I don't know much about LaTeX, but when I visit your shared link I do see lots of A's, k's, and f's:

image

If the above image looks correct, then it's probably just something cached at your end. Please try opening your note in a private browsing / Incognito window to check.

Neutronicsenthusiast064 commented 11 months ago

Hello,

Somehow it is working again correctly, I'm really confused.

I didn't touched anything to my web browser and everything is working as expected...

If this issue comes back again, i will try to provide you a screenshot of my view.

Thank you.

PS: A little suggestion before closing this, is it possible to add a function to be able to share pdf/epub files? It could be really helpful as well.

alangrainger commented 11 months ago

It will be that the CSS was originally built without the LaTeX components, and then cached on your browser.

When the plugin re-built it with the LaTeX components, your browser kept showing the cached CSS without those components existing.

Now your local cache has expired and you see the updated CSS.

I'll have a look at PDFs 👍

TheColorman commented 11 months ago

I'm getting the same issue after clearing browser cache and using browsers that have never seen note.sx, see this note. In obsidian: image On web: image

alangrainger commented 11 months ago

@TheColorman did you follow the Troubleshooting steps and recreate the CSS? You need to do that for the MathJax styles to appear. By default Obsidian doesn't include any MathJax styles, so the original time your CSS was created it wouldn't have included them.

You can see it working here using your LaTeX code above: https://share.note.sx/ow2285me#5VLXEXsdEuNuLThIjYKvfPsbjWkIqlgZBiOwyyzqeq0

TheColorman commented 11 months ago

I'm pretty sure I've done it a few times, but I'll give it a try.


Yep, no change after force uploading. Could it be the theme?

alangrainger commented 11 months ago

Thanks, I will attempt to replicate. It might be theme-related, what theme are you using?

TheColorman commented 11 months ago

Catppuccin

aliamini87 commented 10 months ago

Hi I have the same problem with latex. this image changes to this : image

Formula renderings completely fails. I tried all troubleshooting recommendations.

TheColorman commented 9 months ago

There's definitely a problem with CSS being uploaded. There's a style tag with id MJX-CHTML-styles that includes all the styling for all math. Here is the one in my local obsidian and the one present on the site after sharing a note:

Inside obsidian ```css mjx-container[jax="CHTML"] { line-height: 0; } mjx-container [space="1"] { margin-left: .111em; } mjx-container [space="2"] { margin-left: .167em; } mjx-container [space="3"] { margin-left: .222em; } mjx-container [space="4"] { margin-left: .278em; } mjx-container [space="5"] { margin-left: .333em; } mjx-container [rspace="1"] { margin-right: .111em; } mjx-container [rspace="2"] { margin-right: .167em; } mjx-container [rspace="3"] { margin-right: .222em; } mjx-container [rspace="4"] { margin-right: .278em; } mjx-container [rspace="5"] { margin-right: .333em; } mjx-container [size="s"] { font-size: 70.7%; } mjx-container [size="ss"] { font-size: 50%; } mjx-container [size="Tn"] { font-size: 60%; } mjx-container [size="sm"] { font-size: 85%; } mjx-container [size="lg"] { font-size: 120%; } mjx-container [size="Lg"] { font-size: 144%; } mjx-container [size="LG"] { font-size: 173%; } mjx-container [size="hg"] { font-size: 207%; } mjx-container [size="HG"] { font-size: 249%; } mjx-container [width="full"] { width: 100%; } mjx-box { display: inline-block; } mjx-block { display: block; } mjx-itable { display: inline-table; } mjx-row { display: table-row; } mjx-row > * { display: table-cell; } mjx-mtext { display: inline-block; } mjx-mstyle { display: inline-block; } mjx-merror { display: inline-block; color: red; background-color: yellow; } mjx-mphantom { visibility: hidden; } _::-webkit-full-page-media, _:future, :root mjx-container { will-change: opacity; } mjx-assistive-mml { position: absolute !important; top: 0px; left: 0px; clip: rect(1px, 1px, 1px, 1px); padding: 1px 0px 0px 0px !important; border: 0px !important; display: block !important; width: auto !important; overflow: hidden !important; -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } mjx-assistive-mml[display="block"] { width: 100% !important; } mjx-math { display: inline-block; text-align: left; line-height: 0; text-indent: 0; font-style: normal; font-weight: normal; font-size: 100%; font-size-adjust: none; letter-spacing: normal; border-collapse: collapse; word-wrap: normal; word-spacing: normal; white-space: nowrap; direction: ltr; padding: 1px 0; } mjx-container[jax="CHTML"][display="true"] { display: block; text-align: center; margin: 1em 0; } mjx-container[jax="CHTML"][display="true"][width="full"] { display: flex; } mjx-container[jax="CHTML"][display="true"] mjx-math { padding: 0; } mjx-container[jax="CHTML"][justify="left"] { text-align: left; } mjx-container[jax="CHTML"][justify="right"] { text-align: right; } mjx-mi { display: inline-block; text-align: left; } mjx-c { display: inline-block; } mjx-utext { display: inline-block; padding: .75em 0 .2em 0; } mjx-TeXAtom { display: inline-block; text-align: left; } mjx-mo { display: inline-block; text-align: left; } mjx-stretchy-h { display: inline-table; width: 100%; } mjx-stretchy-h > * { display: table-cell; width: 0; } mjx-stretchy-h > * > mjx-c { display: inline-block; transform: scalex(1.0000001); } mjx-stretchy-h > * > mjx-c::before { display: inline-block; width: initial; } mjx-stretchy-h > mjx-ext { /* IE */ overflow: hidden; /* others */ overflow: clip visible; width: 100%; } mjx-stretchy-h > mjx-ext > mjx-c::before { transform: scalex(500); } mjx-stretchy-h > mjx-ext > mjx-c { width: 0; } mjx-stretchy-h > mjx-beg > mjx-c { margin-right: -.1em; } mjx-stretchy-h > mjx-end > mjx-c { margin-left: -.1em; } mjx-stretchy-v { display: inline-block; } mjx-stretchy-v > * { display: block; } mjx-stretchy-v > mjx-beg { height: 0; } mjx-stretchy-v > mjx-end > mjx-c { display: block; } mjx-stretchy-v > * > mjx-c { transform: scaley(1.0000001); transform-origin: left center; overflow: hidden; } mjx-stretchy-v > mjx-ext { display: block; height: 100%; box-sizing: border-box; border: 0px solid transparent; /* IE */ overflow: hidden; /* others */ overflow: visible clip; } mjx-stretchy-v > mjx-ext > mjx-c::before { width: initial; box-sizing: border-box; } mjx-stretchy-v > mjx-ext > mjx-c { transform: scaleY(500) translateY(.075em); overflow: visible; } mjx-mark { display: inline-block; height: 0px; } mjx-msub { display: inline-block; text-align: left; } mjx-mfrac { display: inline-block; text-align: left; } mjx-frac { display: inline-block; vertical-align: 0.17em; padding: 0 .22em; } mjx-frac[type="d"] { vertical-align: .04em; } mjx-frac[delims] { padding: 0 .1em; } mjx-frac[atop] { padding: 0 .12em; } mjx-frac[atop][delims] { padding: 0; } mjx-dtable { display: inline-table; width: 100%; } mjx-dtable > * { font-size: 2000%; } mjx-dbox { display: block; font-size: 5%; } mjx-num { display: block; text-align: center; } mjx-den { display: block; text-align: center; } mjx-mfrac[bevelled] > mjx-num { display: inline-block; } mjx-mfrac[bevelled] > mjx-den { display: inline-block; } mjx-den[align="right"], mjx-num[align="right"] { text-align: right; } mjx-den[align="left"], mjx-num[align="left"] { text-align: left; } mjx-nstrut { display: inline-block; height: .054em; width: 0; vertical-align: -.054em; } mjx-nstrut[type="d"] { height: .217em; vertical-align: -.217em; } mjx-dstrut { display: inline-block; height: .505em; width: 0; } mjx-dstrut[type="d"] { height: .726em; } mjx-line { display: block; box-sizing: border-box; min-height: 1px; height: .06em; border-top: .06em solid; margin: .06em -.1em; overflow: hidden; } mjx-line[type="d"] { margin: .18em -.1em; } mjx-mrow { display: inline-block; text-align: left; } mjx-munderover { display: inline-block; text-align: left; } mjx-munderover:not([limits="false"]) { padding-top: .1em; } mjx-munderover:not([limits="false"]) > * { display: block; } mjx-msubsup { display: inline-block; text-align: left; } mjx-script { display: inline-block; padding-right: .05em; padding-left: .033em; } mjx-script > mjx-spacer { display: block; } mjx-mn { display: inline-block; text-align: left; } mjx-c::before { display: block; width: 0; } .MJX-TEX { font-family: MJXZERO, MJXTEX; } .TEX-B { font-family: MJXZERO, MJXTEX-B; } .TEX-I { font-family: MJXZERO, MJXTEX-I; } .TEX-MI { font-family: MJXZERO, MJXTEX-MI; } .TEX-BI { font-family: MJXZERO, MJXTEX-BI; } .TEX-S1 { font-family: MJXZERO, MJXTEX-S1; } .TEX-S2 { font-family: MJXZERO, MJXTEX-S2; } .TEX-S3 { font-family: MJXZERO, MJXTEX-S3; } .TEX-S4 { font-family: MJXZERO, MJXTEX-S4; } .TEX-A { font-family: MJXZERO, MJXTEX-A; } .TEX-C { font-family: MJXZERO, MJXTEX-C; } .TEX-CB { font-family: MJXZERO, MJXTEX-CB; } .TEX-FR { font-family: MJXZERO, MJXTEX-FR; } .TEX-FRB { font-family: MJXZERO, MJXTEX-FRB; } .TEX-SS { font-family: MJXZERO, MJXTEX-SS; } .TEX-SSB { font-family: MJXZERO, MJXTEX-SSB; } .TEX-SSI { font-family: MJXZERO, MJXTEX-SSI; } .TEX-SC { font-family: MJXZERO, MJXTEX-SC; } .TEX-T { font-family: MJXZERO, MJXTEX-T; } .TEX-V { font-family: MJXZERO, MJXTEX-V; } .TEX-VB { font-family: MJXZERO, MJXTEX-VB; } mjx-stretchy-v mjx-c, mjx-stretchy-h mjx-c { font-family: MJXZERO, MJXTEX-S1, MJXTEX-S4, MJXTEX, MJXTEX-A ! important; } @font-face /* 0 */ { font-family: MJXZERO; src: url("app://obsidian.md/lib/mathjax/output/chtml/fonts/woff-v2/MathJax_Zero.woff") format("woff"); } @font-face /* 1 */ { font-family: MJXTEX; src: url("app://obsidian.md/lib/mathjax/output/chtml/fonts/woff-v2/MathJax_Main-Regular.woff") format("woff"); } @font-face /* 2 */ { font-family: MJXTEX-B; src: url("app://obsidian.md/lib/mathjax/output/chtml/fonts/woff-v2/MathJax_Main-Bold.woff") format("woff"); } @font-face /* 3 */ { font-family: MJXTEX-I; src: url("app://obsidian.md/lib/mathjax/output/chtml/fonts/woff-v2/MathJax_Math-Italic.woff") format("woff"); } @font-face /* 4 */ { font-family: MJXTEX-MI; src: url("app://obsidian.md/lib/mathjax/output/chtml/fonts/woff-v2/MathJax_Main-Italic.woff") format("woff"); } @font-face /* 5 */ { font-family: MJXTEX-BI; src: url("app://obsidian.md/lib/mathjax/output/chtml/fonts/woff-v2/MathJax_Math-BoldItalic.woff") format("woff"); } @font-face /* 6 */ { font-family: MJXTEX-S1; src: url("app://obsidian.md/lib/mathjax/output/chtml/fonts/woff-v2/MathJax_Size1-Regular.woff") format("woff"); } @font-face /* 7 */ { font-family: MJXTEX-S2; src: url("app://obsidian.md/lib/mathjax/output/chtml/fonts/woff-v2/MathJax_Size2-Regular.woff") format("woff"); } @font-face /* 8 */ { font-family: MJXTEX-S3; src: url("app://obsidian.md/lib/mathjax/output/chtml/fonts/woff-v2/MathJax_Size3-Regular.woff") format("woff"); } @font-face /* 9 */ { font-family: MJXTEX-S4; src: url("app://obsidian.md/lib/mathjax/output/chtml/fonts/woff-v2/MathJax_Size4-Regular.woff") format("woff"); } @font-face /* 10 */ { font-family: MJXTEX-A; src: url("app://obsidian.md/lib/mathjax/output/chtml/fonts/woff-v2/MathJax_AMS-Regular.woff") format("woff"); } @font-face /* 11 */ { font-family: MJXTEX-C; src: url("app://obsidian.md/lib/mathjax/output/chtml/fonts/woff-v2/MathJax_Calligraphic-Regular.woff") format("woff"); } @font-face /* 12 */ { font-family: MJXTEX-CB; src: url("app://obsidian.md/lib/mathjax/output/chtml/fonts/woff-v2/MathJax_Calligraphic-Bold.woff") format("woff"); } @font-face /* 13 */ { font-family: MJXTEX-FR; src: url("app://obsidian.md/lib/mathjax/output/chtml/fonts/woff-v2/MathJax_Fraktur-Regular.woff") format("woff"); } @font-face /* 14 */ { font-family: MJXTEX-FRB; src: url("app://obsidian.md/lib/mathjax/output/chtml/fonts/woff-v2/MathJax_Fraktur-Bold.woff") format("woff"); } @font-face /* 15 */ { font-family: MJXTEX-SS; src: url("app://obsidian.md/lib/mathjax/output/chtml/fonts/woff-v2/MathJax_SansSerif-Regular.woff") format("woff"); } @font-face /* 16 */ { font-family: MJXTEX-SSB; src: url("app://obsidian.md/lib/mathjax/output/chtml/fonts/woff-v2/MathJax_SansSerif-Bold.woff") format("woff"); } @font-face /* 17 */ { font-family: MJXTEX-SSI; src: url("app://obsidian.md/lib/mathjax/output/chtml/fonts/woff-v2/MathJax_SansSerif-Italic.woff") format("woff"); } @font-face /* 18 */ { font-family: MJXTEX-SC; src: url("app://obsidian.md/lib/mathjax/output/chtml/fonts/woff-v2/MathJax_Script-Regular.woff") format("woff"); } @font-face /* 19 */ { font-family: MJXTEX-T; src: url("app://obsidian.md/lib/mathjax/output/chtml/fonts/woff-v2/MathJax_Typewriter-Regular.woff") format("woff"); } @font-face /* 20 */ { font-family: MJXTEX-V; src: url("app://obsidian.md/lib/mathjax/output/chtml/fonts/woff-v2/MathJax_Vector-Regular.woff") format("woff"); } @font-face /* 21 */ { font-family: MJXTEX-VB; src: url("app://obsidian.md/lib/mathjax/output/chtml/fonts/woff-v2/MathJax_Vector-Bold.woff") format("woff"); } mjx-c.mjx-c1D44C.TEX-I::before { padding: 0.683em 0.763em 0 0; content: "Y"; } mjx-c.mjx-c1D44B.TEX-I::before { padding: 0.683em 0.852em 0 0; content: "X"; } mjx-c.mjx-c50::before { padding: 0.683em 0.681em 0 0; content: "P"; } mjx-c.mjx-c28::before { padding: 0.75em 0.389em 0.25em 0; content: "("; } mjx-c.mjx-c3D::before { padding: 0.583em 0.778em 0.082em 0; content: "="; } mjx-c.mjx-c1D458.TEX-I::before { padding: 0.694em 0.521em 0.011em 0; content: "k"; } mjx-c.mjx-c7C::before { padding: 0.75em 0.278em 0.249em 0; content: "|"; } mjx-c.mjx-c1D465.TEX-I::before { padding: 0.442em 0.572em 0.011em 0; content: "x"; } mjx-c.mjx-c29::before { padding: 0.75em 0.389em 0.25em 0; content: ")"; } mjx-c.mjx-c1D45D.TEX-I::before { padding: 0.442em 0.503em 0.194em 0; content: "p"; } mjx-c.mjx-c2E::before { padding: 0.12em 0.278em 0 0; content: "."; } mjx-c.mjx-c1D70B.TEX-I::before { padding: 0.431em 0.57em 0.011em 0; content: "\3C0"; } mjx-c.mjx-c1D453.TEX-I::before { padding: 0.705em 0.55em 0.205em 0; content: "f"; } mjx-c.mjx-c2211.TEX-S1::before { padding: 0.75em 1.056em 0.25em 0; content: "\2211"; } mjx-c.mjx-c1D43E.TEX-I::before { padding: 0.683em 0.889em 0 0; content: "K"; } mjx-c.mjx-c1D459.TEX-I::before { padding: 0.694em 0.298em 0.011em 0; content: "l"; } mjx-c.mjx-c31::before { padding: 0.666em 0.5em 0 0; content: "1"; } ```
On shared note ```css mjx-container[jax="CHTML"] { line-height: 0; } mjx-container [space="1"] { margin-left: .111em; } mjx-container [space="2"] { margin-left: .167em; } mjx-container [space="3"] { margin-left: .222em; } mjx-container [space="4"] { margin-left: .278em; } mjx-container [space="5"] { margin-left: .333em; } mjx-container [rspace="1"] { margin-right: .111em; } mjx-container [rspace="2"] { margin-right: .167em; } mjx-container [rspace="3"] { margin-right: .222em; } mjx-container [rspace="4"] { margin-right: .278em; } mjx-container [rspace="5"] { margin-right: .333em; } mjx-container [size="s"] { font-size: 70.7%; } mjx-container [size="ss"] { font-size: 50%; } mjx-container [size="Tn"] { font-size: 60%; } mjx-container [size="sm"] { font-size: 85%; } mjx-container [size="lg"] { font-size: 120%; } mjx-container [size="Lg"] { font-size: 144%; } mjx-container [size="LG"] { font-size: 173%; } mjx-container [size="hg"] { font-size: 207%; } mjx-container [size="HG"] { font-size: 249%; } mjx-container [width="full"] { width: 100%; } mjx-box { display: inline-block; } mjx-block { display: block; } mjx-itable { display: inline-table; } mjx-row { display: table-row; } mjx-row > * { display: table-cell; } mjx-mtext { display: inline-block; } mjx-mstyle { display: inline-block; } mjx-merror { display: inline-block; color: red; background-color: yellow; } mjx-mphantom { visibility: hidden; } _::-webkit-full-page-media, _:future, :root mjx-container { will-change: opacity; } mjx-assistive-mml { position: absolute !important; top: 0px; left: 0px; clip: rect(1px, 1px, 1px, 1px); padding: 1px 0px 0px 0px !important; border: 0px !important; display: block !important; width: auto !important; overflow: hidden !important; -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } mjx-assistive-mml[display="block"] { width: 100% !important; } mjx-c::before { display: block; width: 0; } .MJX-TEX { font-family: MJXZERO, MJXTEX; } .TEX-B { font-family: MJXZERO, MJXTEX-B; } .TEX-I { font-family: MJXZERO, MJXTEX-I; } .TEX-MI { font-family: MJXZERO, MJXTEX-MI; } .TEX-BI { font-family: MJXZERO, MJXTEX-BI; } .TEX-S1 { font-family: MJXZERO, MJXTEX-S1; } .TEX-S2 { font-family: MJXZERO, MJXTEX-S2; } .TEX-S3 { font-family: MJXZERO, MJXTEX-S3; } .TEX-S4 { font-family: MJXZERO, MJXTEX-S4; } .TEX-A { font-family: MJXZERO, MJXTEX-A; } .TEX-C { font-family: MJXZERO, MJXTEX-C; } .TEX-CB { font-family: MJXZERO, MJXTEX-CB; } .TEX-FR { font-family: MJXZERO, MJXTEX-FR; } .TEX-FRB { font-family: MJXZERO, MJXTEX-FRB; } .TEX-SS { font-family: MJXZERO, MJXTEX-SS; } .TEX-SSB { font-family: MJXZERO, MJXTEX-SSB; } .TEX-SSI { font-family: MJXZERO, MJXTEX-SSI; } .TEX-SC { font-family: MJXZERO, MJXTEX-SC; } .TEX-T { font-family: MJXZERO, MJXTEX-T; } .TEX-V { font-family: MJXZERO, MJXTEX-V; } .TEX-VB { font-family: MJXZERO, MJXTEX-VB; } mjx-stretchy-v mjx-c, mjx-stretchy-h mjx-c { font-family: MJXZERO, MJXTEX-S1, MJXTEX-S4, MJXTEX, MJXTEX-A ! important; } @font-face /* 0 */ { font-family: MJXZERO; src: url("https://cdn.jsdelivr.net/npm/mathjax@3.2.2/es5/output/chtml/fonts/woff-v2/MathJax_Zero.woff") format("woff"); } @font-face /* 1 */ { font-family: MJXTEX; src: url("https://cdn.jsdelivr.net/npm/mathjax@3.2.2/es5/output/chtml/fonts/woff-v2/MathJax_Main-Regular.woff") format("woff"); } @font-face /* 2 */ { font-family: MJXTEX-B; src: url("https://cdn.jsdelivr.net/npm/mathjax@3.2.2/es5/output/chtml/fonts/woff-v2/MathJax_Main-Bold.woff") format("woff"); } @font-face /* 3 */ { font-family: MJXTEX-I; src: url("https://cdn.jsdelivr.net/npm/mathjax@3.2.2/es5/output/chtml/fonts/woff-v2/MathJax_Math-Italic.woff") format("woff"); } @font-face /* 4 */ { font-family: MJXTEX-MI; src: url("https://cdn.jsdelivr.net/npm/mathjax@3.2.2/es5/output/chtml/fonts/woff-v2/MathJax_Main-Italic.woff") format("woff"); } @font-face /* 5 */ { font-family: MJXTEX-BI; src: url("https://cdn.jsdelivr.net/npm/mathjax@3.2.2/es5/output/chtml/fonts/woff-v2/MathJax_Math-BoldItalic.woff") format("woff"); } @font-face /* 6 */ { font-family: MJXTEX-S1; src: url("https://cdn.jsdelivr.net/npm/mathjax@3.2.2/es5/output/chtml/fonts/woff-v2/MathJax_Size1-Regular.woff") format("woff"); } @font-face /* 7 */ { font-family: MJXTEX-S2; src: url("https://cdn.jsdelivr.net/npm/mathjax@3.2.2/es5/output/chtml/fonts/woff-v2/MathJax_Size2-Regular.woff") format("woff"); } @font-face /* 8 */ { font-family: MJXTEX-S3; src: url("https://cdn.jsdelivr.net/npm/mathjax@3.2.2/es5/output/chtml/fonts/woff-v2/MathJax_Size3-Regular.woff") format("woff"); } @font-face /* 9 */ { font-family: MJXTEX-S4; src: url("https://cdn.jsdelivr.net/npm/mathjax@3.2.2/es5/output/chtml/fonts/woff-v2/MathJax_Size4-Regular.woff") format("woff"); } @font-face /* 10 */ { font-family: MJXTEX-A; src: url("https://cdn.jsdelivr.net/npm/mathjax@3.2.2/es5/output/chtml/fonts/woff-v2/MathJax_AMS-Regular.woff") format("woff"); } @font-face /* 11 */ { font-family: MJXTEX-C; src: url("https://cdn.jsdelivr.net/npm/mathjax@3.2.2/es5/output/chtml/fonts/woff-v2/MathJax_Calligraphic-Regular.woff") format("woff"); } @font-face /* 12 */ { font-family: MJXTEX-CB; src: url("https://cdn.jsdelivr.net/npm/mathjax@3.2.2/es5/output/chtml/fonts/woff-v2/MathJax_Calligraphic-Bold.woff") format("woff"); } @font-face /* 13 */ { font-family: MJXTEX-FR; src: url("https://cdn.jsdelivr.net/npm/mathjax@3.2.2/es5/output/chtml/fonts/woff-v2/MathJax_Fraktur-Regular.woff") format("woff"); } @font-face /* 14 */ { font-family: MJXTEX-FRB; src: url("https://cdn.jsdelivr.net/npm/mathjax@3.2.2/es5/output/chtml/fonts/woff-v2/MathJax_Fraktur-Bold.woff") format("woff"); } @font-face /* 15 */ { font-family: MJXTEX-SS; src: url("https://cdn.jsdelivr.net/npm/mathjax@3.2.2/es5/output/chtml/fonts/woff-v2/MathJax_SansSerif-Regular.woff") format("woff"); } @font-face /* 16 */ { font-family: MJXTEX-SSB; src: url("https://cdn.jsdelivr.net/npm/mathjax@3.2.2/es5/output/chtml/fonts/woff-v2/MathJax_SansSerif-Bold.woff") format("woff"); } @font-face /* 17 */ { font-family: MJXTEX-SSI; src: url("https://cdn.jsdelivr.net/npm/mathjax@3.2.2/es5/output/chtml/fonts/woff-v2/MathJax_SansSerif-Italic.woff") format("woff"); } @font-face /* 18 */ { font-family: MJXTEX-SC; src: url("https://cdn.jsdelivr.net/npm/mathjax@3.2.2/es5/output/chtml/fonts/woff-v2/MathJax_Script-Regular.woff") format("woff"); } @font-face /* 19 */ { font-family: MJXTEX-T; src: url("https://cdn.jsdelivr.net/npm/mathjax@3.2.2/es5/output/chtml/fonts/woff-v2/MathJax_Typewriter-Regular.woff") format("woff"); } @font-face /* 20 */ { font-family: MJXTEX-V; src: url("https://cdn.jsdelivr.net/npm/mathjax@3.2.2/es5/output/chtml/fonts/woff-v2/MathJax_Vector-Regular.woff") format("woff"); } @font-face /* 21 */ { font-family: MJXTEX-VB; src: url("https://cdn.jsdelivr.net/npm/mathjax@3.2.2/es5/output/chtml/fonts/woff-v2/MathJax_Vector-Bold.woff") format("woff"); } ```

The important part here is the diff:

Git diff between Obsidian and website math styles ```diff diff --git "a/.\\obsidian.css" "b/.\\site.css" index 38aa899..e328885 100644 --- "a/.\\obsidian.css" +++ "b/.\\site.css" @@ -147,304 +147,6 @@ mjx-assistive-mml[display="block"] { width: 100% !important; } -mjx-math { - display: inline-block; - text-align: left; - line-height: 0; - text-indent: 0; - font-style: normal; - font-weight: normal; - font-size: 100%; - font-size-adjust: none; - letter-spacing: normal; - border-collapse: collapse; - word-wrap: normal; - word-spacing: normal; - white-space: nowrap; - direction: ltr; - padding: 1px 0; -} - -mjx-container[jax="CHTML"][display="true"] { - display: block; - text-align: center; - margin: 1em 0; -} - -mjx-container[jax="CHTML"][display="true"][width="full"] { - display: flex; -} - -mjx-container[jax="CHTML"][display="true"] mjx-math { - padding: 0; -} - -mjx-container[jax="CHTML"][justify="left"] { - text-align: left; -} - -mjx-container[jax="CHTML"][justify="right"] { - text-align: right; -} - -mjx-mi { - display: inline-block; - text-align: left; -} - -mjx-c { - display: inline-block; -} - -mjx-utext { - display: inline-block; - padding: .75em 0 .2em 0; -} - -mjx-TeXAtom { - display: inline-block; - text-align: left; -} - -mjx-mo { - display: inline-block; - text-align: left; -} - -mjx-stretchy-h { - display: inline-table; - width: 100%; -} - -mjx-stretchy-h > * { - display: table-cell; - width: 0; -} - -mjx-stretchy-h > * > mjx-c { - display: inline-block; - transform: scalex(1.0000001); -} - -mjx-stretchy-h > * > mjx-c::before { - display: inline-block; - width: initial; -} - -mjx-stretchy-h > mjx-ext { - /* IE */ overflow: hidden; - /* others */ overflow: clip visible; - width: 100%; -} - -mjx-stretchy-h > mjx-ext > mjx-c::before { - transform: scalex(500); -} - -mjx-stretchy-h > mjx-ext > mjx-c { - width: 0; -} - -mjx-stretchy-h > mjx-beg > mjx-c { - margin-right: -.1em; -} - -mjx-stretchy-h > mjx-end > mjx-c { - margin-left: -.1em; -} - -mjx-stretchy-v { - display: inline-block; -} - -mjx-stretchy-v > * { - display: block; -} - -mjx-stretchy-v > mjx-beg { - height: 0; -} - -mjx-stretchy-v > mjx-end > mjx-c { - display: block; -} - -mjx-stretchy-v > * > mjx-c { - transform: scaley(1.0000001); - transform-origin: left center; - overflow: hidden; -} - -mjx-stretchy-v > mjx-ext { - display: block; - height: 100%; - box-sizing: border-box; - border: 0px solid transparent; - /* IE */ overflow: hidden; - /* others */ overflow: visible clip; -} - -mjx-stretchy-v > mjx-ext > mjx-c::before { - width: initial; - box-sizing: border-box; -} - -mjx-stretchy-v > mjx-ext > mjx-c { - transform: scaleY(500) translateY(.075em); - overflow: visible; -} - -mjx-mark { - display: inline-block; - height: 0px; -} - -mjx-msub { - display: inline-block; - text-align: left; -} - -mjx-mfrac { - display: inline-block; - text-align: left; -} - -mjx-frac { - display: inline-block; - vertical-align: 0.17em; - padding: 0 .22em; -} - -mjx-frac[type="d"] { - vertical-align: .04em; -} - -mjx-frac[delims] { - padding: 0 .1em; -} - -mjx-frac[atop] { - padding: 0 .12em; -} - -mjx-frac[atop][delims] { - padding: 0; -} - -mjx-dtable { - display: inline-table; - width: 100%; -} - -mjx-dtable > * { - font-size: 2000%; -} - -mjx-dbox { - display: block; - font-size: 5%; -} - -mjx-num { - display: block; - text-align: center; -} - -mjx-den { - display: block; - text-align: center; -} - -mjx-mfrac[bevelled] > mjx-num { - display: inline-block; -} - -mjx-mfrac[bevelled] > mjx-den { - display: inline-block; -} - -mjx-den[align="right"], mjx-num[align="right"] { - text-align: right; -} - -mjx-den[align="left"], mjx-num[align="left"] { - text-align: left; -} - -mjx-nstrut { - display: inline-block; - height: .054em; - width: 0; - vertical-align: -.054em; -} - -mjx-nstrut[type="d"] { - height: .217em; - vertical-align: -.217em; -} - -mjx-dstrut { - display: inline-block; - height: .505em; - width: 0; -} - -mjx-dstrut[type="d"] { - height: .726em; -} - -mjx-line { - display: block; - box-sizing: border-box; - min-height: 1px; - height: .06em; - border-top: .06em solid; - margin: .06em -.1em; - overflow: hidden; -} - -mjx-line[type="d"] { - margin: .18em -.1em; -} - -mjx-mrow { - display: inline-block; - text-align: left; -} - -mjx-munderover { - display: inline-block; - text-align: left; -} - -mjx-munderover:not([limits="false"]) { - padding-top: .1em; -} - -mjx-munderover:not([limits="false"]) > * { - display: block; -} - -mjx-msubsup { - display: inline-block; - text-align: left; -} - -mjx-script { - display: inline-block; - padding-right: .05em; - padding-left: .033em; -} - -mjx-script > mjx-spacer { - display: block; -} - -mjx-mn { - display: inline-block; - text-align: left; -} - mjx-c::before { display: block; width: 0; @@ -540,195 +242,110 @@ mjx-stretchy-v mjx-c, mjx-stretchy-h mjx-c { @font-face /* 0 */ { font-family: MJXZERO; - src: url("app://obsidian.md/lib/mathjax/output/chtml/fonts/woff-v2/MathJax_Zero.woff") format("woff"); + src: url("https://cdn.jsdelivr.net/npm/mathjax@3.2.2/es5/output/chtml/fonts/woff-v2/MathJax_Zero.woff") format("woff"); } @font-face /* 1 */ { font-family: MJXTEX; - src: url("app://obsidian.md/lib/mathjax/output/chtml/fonts/woff-v2/MathJax_Main-Regular.woff") format("woff"); + src: url("https://cdn.jsdelivr.net/npm/mathjax@3.2.2/es5/output/chtml/fonts/woff-v2/MathJax_Main-Regular.woff") format("woff"); } @font-face /* 2 */ { font-family: MJXTEX-B; - src: url("app://obsidian.md/lib/mathjax/output/chtml/fonts/woff-v2/MathJax_Main-Bold.woff") format("woff"); + src: url("https://cdn.jsdelivr.net/npm/mathjax@3.2.2/es5/output/chtml/fonts/woff-v2/MathJax_Main-Bold.woff") format("woff"); } @font-face /* 3 */ { font-family: MJXTEX-I; - src: url("app://obsidian.md/lib/mathjax/output/chtml/fonts/woff-v2/MathJax_Math-Italic.woff") format("woff"); + src: url("https://cdn.jsdelivr.net/npm/mathjax@3.2.2/es5/output/chtml/fonts/woff-v2/MathJax_Math-Italic.woff") format("woff"); } @font-face /* 4 */ { font-family: MJXTEX-MI; - src: url("app://obsidian.md/lib/mathjax/output/chtml/fonts/woff-v2/MathJax_Main-Italic.woff") format("woff"); + src: url("https://cdn.jsdelivr.net/npm/mathjax@3.2.2/es5/output/chtml/fonts/woff-v2/MathJax_Main-Italic.woff") format("woff"); } @font-face /* 5 */ { font-family: MJXTEX-BI; - src: url("app://obsidian.md/lib/mathjax/output/chtml/fonts/woff-v2/MathJax_Math-BoldItalic.woff") format("woff"); + src: url("https://cdn.jsdelivr.net/npm/mathjax@3.2.2/es5/output/chtml/fonts/woff-v2/MathJax_Math-BoldItalic.woff") format("woff"); } @font-face /* 6 */ { font-family: MJXTEX-S1; - src: url("app://obsidian.md/lib/mathjax/output/chtml/fonts/woff-v2/MathJax_Size1-Regular.woff") format("woff"); + src: url("https://cdn.jsdelivr.net/npm/mathjax@3.2.2/es5/output/chtml/fonts/woff-v2/MathJax_Size1-Regular.woff") format("woff"); } @font-face /* 7 */ { font-family: MJXTEX-S2; - src: url("app://obsidian.md/lib/mathjax/output/chtml/fonts/woff-v2/MathJax_Size2-Regular.woff") format("woff"); + src: url("https://cdn.jsdelivr.net/npm/mathjax@3.2.2/es5/output/chtml/fonts/woff-v2/MathJax_Size2-Regular.woff") format("woff"); } @font-face /* 8 */ { font-family: MJXTEX-S3; - src: url("app://obsidian.md/lib/mathjax/output/chtml/fonts/woff-v2/MathJax_Size3-Regular.woff") format("woff"); + src: url("https://cdn.jsdelivr.net/npm/mathjax@3.2.2/es5/output/chtml/fonts/woff-v2/MathJax_Size3-Regular.woff") format("woff"); } @font-face /* 9 */ { font-family: MJXTEX-S4; - src: url("app://obsidian.md/lib/mathjax/output/chtml/fonts/woff-v2/MathJax_Size4-Regular.woff") format("woff"); + src: url("https://cdn.jsdelivr.net/npm/mathjax@3.2.2/es5/output/chtml/fonts/woff-v2/MathJax_Size4-Regular.woff") format("woff"); } @font-face /* 10 */ { font-family: MJXTEX-A; - src: url("app://obsidian.md/lib/mathjax/output/chtml/fonts/woff-v2/MathJax_AMS-Regular.woff") format("woff"); + src: url("https://cdn.jsdelivr.net/npm/mathjax@3.2.2/es5/output/chtml/fonts/woff-v2/MathJax_AMS-Regular.woff") format("woff"); } @font-face /* 11 */ { font-family: MJXTEX-C; - src: url("app://obsidian.md/lib/mathjax/output/chtml/fonts/woff-v2/MathJax_Calligraphic-Regular.woff") format("woff"); + src: url("https://cdn.jsdelivr.net/npm/mathjax@3.2.2/es5/output/chtml/fonts/woff-v2/MathJax_Calligraphic-Regular.woff") format("woff"); } @font-face /* 12 */ { font-family: MJXTEX-CB; - src: url("app://obsidian.md/lib/mathjax/output/chtml/fonts/woff-v2/MathJax_Calligraphic-Bold.woff") format("woff"); + src: url("https://cdn.jsdelivr.net/npm/mathjax@3.2.2/es5/output/chtml/fonts/woff-v2/MathJax_Calligraphic-Bold.woff") format("woff"); } @font-face /* 13 */ { font-family: MJXTEX-FR; - src: url("app://obsidian.md/lib/mathjax/output/chtml/fonts/woff-v2/MathJax_Fraktur-Regular.woff") format("woff"); + src: url("https://cdn.jsdelivr.net/npm/mathjax@3.2.2/es5/output/chtml/fonts/woff-v2/MathJax_Fraktur-Regular.woff") format("woff"); } @font-face /* 14 */ { font-family: MJXTEX-FRB; - src: url("app://obsidian.md/lib/mathjax/output/chtml/fonts/woff-v2/MathJax_Fraktur-Bold.woff") format("woff"); + src: url("https://cdn.jsdelivr.net/npm/mathjax@3.2.2/es5/output/chtml/fonts/woff-v2/MathJax_Fraktur-Bold.woff") format("woff"); } @font-face /* 15 */ { font-family: MJXTEX-SS; - src: url("app://obsidian.md/lib/mathjax/output/chtml/fonts/woff-v2/MathJax_SansSerif-Regular.woff") format("woff"); + src: url("https://cdn.jsdelivr.net/npm/mathjax@3.2.2/es5/output/chtml/fonts/woff-v2/MathJax_SansSerif-Regular.woff") format("woff"); } @font-face /* 16 */ { font-family: MJXTEX-SSB; - src: url("app://obsidian.md/lib/mathjax/output/chtml/fonts/woff-v2/MathJax_SansSerif-Bold.woff") format("woff"); + src: url("https://cdn.jsdelivr.net/npm/mathjax@3.2.2/es5/output/chtml/fonts/woff-v2/MathJax_SansSerif-Bold.woff") format("woff"); } @font-face /* 17 */ { font-family: MJXTEX-SSI; - src: url("app://obsidian.md/lib/mathjax/output/chtml/fonts/woff-v2/MathJax_SansSerif-Italic.woff") format("woff"); + src: url("https://cdn.jsdelivr.net/npm/mathjax@3.2.2/es5/output/chtml/fonts/woff-v2/MathJax_SansSerif-Italic.woff") format("woff"); } @font-face /* 18 */ { font-family: MJXTEX-SC; - src: url("app://obsidian.md/lib/mathjax/output/chtml/fonts/woff-v2/MathJax_Script-Regular.woff") format("woff"); + src: url("https://cdn.jsdelivr.net/npm/mathjax@3.2.2/es5/output/chtml/fonts/woff-v2/MathJax_Script-Regular.woff") format("woff"); } @font-face /* 19 */ { font-family: MJXTEX-T; - src: url("app://obsidian.md/lib/mathjax/output/chtml/fonts/woff-v2/MathJax_Typewriter-Regular.woff") format("woff"); + src: url("https://cdn.jsdelivr.net/npm/mathjax@3.2.2/es5/output/chtml/fonts/woff-v2/MathJax_Typewriter-Regular.woff") format("woff"); } @font-face /* 20 */ { font-family: MJXTEX-V; - src: url("app://obsidian.md/lib/mathjax/output/chtml/fonts/woff-v2/MathJax_Vector-Regular.woff") format("woff"); + src: url("https://cdn.jsdelivr.net/npm/mathjax@3.2.2/es5/output/chtml/fonts/woff-v2/MathJax_Vector-Regular.woff") format("woff"); } @font-face /* 21 */ { font-family: MJXTEX-VB; - src: url("app://obsidian.md/lib/mathjax/output/chtml/fonts/woff-v2/MathJax_Vector-Bold.woff") format("woff"); -} - -mjx-c.mjx-c1D44C.TEX-I::before { - padding: 0.683em 0.763em 0 0; - content: "Y"; -} - -mjx-c.mjx-c1D44B.TEX-I::before { - padding: 0.683em 0.852em 0 0; - content: "X"; -} - -mjx-c.mjx-c50::before { - padding: 0.683em 0.681em 0 0; - content: "P"; -} - -mjx-c.mjx-c28::before { - padding: 0.75em 0.389em 0.25em 0; - content: "("; -} - -mjx-c.mjx-c3D::before { - padding: 0.583em 0.778em 0.082em 0; - content: "="; -} - -mjx-c.mjx-c1D458.TEX-I::before { - padding: 0.694em 0.521em 0.011em 0; - content: "k"; -} - -mjx-c.mjx-c7C::before { - padding: 0.75em 0.278em 0.249em 0; - content: "|"; -} - -mjx-c.mjx-c1D465.TEX-I::before { - padding: 0.442em 0.572em 0.011em 0; - content: "x"; -} - -mjx-c.mjx-c29::before { - padding: 0.75em 0.389em 0.25em 0; - content: ")"; -} - -mjx-c.mjx-c1D45D.TEX-I::before { - padding: 0.442em 0.503em 0.194em 0; - content: "p"; -} - -mjx-c.mjx-c2E::before { - padding: 0.12em 0.278em 0 0; - content: "."; -} - -mjx-c.mjx-c1D70B.TEX-I::before { - padding: 0.431em 0.57em 0.011em 0; - content: "\3C0"; -} - -mjx-c.mjx-c1D453.TEX-I::before { - padding: 0.705em 0.55em 0.205em 0; - content: "f"; -} - -mjx-c.mjx-c2211.TEX-S1::before { - padding: 0.75em 1.056em 0.25em 0; - content: "\2211"; -} - -mjx-c.mjx-c1D43E.TEX-I::before { - padding: 0.683em 0.889em 0 0; - content: "K"; -} - -mjx-c.mjx-c1D459.TEX-I::before { - padding: 0.694em 0.298em 0.011em 0; - content: "l"; -} - -mjx-c.mjx-c31::before { - padding: 0.666em 0.5em 0 0; - content: "1"; + src: url("https://cdn.jsdelivr.net/npm/mathjax@3.2.2/es5/output/chtml/fonts/woff-v2/MathJax_Vector-Bold.woff") format("woff"); } ```

Hopefully this is somewhat helpful.

TheColorman commented 9 months ago

👆 Opening up devtools (ctrl+shift+i) and looking at the styles for math, then force re-uploading all assets seems to have fixed the site version for me so try that out if you also have this problem.

TheColorman commented 6 months ago

To add to this, it seems like the css styles are generated dynamically as you open different notes. E.g. if a latex $k$ is not in you current note, you won't get css for it, but if you then open a note that has it, the css will get added. When the plugin accesses the html document, there might be some caching going on that gets an old version of the css, and opening up the actual style tag in the devtools reloads this cache.

TangentFoxy commented 6 months ago

This issue is affecting a note of mine currently: https://share.note.sx/t6a622g8

The relevant Markdown for the affected section is:

Modified Kardashev Scale, based on Watts:
$$K = (\log{W} - 7.38) / 9.73$$
In case the above formatting is broken: `K = (log(W) - 7.38) / 9.73`

It should display similarly to: image

But is showing as: image

forrany commented 4 months ago

The same here, can't display latex

local:

image

share-note: https://share.note.sx/u94m8jvt#qCwBOy1zbbFU0Sy19k6fNKCXLjXgOqNYc8w7DsUEGi0

image
forrany commented 4 months ago

This issue is affecting a note of mine currently: https://share.note.sx/t6a622g8

The relevant Markdown for the affected section is:

Modified Kardashev Scale, based on Watts:
$$K = (\log{W} - 7.38) / 9.73$$
In case the above formatting is broken: `K = (log(W) - 7.38) / 9.73`

It should display similarly to: image

But is showing as: image

Hi, I just notice that the card layout in your share note is super cool, can you share the implementation method of the video on card layout in your notes? Thank you

TangentFoxy commented 4 months ago

Hi, I just notice that the card layout in your share note is super cool, can you share the implementation method of the video on card layout in your notes? Thank you

@forrany I think you mean the table of videos?

| Kurzgesagt | Cool Worlds |
| ---- | ---- |
| ![What Do Alien Civilizations Look Like? The Kardashev Scale](https://www.youtube.com/watch?v=rhFK5_Nx9xY) | ![Becoming a Kardashev Type I Civilization](https://www.youtube.com/watch?v=HEpNiOM6lto) |
| **Isaac Arthur** |  |
| ![The Kardashev Scale (narration only)](https://www.youtube.com/watch?v=J0ZMk0785kI) |  |

Since this is off-topic for this issue, if you have other questions, please message me on Twitter or use the email address on my profile so we don't bother others.

alangrainger commented 4 months ago

Hi @TangentFoxy and others, did you follow the troubleshooting steps in the docs?

https://docs.note.sx/troubleshooting#mathjax--latex

I get the full Latex as it should be after following the docs:

https://share.note.sx/odro4riw#ve/USvN4pDMgng/omjgfI11Uj9SQmLNlYVE0DGvAKYY

As @TheColorman says:

To add to this, it seems like [within Obsidian itself] the css styles are generated dynamically as you open different notes. E.g. if a latex is not in you current note, you won't get css for it, but if you then open a note that has it, the css will get added.

So if you're missing any Latex components, my suggestion would be to create a "Latex master CSS" note with any components you find missing, and then Force reupload just that one note to make sure all the CSS is built and used for all your other individual notes.

TangentFoxy commented 3 months ago

Apologies, I had not seen the forced re-upload option or the troubleshooting page. My note is fixed now.

(Thank you for your patience and for making Share Note freely available. It means a lot to me.)

Noslin22 commented 2 months ago

Hey, how you fixed the note? I did everything in the troubleshooting page, but it doesn't seem to work.

Local: image

share-note: https://share.note.sx/vvvjmzyd#SqNkIJbYbRjX4BkyY0WSAKHuRQUivfP+vQaChxCqd/E image