Can I left align MathJax blocks?

Anki Card Design
1

I never use MathJax block mode because my flashcards are left aligned, so it looks weird when the equation is way out in the middle. I am forced to use [$$][/$$] cuz at least it follows my alignment, but I don’t like that I don’t get a preview in my editor. I’m wondering if there is any way to style the MathJax with CSS.

2

MathJax renders into regular html, so of course there is. The exact rules depend on your current template layout and styling though, so you’ll need to share those. If it is close to the default note type, you can just try changing text-align to left in the .card container.

3

Add this to the styling:

mjx-container {
  text-align: left ! important;
}
4

Thanks! Is there any way I can see the raw HTML of the final card? I don’t mean the HTML in the editor you can get with Ctrl+Shift+X, I mean the HTML of the final rendered card, that would have let me see the mjx-container element.

5

Also, I’d like to point out that for some reason this styling only takes place on the rendered card, it does not happen in my editor preview. Applying the same CSS to anki-mathjax does not change this, and that was my only guess as to how to do it.

6

You can use the webview inspector add-on.

7

If you’re lazy like me and don’t want to use that addon, use something like this:

<div id=t>{{Front}}</div>

<script>
var e = document.getElementById("t");

setTimeout(() => {
e.innerText = e.innerHTML;
}, 500)
</script>

As for the editor, I think you need addons to modify it’s styling. I’d not bother since it makes it easier to spot block math while editing.

8

One more option is to use

<script>
if (!document.getElementById("eruda")) {
  const scriptL = document.createElement("script");
  scriptL.src = "https://cdn.jsdelivr.net/npm/eruda";
  scriptL.onload = () => eruda.init();
  document.head.appendChild(scriptL);
}
</script>

which injects a fully-functioning debug console into a card itself (and works on every platform, although requires active internet connection).