tdsds.com/gitea
1
1
Fork 0
mirror of https://github.com/go-gitea/gitea synced 2025-07-22 18:28:37 +00:00
Code Releases Activity

Refactor markdown math render (#32831)

Browse Source 
Add more tests
This commit is contained in:
wxiaoguang
2024-12-14 13:43:05 +08:00
committed by GitHub
parent 82c59d52ea
commit cc5ff98e0d
10 changed files with 137 additions and 151 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
web_src/css/repo/home-file-list.css
View File

@@ -29,7 +29,7 @@
#repo-files-table .repo-file-line,
#repo-files-table .repo-file-cell {
border-top: 1px solid var(--color-light-border);
padding: 6px 10px;
padding: 8px 10px;
}
#repo-files-table .repo-file-line:first-child {
@@ -41,7 +41,6 @@
display: flex;
align-items: center;
gap: 0.5em;
padding: 6px 10px;
}
#repo-files-table .repo-file-last-commit {

20
web_src/js/markup/math.ts
View File

@@ -1,8 +1,14 @@
import {displayError} from './common.ts';
function targetElement(el: Element) {
function targetElement(el: Element): {target: Element, displayAsBlock: boolean} {
// The target element is either the parent "code block with loading indicator", or itself
return el.closest('.code-block.is-loading') ?? el;
// It is designed to work for 2 cases (guaranteed by backend code):
// * <pre class="code-block is-loading"><code class="language-math display">...</code></pre>
// * <code class="language-math">...</code>
return {
target: el.closest('.code-block.is-loading') ?? el,
displayAsBlock: el.classList.contains('display'),
};
}
export async function renderMath(): Promise<void> {
@@ -19,7 +25,7 @@ export async function renderMath(): Promise<void> {
const MAX_EXPAND = 1000;
for (const el of els) {
const target = targetElement(el);
const {target, displayAsBlock} = targetElement(el);
if (target.hasAttribute('data-render-done')) continue;
const source = el.textContent;
@@ -27,16 +33,12 @@ export async function renderMath(): Promise<void> {
displayError(target, new Error(`Math source of ${source.length} characters exceeds the maximum allowed length of ${MAX_CHARS}.`));
continue;
}
const displayMode = el.classList.contains('display');
const nodeName = displayMode ? 'p' : 'span';
try {
const tempEl = document.createElement(nodeName);
const tempEl = document.createElement(displayAsBlock ? 'p' : 'span');
katex.render(source, tempEl, {
maxSize: MAX_SIZE,
maxExpand: MAX_EXPAND,
displayMode,
displayMode: displayAsBlock, // katex: true for display (block) mode, false for inline mode
});
target.replaceWith(tempEl);
} catch (error) {