Skip to content

DEV Community

Ben Halpern

for The DEV Team

Posted on Mar 9, 2020

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

#meta #changelog

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

Happy coding!

Top comments (22)

Subscribe

Andrew (he/him) • Mar 10 '20

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

Ben Halpern • Mar 10 '20

Ha!

Daan Wilmer • Mar 10 '20

Cool to see that

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

Basti Ortiz • Mar 10 '20 • Edited

👏👏👏

What a great feature! Thanks, @maestromac .

Mac Siri • Mar 10 '20

No problem 😊

Swastik Baranwal • Mar 10 '20

OMG! Fabulous!

Martí • Jan 4

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í • Jan 4

Ah crap without code block?

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

Martí • Jan 4

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

Martí • Jan 4

Ah I see

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

:)

Aleksandr Hovhannisyan • Mar 10 '20

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 • Mar 10 '20

Interesting...

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

x^2

?

Aleksandr Hovhannisyan • Mar 10 '20

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

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

Or:

$$x^2$$

Aleksandr Hovhannisyan • Mar 10 '20

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

Michel Renaud • Mar 10 '20

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

Ben Halpern • Mar 9 '20 • Edited

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

ben image

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

Ben Halpern ・ Feb 28 ・ 1 min read

#discuss #javascript #webdev #dataviz

cartman • Sep 18 '20

test equation

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

Binyamin Green • Mar 10 '20

Cool!

View full discussion (22 comments)

Read next

Building Simple Real-Time System Monitor using Go, HTMX, and Web Socket

Didik Tri Susanto - Nov 17

Stop Making These Component Mistakes

Paul Adeyele - Nov 16

O que é um problema in-place?

Felipe Cezar - Nov 16

SSRF Attacks: The Silent Threat Hiding in Your Server

Golam_Mostafa - Nov 16