DEV Community

Ben Halpern for The DEV Team

Posted on

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

Oh neat, you can.

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

Here's the code to produce that snippet:

{% katex %}
c = \pm\sqrt{a^2 + b^2}
{% endkatex %}
Enter fullscreen mode Exit fullscreen mode

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

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:

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)

Kapture 2020-02-21 at 16 07 15 image

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)

Collapse
 
awwsmm profile image
Andrew (he/him)

(ωοwtαtsamazing) \int\left(\frac{\omega \omicron^w}{\mathit{t}\hbar \alpha t'^s\cdot a_ma\mathbf{z}ing}\right)\int
Collapse
 
ben profile image
Ben Halpern

Ha!

Collapse
 
dwilmer profile image
Daan Wilmer

Cool to see that

LaTeXSupported Features\text{\LaTeX} \in \text{Supported Features}
Collapse
 
somedood profile image
Basti Ortiz • Edited

👏👏👏

What a great feature! Thanks, @maestromac .

Collapse
 
maestromac profile image
Mac Siri

No problem 😊

Collapse
 
delta456 profile image
Swastik Baranwal

OMG! Fabulous!

Collapse
 
mapaor profile image
Martí

Lemme see if it works...

{% katex %}
c = \pm\sqrt{a^2 + b^2}
{% endkatex %}
Enter fullscreen mode Exit fullscreen mode

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

$$\text{This would be amazing}\longrightarrow \sqrt{x}$$
Enter fullscreen mode Exit fullscreen mode
Collapse
 
mapaor profile image
Martí

Ah crap without code block?

c=±a2+b2 c = \pm\sqrt{a^2 + b^2}
Collapse
 
mapaor profile image
Martí

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

Thread Thread
 
mapaor profile image
Martí

Ah I see

So inline equations not supported... still great! \text{So inline equations not supported... still great!}
:)
Collapse
 
aleksandrhovhannisyan profile image
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 :)

Collapse
 
ben profile image
Ben Halpern

Interesting...

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

x2 x^2

?

Collapse
 
aleksandrhovhannisyan profile image
Aleksandr Hovhannisyan

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

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

Or:

$$x^2$$

Collapse
 
aleksandrhovhannisyan profile image
Aleksandr Hovhannisyan

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

Collapse
 
metalmikester profile image
Michel Renaud

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

Collapse
 
ben profile image
Ben Halpern • Edited

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

Collapse
 
cartman0 profile image
cartman

test equation

c=±a2+b2eiπ+1=0 c = \pm\sqrt{a^2 + b^2} \\ e^{ i \pi } + 1 = 0
Collapse
 
binyamin profile image
Binyamin Green

Cool!

Collapse
 
zenulabidin profile image
Ali Sherief

Thank you! I was scratching my head wondering how to do this. This will enable math-related articles to be posted here.

Collapse
 
gnsp profile image
Ganesh Prasad

Cool stuff

Collapse
 
sharadcodes profile image
Sharad Raj (He/Him) • Edited

🤩🤩🤩🤩🤩 Holy Moly

Collapse
 
jeikabu profile image
jeikabu

LaTeX was a major part of my stint in academia. Have something of a love/hate relationship with it, but this is a welcome feature, nonetheless.