Using Chemical Formulas / mhchem

[potatoes1286]

Hey! I've been trying to self host mkdocs on my server for a while now, but i cannot, for the life of me, figure out how to make chemical formulas.

I've used mhchem before, and have tried to import it by enabling arithmatex + mathjax and changing mathjax.js to

window.MathJax = {
  tex: {
    inlineMath: [["\\(", "\\)"]],
    displayMath: [["\\[", "\\]"]],
    packages: {'[+]': ['mhchem']},
    processEscapes: true,
    processEnvironments: true
  },
  loader: {load: ['[tex]/mhchem']},
  options: {
    ignoreHtmlClass: ".*|",
    processHtmlClass: "arithmatex"
  }
};

document$.subscribe(() => {
  MathJax.typesetPromise()
})

Alas, while math renders fine, \ce fails to be recognized.

Is there a way to render mhchem into mkdocs? I'm unfortunately pretty new to self-hosting- so i dont know 100% what i'm doing.

Using docker if that might be important for whatever reason.

[squidfunk]

So as I read, you followed the MathJax self-hosting guide, right? Other than that, the Docker container is not intended for serving – it's only intended for building a static site.

[facelessuser]

I can configure it just fine:

  window.MathJax = {
    loader: {load: ['[tex]/mhchem']},
    tex: {
      packages: {'[+]': ['mhchem']},
      inlineMath: [["\\(", "\\)"]],
      displayMath: [["\\[", "\\]"]],
      processEscapes: true,
      processEnvironments: true,
      tagSide: "right",
      tagIndent: ".8em",
      multlineWidth: "85%",
      tags: "ams"
    },
    options: {
      ignoreHtmlClass: ".*",
      processHtmlClass: "arithmatex"
    }
  }

ignoreHtmlClass: ".*", does not need ".*|". That may have been a mistake of mine that was copied over into Material's documentation.

Then I place this in my documents:

$$
\ce{C6H5-CHO}
\ce{$A$ ->[\ce{+H2O}] $B$}
\ce{SO4^2- + Ba^2+ -> BaSO4 v}
$$

And I get:

Of course, this assumes you have Arithmatex enabled:

  - pymdownx.arithmatex:
      generic: true
      block_tag: 'pre'

You'll notice I put them in pre tags...I think I did this because I have minimizing enabled, and it will do HTML minimization on div tags, but not pre tags, so that protects things from breaking. If you are not doing minimization, that part is probably not needed.

I do have some customizations in my project, so I am admittingly not using a pure Material theme, but I think that is all you need in Material to get it to work.

[potatoes1286]

Well. This is a bit embarrassing.

After a long night, a computer restart, and not much else, \ce began to work. I didn't even touch the server after I tested and posted this discussion.

Perhaps it's some form of caching that hadn't updated? Regardless, I'd like to thank you two for posting comments. Thank you very much for your time!