Open davidoskky opened 2 years ago
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/katex@0.15.2/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/katex@0.15.2/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/katex@0.15.2/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
});
};
};
};
Thanks, this works perfectly! Should this snippet be added to the wiki so that other people can use it as a plugin?
Should probably be fine. Main concerns are:
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.