Display Latex equations

[davidoskky]

It would be nice if latex equations fetched from other websites were rendered.

For example this website uses MathJax to render latex equations. https://www.hendrik-erz.de/feed.xml

Fetching this article with the full text spout, the latex equation is correctly fetched, but displayed as text in selfoss $\frac{102,000,000,000}{1,000,000,000} = 102 \text{GB}$

I guess it would be difficult to implement the whole rendering of latex equations, but maybe it could be possible to fetch the rendered image from the website itself.

[jtojnar]

Looking at the page source code $D<em>{i=3, j=2} = 0$ or that $C</em>{i=3, j=1} = 2$, there is not really any rendered image (and note that their CMS mangles the code replacing * for italics). It must be rendered by JavaScript on client side.

With latest build of selfoss, it should be possible to add the following to the user.js file in the selfoss directory:

const katexStyle = document.createElement('link');
katexStyle.setAttribute('rel', 'stylesheet');
katexStyle.setAttribute('href', 'https://cdn.jsdelivr.net/npm/[email protected]/dist/katex.min.css');
katexStyle.setAttribute('integrity', 'sha384-MlJdn/WNKDGXveldHDdyRP1R4CTHr3FeuDNfhsLPYrq2t0UBkUdK2jyTnXPEK1NQ');
katexStyle.setAttribute('crossorigin', 'anonymous');
document.head.appendChild(katexStyle);

const katexScript = document.createElement('script');
katexScript.setAttribute('defer', 'defer');
katexScript.setAttribute('src', 'https://cdn.jsdelivr.net/npm/[email protected]/dist/katex.min.js');
katexScript.setAttribute('integrity', 'sha384-VQ8d8WVFw0yHhCk5E8I86oOhv48xLpnDZx5T9GogA/Y84DcCKWXDmSDfn13bzFZY');
katexScript.setAttribute('crossorigin', 'anonymous');
document.head.appendChild(katexScript);
katexScript.onload = function() {
    const katexAutoRenderScript = document.createElement('script');
    katexAutoRenderScript.setAttribute('defer', 'defer');
    katexAutoRenderScript.setAttribute('src', 'https://cdn.jsdelivr.net/npm/[email protected]/dist/contrib/auto-render.min.js');
    katexAutoRenderScript.setAttribute('integrity', 'sha384-+XBljXPPiv+OzfbB3cVmLHf4hdUFHlWNZN5spNQ7rmHTXpd7WvJum6fIACpNNfIR');
    katexAutoRenderScript.setAttribute('crossorigin', 'anonymous');
    document.head.appendChild(katexAutoRenderScript);

    katexAutoRenderScript.onload = function() {
        const originalProcessItemContents = selfoss.extensionPoints.processItemContents;
        selfoss.extensionPoints.processItemContents = function(element) {
            // Do not forget to call the previous definition.
            originalProcessItemContents(element);

            renderMathInElement(element, {
              // customised options
              // • auto-render specific keys, e.g.:
              delimiters: [
                  {left: '$$', right: '$$', display: true},
                  {left: '$', right: '$', display: false},
                  {left: '\\(', right: '\\)', display: false},
                  {left: '\\[', right: '\\]', display: true}
              ],
              // • rendering keys, e.g.:
              throwOnError : false
            });
        };
    };
};

[davidoskky]

Thanks, this works perfectly! Should this snippet be added to the wiki so that other people can use it as a plugin?

[jtojnar]

Should probably be fine. Main concerns are:

• it will not work for articles that are expanded before the scripts load (e.g. when navigating directly to an article)
• possible breakage once we disable all third party scripts (https://github.com/fossar/selfoss/issues/891)
• possible breakage of some articles (what happens when prices in dollars are listed)
• slowness on long articles