Improve MathML examples

[pepelsbey]

Description

• Adds a short intro explaining the example.
• Uses Playground and shows the code.
• Highlights the steps with comments.
• Uses font-size: smaller for inline annotations (it nicely aligns with the \small key in TeX).
• Adds TeX annotations.

Motivation

To make examples more useful and allow playing with them.

[github-actions]

Preview URLs

• /en-US/docs/Web/MathML/Examples/Deriving_the_Quadratic_Formula
• /en-US/docs/Web/MathML/Examples/MathML_Pythagorean_Theorem

External URLs (4)

URL: /en-US/docs/Web/MathML/Examples/Deriving_the_Quadratic_Formula
Title: Deriving the Quadratic Formula

• https://en.wikipedia.org/wiki/Quadratic_formula (1 time) (Note! This may be a new URL 👀)
• https://www.latex-project.org/ (1 time) (Note! This may be a new URL 👀)

---

URL: /en-US/docs/Web/MathML/Examples/MathML_Pythagorean_Theorem
Title: Proving the Pythagorean theorem

• https://en.wikipedia.org/wiki/Pythagorean_theorem (1 time) (Note! This may be a new URL 👀)
• https://www.latex-project.org/ (1 time) (Note! This may be a new URL 👀)

(comment last updated: 2024-11-27 11:48:25)

[fred-wang]

I think this should use &, right?

[pepelsbey]

Given that it’s not rendered and you’re supposed to copy-paste it from the source, it might be better to store TeX annotations as they are. Otherwise, it would be hard to reproduce MathML with them, especially the bigger ones. Not sure why GitHub is concerned with naked &: browsers render it just fine, and the HTML validator doesn’t mind it either.

[fred-wang]

Ditto.

[fred-wang]

OK, & immediately followed by something other than # or an alphanum seems ok if I read the parsing algo correctly:
https://html.spec.whatwg.org/multipage/parsing.html#character-reference-state
https://html.spec.whatwg.org/multipage/parsing.html#flush-code-points-consumed-as-a-character-reference

and indeed the validator does not complain.

The non-normative section https://html.spec.whatwg.org/#syntax-errors mentions it as non-conforming in "Errors involving fragile syntax constructs". The path causing error would be:
https://html.spec.whatwg.org/multipage/parsing.html#parse-error-unknown-named-character-reference
https://html.spec.whatwg.org/multipage/parsing.html#named-character-reference-state
https://html.spec.whatwg.org/multipage/parsing.html#ambiguous-ampersand-state

[pepelsbey]

There are only two cases in annotations: & and &=, surrounded by spaces. So it should be fine then. Thanks!