Mathjax support

Feature Request
#1

As I mentioned in previous post, It would be cool if Mathjax is supported.
Mathjax is a js library for (la)tex rendering in browsers, there’s a wide range of use among academic people, engineers/programmers. Combining math formulas with Kinopio would be great for better math understanding.

It could be done with include Mathjax js library in the webpage or choosing server-side rendering. I know it actually involves many factors, server load, page loading speed, extra maintains, and server cost, so follow your roadmap, and if there is any chance to get it supported I’d appreciate it very much.

For the use case, please take a look at here.

Thanks

3 Likes
#2

Thank you, this is super informative :smiley:

1 Like
#3

Sorry to bump up this thread again, I have figured out a way to display math by userscript, hope it could help someone

image
image1472×636 48.6 KB

// ==UserScript==
// @name       MathJax for kinopio.club
// @namespace
// @version    0.1.1
// @license MIT
// @description Enables MathJax on kinopio.club.
// @match      https://kinopio.club/*
// @copyright
// @namespace https://greasyfork.org/en/users/863335
// ==/UserScript==
if (window.MathJax === undefined) {
    window.MathJax = {
      tex: {
        inlineMath: [['$', '$'], ['\\(', '\\)']]
      },
      svg: {
        fontCache: 'global'
      },
      startup: {
        ready: function() {
          console.log('MathJax is loaded, but not yet initialized');
          MathJax.startup.defaultReady();
          MathJax.typeset(document.querySelectorAll(".markdown span"));
          console.log('MathJax is initialized, and the initial typeset is queued');
        }
      }
    };
  
    var polyfill_src = "https://polyfill.io/v3/polyfill.min.js?features=es6";
    var mathjax_src = "https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-svg.js";
    
    var insert_script = function(src){
      var script = document.createElement("script");
      script.type = "text/javascript";
      // script.src = "http://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS_HTML";    
      //script.src = "https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.1/MathJax.js?config=TeX-AMS_HTML";
      script.src = src;
      script.async = true;
      document.getElementsByTagName("head")[0].appendChild(script);
      
    };
    insert_script(polyfill_src);
    insert_script(mathjax_src);
    
    document.addEventListener('keyup', function(){
      MathJax.typeset(MathJax.typeset(document.querySelectorAll(".markdown span")));
    });

}
5 Likes
#4

this is :fire:. there are a lot of interesting things you could do with this kind of mechanism beyond Mathjax, too :slight_smile:

this is also a good example of something that would make a good widget/plugin for the future :wink:

3 Likes
#5

How would this work on desktop app? There is no browser monkey. Also Katex might be faster than mathjax.

1 Like
#6

Like Roam has roam/js, we should have something similar if we go down this route.

:star_struck:

1 Like
#7

may be relevant: What would be your dream add-ons/power-ups/integrations?

1 Like
#8

Just wanted to add that I am a fan of KaTeX. My impression is that it’s not quite as full-featured as mathjax but doesn’t have the annoying FOUC that happens with mathjax. (I also find the context menu that comes up with mathjax a bit visually jarring.)

I’m not sure whether rendering cards in kinopio happens server-side or what, but it’d be theoretically possible to run KaTeX in node on the server, which would likely load faster for clients.

2 Likes
#9
2 Likes