Fix math mode rendering in browser

[remilvus]

Hi, I've noticed that equations written in math mode are not always rendered correctly in a browser. Fixing this would make the learning experience better for people that use separate devices for reading and solving katas.

Example of the problem

Equations written in consecutive lines are rendered as one-line equation.

In the SingleQubitGate kata under the "Matrix Representation" section the equations for $X|0\rangle$ and $X|1\rangle$ are displayed on one line instead of two. The problem is also visible in Complex Arithmetic kata under the "Imaginary numbers" section. There three equations are displayed on one line.

I can fix this by dividing the equations into multiple math sections instead of using \\ to generate a new line. For example $$eq1 \\ eq2$$ would be transformed into $$eq1$$ $$eq2$$. Here you can view example of my fix.

Technical details

I've verified that this rendering problem exists on Edge, Firefox and Chrome.

Changing the color of an equation is also broken in the browser (See: SingleQubitGates -> Ket-bra decomposition).

---

If you don't have any objections to this fix, I can search and fix the rendering problems also in other notebooks. If I do that it would be nice to know which katas are equation-heavy, so if you know please share.

---

The list of katas/tutorials/workbooks to review and fix, following the learning path. I expect most of the issues will be in tutorials and workbooks, since they have more formulas compared to the katas themselves.

• [x] Quantum Computing Concepts: Qubits and Gates, minus Superposition (@remilvus)
• [ ] Superposition
• [ ] Quantum Computing Concepts: Measurements
• [ ] Visualization tools
• [ ] Simple algorithms
• [ ] Quantum Oracles and Simple Oracle Algorithms
• [ ] Grover's search algorithm
• [ ] QFT & QPE
• [ ] Entanglement games
• [ ] Reversible computing
• [ ] Miscellaneous

[tcNickolas]

This can be a good thing to fix indeed. We've always assumed that the main use case for the katas is interactive, since the project started with the katas, and added tutorials and workbooks that had valuable reading material only much later! So we never spent time on renderings in GitHub preview mode.

Some things might just not be supported - I'm not sure GitHub previewer handles color at all? And there might be more broken things, for example, Ket-bra decomposition from your example shows up as several notes broken up by > signs rather than a single unbroken note.

If you have time to track down this kind of issues and figure out how to fix them without breaking the rendering in interactive mode, that will be great!

As for which ones have the most formulas... I think the tutorials and the workbooks for the katas/tutorials that have them are going to have most multi-line formulas, the katas themselves are less likely to have them, since they only have task descriptions that are typically less formula heavy.

[remilvus]

GitHub previewer can handle color, but when the \color command is used, it seems to color everything until the end of the line. This can be fixed by adding more curly brackets to make the scope of \color more explicit.

The note broken up by > signs was my mistake. I'm not used to using/seeing notes in notebooks, and I didn't notice that my fix broke the note. It's all fixed now, thanks for catching that!

The directions to formula heavy notebooks will be helpful. Thanks!

[remilvus]

I've fixed the rendering problems in almost all katas and workbooks from Quantum Computing Concepts: Qubits and Gates section of the Learning Path. In this section only the Superposition workbook still has rendering errors.

Unfortunately, I don't have enough time to track down all of the rendering errors, so help would be appreciated. @tcNickolas do you think that this is a "good first issue"?

[tcNickolas]

Yes, the issue is easy to identify, and you did a great job with the first batch of fixes to show how they can be applied (though it takes considerable patience!), so it will make a "good first issue". I can label it as such, and I can add a checklist of tutorials and workbooks that still have to be addressed, like I did for https://github.com/microsoft/QuantumKatas/issues/542, so that the contributors don't have to sign up to do everything at once, but rather work on subsets of notebooks.

Thank you for starting this effort!

[remilvus]

Thanks! A tip for other contributors: almost all problems can be solved by the two techniques I mentioned previously. That is:

• colour problems can be solved by adding additional curly braces \color{red} <symbol> -> { \color{red} <symbol> }
• multiline equation displayed on one line can be fixed by dividing the math mode into two $$eq1 \\ eq2$$ -> $$ eq1 $$ $$ eq2 $$