Stage 2 - Support KaTex.js for math formulas

[Alex-Cannon]

I think this issue is pretty straight-forward. @algeboy I want to confirm that we want to use KaTeX.js to display math formulas.

This is how this would work:

1. You would use the KaTeX syntax to create the formulas like so using the official API:

{% katex.html formula="KaTeX string" %}

2. The library will render the formula on the page.

[algeboy]

awesome. we can try that, we can make such content from stackedit.io which outputs KaTeX

[Alex-Cannon]

Alright sounds great. I'll create the component that you can use in blog posts. I'll create the documentation in a separate issue.

[Alex-Cannon]

@algeboy I knocked this feature out today. Below is a screen shot of KaTex working and how you'd use it in a blog post.

To use KaTex, simply use a component I created like so:

{% include katex.html exp="YOUR_KATEX_EXPRESSION" %}

Let me know if there's anything else that should be changed about this feature.

[algeboy]

can this be done in raw markdown? E.g. just using $exp$, e.g. $\sqrt{2}{a^2+b^2}$ instead of the more verbose {% include katex.html exp="YOUR_KATEX_EXPRESSION" %}?

[Alex-Cannon]

~@algeboy let me do some research to see if this can be done~

@algeboy it looks like this can be done. I'll start work on implementing this.

[Alex-Cannon]

@algeboy I was able to make writing math formulas easier in markdown. Below is an image of how this looks:

If you look closely, you can now write math without the {%%} statement. For example, you can use this:

$$
Your MathJax goes here
$$

instead of

{% include katex.html src="YOUR_KATEX" %}

Important Note: I removed Katex and replaced it with MathJax to make this work. I did this because MathJax works very well with kramdown. It will take a bit longer to load and the syntax is different than katex.

Is this acceptable?

[algeboy]

Hmm, I understand the impulse. Actually MathJax is sort of spotty on matching fonts with the rest of the document. Katex fixed alot of this. If its a hassle we can just include both and let folks decide. I just had the feeling that there would be a way to make javascript or something like it that would let one write $f(x)=\sqrt[2]{x-5}$ and it would replace it with something like {% include katex.html src = "f(x)=\sqrt[2]{x-5}" %} that way you write in usual markdown but you get the more glamorous fonts of katex.

[Alex-Cannon]

Alright. Let me see if I can make it work with Katex, that way there aren’t two math libraries floating around.

On Fri, Oct 18, 2019 at 10:38 AM James B. Wilson notifications@github.com wrote:

Hmm, I understand the impulse. Actually MathJax is sort of spotty on matching fonts with the rest of the document. Katex fixed alot of this. If its a hassle we can just include both and let folks decide. I just had the feeling that there would be a way to make javascript or something like it that would let one write $f(x)=\sqrt[2]{x-5}$ and it would replace it with something like {% include katex.html src = "f(x)=\sqrt[2]{x-5}" %} that way you write in usual markdown but you get the more glamorous fonts of katex.

— You are receiving this because you were assigned. Reply to this email directly, view it on GitHub https://github.com/thetensor-space/thetensor-space.github.io/issues/25?email_source=notifications&email_token=AG25BJJPRXSRUJCREEHD6Y3QPHRADA5CNFSM4I3JBL4KYY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOEBVCNWQ#issuecomment-543827674, or unsubscribe https://github.com/notifications/unsubscribe-auth/AG25BJP7NDSVZDCHWSBXVGTQPHRADANCNFSM4I3JBL4A .

-- Alexander Cannon | Front End Software Engineer T 970-812-2131 | alexcannon2018@gmail.com https://alex-cannon.github.io/portfolio https://www.linkedin.com/in/alexander-lee-cannon/

[algeboy]

I will mention an example that I like is how stackedit.io works. You can edit things in the inline latex style $f(x)=\sqrt[2]{x-4}$ and display equation form $$f(x)=\sqrt[2]{x-4}$$ way, but it converts the HTML of hte markdown into katex.

Here's an explicit example from that system:

---

Hello World

Here is an inline math equations $f(x)=\sqrt[2]{x-4}$ and here is one in display mode $$\int_0^19 \frac{dx}{x}$$

Written with StackEdit.

it creates something well spaced and nice looking all in katex. You can see the page source it makes.

[Alex-Cannon]

Alright, This works now. See #33