Как вставить символ SVG в Mathjax для моего сайта [закрыто] ⇐ Html

[Anonymous]

Я работаю над веб-сайтом и реализовал своего рода вики, в которой для формул используются файлы Markdown вместе с MathJax. Проблема в том, что я хочу добавить свои собственные символы SVG, чтобы их можно было использовать для интегралов, суммирования и т. д. Другими словами, я хочу иметь переменные вокруг новых символов. Я уже спрашивал у ИИ, и он мне дал очень плохие решения.







Reading




window.MathJax = {
tex: {
inlineMath: [['\\(', '\\)'], ['$', '$']],
displayMath: [['$$', '$$']],
processEscapes: true
}
};




* {
margin: 0;
padding: 0;
box-sizing: border-box;
}

.katex-display {
margin: 1.5rem 0;
}

.h2_special{
margin-top: 0;
margin-bottom: 0;
}

.container {
font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
color: #c9d1d9;
line-height: 1.7;
max-width: 100%;
padding: 40px;
background-color: #09090b;
min-height: 80vh;
}

.back-btn {
display: inline-block;
margin-bottom: 2rem;
padding: 0.6rem 1.2rem;
background-color: #21262d;
color: #58a6ff;
text-decoration: none;
border-radius: 8px;
font-weight: 500;
}

.back-btn:hover {
background-color: #30363d;
}

.markdown-body {
font-size: 1.12rem;
}

.markdown-body h1,
.markdown-body h2,
.markdown-body h3 {
color: #58a6ff;
margin: 2.2rem 0 1rem 0;
padding-bottom: 0.4rem;
border-bottom: 1px solid #30363d;
}

.markdown-body li {
margin-top: 1em;
margin-bottom: 0.2em;
}

.markdown-body li.compact {
margin-top: 0;
margin-bottom: 0em;
}

.markdown-body pre {
background: #0d1117;
padding: 1.3rem;
border-radius: 8px;
border: 1px solid #30363d;
overflow-x: auto;
margin: 1.5rem 0;
}

.markdown-body code {
background: #21262d;
padding: 2px 6px;
border-radius: 4px;
font-size: 0.95em;
}

.img-wrapper {
margin: 1.5rem 0;
}

.img-wrapper img {
max-width: 100%;
}

.align-center { text-align: center; }
.align-right { text-align: right; }
.align-left { text-align: left; }





← Back to index




const BASE_IMG = "https://dual-math.com/galería/images/";

const params = new URLSearchParams(window.location.search);
const carpeta = params.get('folder');
const archivo = params.get('file');

if (!carpeta || !archivo || !archivo.endsWith('.md')) {
document.getElementById('content').innerHTML = `
Error
The requested file was not found.
`;
} else {

let titulo = archivo.replace('.md', '')
.replace(/[-_]/g, ' ')
.replace(/\b\w/g, l => l.toUpperCase());

document.title = titulo;

fetch(`./${carpeta}/${archivo}`)
.then(r => {
if (!r.ok) throw new Error("File not found");
return r.text();
})
.then(md => {

let formulas = [];

md = md.replace(/\$([\s\S]*?)\$/g, (match, content) => {
formulas.push(`$$${content}$$`);
return `@@FORMULA_${formulas.length - 1}@@`;
});

md = md.replace(/•([\s\S]*?)•/g, (match, content) => {
formulas.push(`\\(${content}\\)`);
return `@@FORMULA_${formulas.length - 1}@@`;
});

md = md.replace(/\[img:(center|left|right)(\|([^|\]]*))?(\|([^|\]]*))?\]\s*(.+)$/gm,
(match, align, _, size, __, caption, src) => {

let estilo = `text-align:${align}; margin:1.5rem 0;`;
let width = size ? `width:${size};` : "max-width:100%;";

let captionHTML = caption
? `${caption}`
: "";

return `

${captionHTML}
`;
});

md = md.replace(/\[align:(center|left|right)(?:\|([\d.]+)(px|em|rem|%))?\]([\s\S]*?)\[\/align\]/g,
(match, align, value, unit, content) => {

let styles = `text-align:${align};`;

if (value && unit) {
styles += ` font-size:${value}${unit};`;
}

return `${content.trim()}`;
});

md = md.replace(/^-\. /gm, '- ');
md = md.replace(/^(\d+\.\s)/gm, '$1');
md = md.replace(/ {2}\n/g, "\n
");

let html = marked.parse(md, {
gfm: true,
breaks: false,
smartLists: true,
smartypants: true
});

html = html.replace(
/(\s*)/g,
''
);

html = html.replace(/@@FORMULA_(\d+)@@/g, (_, i) => formulas);

document.getElementById('content').innerHTML = `
${titulo}
${html}
`;

MathJax.typesetPromise([document.getElementById('content')])
.catch(err => console.error(err));

})
.catch(() => {
document.getElementById('content').innerHTML = `
Could not load the file
Make sure the file exists.
`;
});
}





Если бы мне пришлось привести вам пример символа, это был бы этот символ (именно к нему я пытался добавить переменные):