Wouldn't it be cool if DEV could render LaTeX?
#meta#changelog
Ben Halpern

Ben Halpern @ben

About: A Canadian software developer who thinks he’s funny.

Location:
NY
Joined:
Dec 27, 2015

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

Publish Date: Mar 9 '20
109 23

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

maestromac avatar
maestromac posted on

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

View on GitHub

Happy coding!

Comments 23 total

  • Ben Halpern
    Ben HalpernMar 9, 2020

    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
  • Swastik Baranwal
    Swastik BaranwalMar 10, 2020

    OMG! Fabulous!

  • Basti Ortiz
    Basti OrtizMar 10, 2020

    👏👏👏

    What a great feature! Thanks, @maestromac .

  • Michel Renaud
    Michel RenaudMar 10, 2020

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

  • Sharad Raj (He/Him)
    Sharad Raj (He/Him)Mar 10, 2020

    🤩🤩🤩🤩🤩 Holy Moly

  • Binyamin Green
    Binyamin GreenMar 10, 2020

    Cool!

  • jeikabu
    jeikabuMar 10, 2020

    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.

  • Daan Wilmer
    Daan WilmerMar 10, 2020

    Cool to see that

    LaTeX∈Supported Features\text{\LaTeX} \in \text{Supported Features}
  • Ben Halpern
    Ben HalpernMar 10, 2020

    Interesting...

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

    x2 x^2

    ?

  • Ganesh Prasad
    Ganesh PrasadMar 10, 2020

    Cool stuff

  • Andrew (he/him)
    Andrew (he/him)Mar 10, 2020

    ∫(ωοwtℏαt′s⋅amazing)∫ \int\left(\frac{\omega \omicron^w}{\mathit{t}\hbar \alpha t'^s\cdot a_ma\mathbf{z}ing}\right)\int
  • Ali Sherief
    Ali SheriefMar 14, 2020

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

  • cartman
    cartmanSep 18, 2020

    test equation

    c=±a2+b2eiπ+1=0 c = \pm\sqrt{a^2 + b^2} \\ e^{ i \pi } + 1 = 0
  • Martí
    MartíJan 4, 2024

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

      Ah crap without code block?

      c=±a2+b2 c = \pm\sqrt{a^2 + b^2}
      • Martí
        MartíJan 4, 2024

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

        • Martí
          MartíJan 4, 2024

          Ah I see

          So inline equations not supported... still great! \text{So inline equations not supported... still great!}
          :)
Add comment