Mathematical expressions

Ok this is pretty insane. I have to say I have written most of the code in the katex plug, so I know how the library works and all, but still … It took me 10 minutes to write this (and this includes two slash commands for easier use) very tiny space lua and look what’s possible.

Space Lua
latex = {
  header = [[<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/katex.min.css">]],
  katex = js.import("https://cdn.jsdelivr.net/npm/[email protected]/+esm")
}

function latex.inline(expression)  
  local html = latex.katex.renderToString(expression, {
    trust = true,
    throwOnError = false,
    displayMode = false
  })
  
  return widget.new {
    html = "<span>" + latex.header + html + "</span>"
  }
end

function latex.block(expression)
  local html = latex.katex.renderToString(expression, {
    trust = true,
    throwOnError = false,
    displayMode = true
  })
  
  return widget.new {
    html = "<span>" + latex.header + html + "</span>"
  }
end 

slashcommand.define {
  name = "math",
  run = function()
    editor.insertAtCursor("${latex.inline[[]]}", false, true)
    editor.moveCursor(editor.getCursor() - 3)
  end
}

slashcommand.define {
  name = "equation",
  run = function()
    editor.insertAtCursor("${latex.block[[]]}", false, true)
    editor.moveCursor(editor.getCursor() - 3)
  end
}
Space Style
.sb-lua-directive-inline:has(.katex-html) {
  border: none !important;
}

Code for the image
If ${latex.inline[[S]]} is a set, ${latex.inline[[\circ]]} is a binary operation on ${latex.inline[[S]]}, and ${latex.inline[[e \in S]]}, then ${latex.inline[[G = (S, e, \circ)]]} is called a *group* if

1. ${latex.inline[[\forall a, b \in G, \quad a \circ \ b \in G]]} (completeness);
2. ${latex.inline[[(ab)c = a(bc), \quad \forall a,b,c \in S]]} (associativity);
3. ${latex.inline[[\exists e \in S]]} such that ${latex.inline[[ae=a=ea, \quad \forall a \in S]]} (identity);
4. ${latex.inline[[\forall a \in S, \quad \exists b \in S]]} such that ${latex.inline[[ab=e=ba]]} (inverse).

The Fourier transform of a complex-valued (Lebesgue) integrable function ${latex.inline[[f(x)]]} on the real line, is the complex valued function ${latex.inline[[\hat {f}(\xi )]]}, defined by the integral
${latex.block[[\widehat{f}(\xi) = \int_{-\infty}^{\infty} f(x)\ e^{-i 2\pi \xi x}\,dx, \quad \forall \xi \in \mathbb{R}.]]}

It’s actually insane what’s possible. Only thing that bugs me here is that it (afaik) won’t work offline because the cdn resources aren’t cached. Open to ideas on this one, dependencies always have kind of been a struggle with SB.

(This really makes the katex plug obsolete @zef)

6 Likes