Wouldn't it be cool if DEV could render LaTeX?

Oh neat, you can.

$$c = \pm\sqrt{a^2 + b^2}$$

Here's the code to produce that snippet:

{% katex %}
c = \pm\sqrt{a^2 + b^2}
{% endkatex %}

It's new and there will be kinks that need to be worked out.

Kudos to @maestromac for a really fabulous implementation.

Implement KatexTag #6237

maestromac posted on Feb 21, 2020

What type of PR is this? (check all applicable)

• [x] Feature

Description

Used katex-ruby gem to make a Katex Liquid Tag.

• In order to make this work, I had to turn off Redcarpet's superscripts feature. I was more comfortable with this change when I learn that Github and Gitlab shared similar settings.
• I found it impossible to pass our storybook prebuild because it can't resolve @import _katex as that is a geminifed CSS. I've decided to copy provided CSS into our own app. I'd imagine this would help with serving up CSS for stack bit apps. If this is a bad idea please let me know.

Misc resources:

• similar jekyll implementation

Related Tickets & Documents

Resolves https://github.com/thepracticaldev/dev.to/issues/182 Resolves https://github.com/thepracticaldev/dev.to/issues/97

Mobile & Desktop Screenshots/Recordings (if there are UI changes)

Added tests?

• [x] yes

Added to documentation?

• [x] yes, need to add in the editor guide

[optional] Are there any post-deployment tasks we need to perform?

n/a

View on GitHub

Happy coding!

Comments

[Andrew (he/him)]

$$\int\left(\frac{\omega \omicron^w}{\mathit{t}\hbar \alpha t'^s\cdot a_ma\mathbf{z}ing}\right)\int$$

[Ben Halpern]

Ha!

[Daan Wilmer]

Cool to see that

$\text{\LaTeX} \in \text{Supported Features}$

[Basti Ortiz]

👏👏👏

What a great feature! Thanks, @maestromac .

[Mac Siri]

No problem 😊

[Swastik Baranwal]

OMG! Fabulous!

[Martí]

Lemme see if it works...

{% katex %}
c = \pm\sqrt{a^2 + b^2}
{% endkatex %}

hello $$\alpha=4$$ testing inline equation
testing double dollar notation

$$\text{This would be amazing}\longrightarrow \sqrt{x}$$

[Martí]

Ah crap without code block?

$$c = \pm\sqrt{a^2 + b^2}$$

[Martí]

Does this work? $$\text{This would be amazing}\longrightarrow \sqrt{x}$$

[Martí]

Ah I see

$$\text{So inline equations not supported... still great!}$$

:)

[Aleksandr Hovhannisyan]

Awesome!

It would also be great if we could get support for the double dollar sign notation:

$$x^2$$

I use this on my Jekyll blog, which also renders KaTeX :)

[Ben Halpern]

Interesting...

Is that fully inline, so $$x^2$$ automatically becomes...

$x^2$

?

[Aleksandr Hovhannisyan]

Yup, you can use it to generate both inline and block-level LaTeX:

This is $$x^2$$ a sentence.

Or:

$$x^2$$

[Aleksandr Hovhannisyan]

There's a great tutorial on how to get it set up here: xuc.me/blog/katex-and-jekyll/

[Michel Renaud]

Damn... I haven't used LaTeX since the mid-90s. :)

[Ben Halpern]

Charts would also be really cool. Comments in this thread have some good ideas on that matter...

What's the best charts library with a small bundle size?

Ben Halpern ・ Feb 28 ・ 1 min read

#discuss #javascript #webdev #dataviz

[cartman]

test equation

$c = \pm\sqrt{a^2 + b^2} \\ e^{ i \pi } + 1 = 0$

[Binyamin Green]

Cool!