DEV Community

Ben Halpern Subscriber 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
 
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
 
delta456 profile image
Swastik Baranwal

OMG! Fabulous!

Collapse
 
somedood profile image
Basti Ortiz • Edited

👏👏👏

What a great feature! Thanks, @maestromac .

Collapse
 
maestromac profile image
Mac Siri

No problem 😊

Collapse
 
metalmikester profile image
Michel Renaud

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

Collapse
 
ben profile image
Ben Halpern

Interesting...

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

x2 x^2

?

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
 
gnsp profile image
Ganesh Prasad

Cool stuff

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

🤩🤩🤩🤩🤩 Holy Moly