51383ec084
As discussed in #22847 the helpers in helpers.less need to have a separate prefix as they are causing conflicts with fomantic styles This will allow us to have the `.gt-hidden { display:none !important; }` style that is needed to for the reverted PR. Of note in doing this I have noticed that there was already a conflict with at least one chroma style which this PR now avoids. I've also added in the `gt-hidden` style that matches the tailwind one and switched the code that needed it to use that. Signed-off-by: Andrew Thornton <art27@cantab.net> --------- Signed-off-by: Andrew Thornton <art27@cantab.net> Co-authored-by: wxiaoguang <wxiaoguang@gmail.com>
42 lines
1.3 KiB
JavaScript
42 lines
1.3 KiB
JavaScript
function displayError(el, err) {
|
|
const target = targetElement(el);
|
|
target.classList.remove('is-loading');
|
|
const errorNode = document.createElement('div');
|
|
errorNode.setAttribute('class', 'ui message error markup-block-error gt-mono');
|
|
errorNode.textContent = err.str || err.message || String(err);
|
|
target.before(errorNode);
|
|
}
|
|
|
|
function targetElement(el) {
|
|
// The target element is either the current element if it has the `is-loading` class or the pre that contains it
|
|
return el.classList.contains('is-loading') ? el : el.closest('pre');
|
|
}
|
|
|
|
export async function renderMath() {
|
|
const els = document.querySelectorAll('.markup code.language-math');
|
|
if (!els.length) return;
|
|
|
|
const [{default: katex}] = await Promise.all([
|
|
import(/* webpackChunkName: "katex" */'katex'),
|
|
import(/* webpackChunkName: "katex" */'katex/dist/katex.css'),
|
|
]);
|
|
|
|
for (const el of els) {
|
|
const source = el.textContent;
|
|
const displayMode = el.classList.contains('display');
|
|
const nodeName = displayMode ? 'p' : 'span';
|
|
|
|
try {
|
|
const tempEl = document.createElement(nodeName);
|
|
katex.render(source, tempEl, {
|
|
maxSize: 25,
|
|
maxExpand: 50,
|
|
displayMode,
|
|
});
|
|
targetElement(el).replaceWith(tempEl);
|
|
} catch (error) {
|
|
displayError(el, error);
|
|
}
|
|
}
|
|
}
|