218 lines
7.6 KiB
HTML
218 lines
7.6 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<script src="https://polyfill.io/v3/polyfill.min.js?features=es6"></script>
|
|
<script>
|
|
// Intentar cargar MathJax local primero, luego CDN como fallback
|
|
window.mathjaxLoadAttempts = 0;
|
|
window.mathJaxReady = false;
|
|
|
|
function loadMathJax(url, isFallback = false) {
|
|
return new Promise((resolve, reject) => {
|
|
const script = document.createElement('script');
|
|
script.id = 'MathJax-script';
|
|
script.async = true;
|
|
script.src = url;
|
|
|
|
script.onload = () => {
|
|
console.log('MathJax cargado desde:', url);
|
|
resolve();
|
|
};
|
|
|
|
script.onerror = () => {
|
|
console.error('Error cargando MathJax desde:', url);
|
|
reject(new Error('MathJax load failed'));
|
|
};
|
|
|
|
document.head.appendChild(script);
|
|
});
|
|
}
|
|
|
|
// Configuración de MathJax
|
|
window.MathJax = {
|
|
tex: {
|
|
inlineMath: [['$', '$'], ['\\(', '\\)']],
|
|
displayMath: [['$$', '$$'], ['\\[', '\\]']],
|
|
processEscapes: true
|
|
},
|
|
svg: {
|
|
scale: 0.9,
|
|
minScale: 0.5,
|
|
fontCache: 'global'
|
|
},
|
|
startup: {
|
|
ready: function () {
|
|
MathJax.startup.defaultReady();
|
|
window.mathJaxReady = true;
|
|
console.log('MathJax SVG completamente listo');
|
|
}
|
|
}
|
|
};
|
|
|
|
// Intentar cargar MathJax local, luego CDN
|
|
loadMathJax('file:///D:/Proyectos/Scripts/Calcv2/.mathjax/MathJax-3.2.2/es5/tex-svg.js').catch(() => {
|
|
console.log('Fallback a CDN de MathJax...');
|
|
return loadMathJax('https://cdn.jsdelivr.net/npm/mathjax@3.2.2/es5/tex-svg.js', true);
|
|
}).catch(() => {
|
|
console.error('No se pudo cargar MathJax desde ninguna fuente');
|
|
// Marcar como listo para mostrar contenido sin renderizado
|
|
setTimeout(() => {
|
|
window.mathJaxReady = true;
|
|
console.log('Modo fallback activado - sin renderizado LaTeX');
|
|
}, 2000);
|
|
});
|
|
</script>
|
|
<style>
|
|
body {
|
|
background-color: #1a1a1a;
|
|
color: #d4d4d4;
|
|
font-family: 'Segoe UI', Arial, sans-serif;
|
|
margin: 0;
|
|
padding: 8px;
|
|
line-height: 1.2;
|
|
}
|
|
.equation-block {
|
|
background: rgba(45, 45, 48, 0.8);
|
|
border-left: 3px solid;
|
|
margin: 4px 0;
|
|
padding: 6px 12px;
|
|
border-radius: 4px;
|
|
transition: all 0.1s ease;
|
|
}
|
|
.equation-block:hover {
|
|
background: rgba(45, 45, 48, 0.9);
|
|
}
|
|
.comment { border-left-color: #6a9955; }
|
|
.assignment { border-left-color: #dcdcaa; }
|
|
.equation { border-left-color: #c586c0; }
|
|
.symbolic { border-left-color: #9cdcfe; }
|
|
|
|
.math-content {
|
|
margin: 2px 0;
|
|
font-size: 14px;
|
|
}
|
|
|
|
.comment-text {
|
|
font-style: italic;
|
|
color: #6a9955;
|
|
font-size: 12px;
|
|
margin: 0;
|
|
}
|
|
|
|
.info-message {
|
|
text-align: center;
|
|
padding: 20px;
|
|
color: #666;
|
|
font-size: 12px;
|
|
}
|
|
|
|
/* Optimizaciones para SVG rendering */
|
|
mjx-container[jax="SVG"] {
|
|
margin: 2px 0 !important;
|
|
}
|
|
|
|
mjx-container[jax="SVG"] svg {
|
|
vertical-align: middle;
|
|
}
|
|
|
|
mjx-container[jax="SVG"] svg text {
|
|
fill: #d4d4d4 !important;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div id="equations-container">
|
|
<div class="info-message">
|
|
Panel de Ecuaciones LaTeX (SVG)
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
function addEquation(type, content) {
|
|
try {
|
|
var container = document.getElementById('equations-container');
|
|
if (!container) {
|
|
console.error('Container no encontrado');
|
|
return;
|
|
}
|
|
|
|
// Limpiar mensaje inicial si existe
|
|
var infoMsg = container.querySelector('.info-message');
|
|
if (infoMsg) infoMsg.remove();
|
|
|
|
var equation = document.createElement('div');
|
|
equation.className = 'equation-block ' + type;
|
|
|
|
var mathContent = document.createElement('div');
|
|
mathContent.className = 'math-content';
|
|
|
|
if (type === 'comment') {
|
|
mathContent.className = 'comment-text';
|
|
mathContent.textContent = content;
|
|
console.log('Comentario agregado:', content);
|
|
} else {
|
|
mathContent.innerHTML = '$$' + content + '$$';
|
|
console.log('Ecuación agregada:', content);
|
|
}
|
|
|
|
equation.appendChild(mathContent);
|
|
container.appendChild(equation);
|
|
|
|
// Re-renderizar MathJax solo si está listo
|
|
if (window.MathJax && window.mathJaxReady && type !== 'comment') {
|
|
console.log('Renderizando con MathJax...');
|
|
MathJax.typesetPromise([equation]).then(() => {
|
|
console.log('Ecuación renderizada exitosamente');
|
|
}).catch(function(err) {
|
|
console.error('Error renderizando con MathJax:', err);
|
|
// Mostrar como texto plano si falla
|
|
mathContent.innerHTML = content;
|
|
});
|
|
} else if (type !== 'comment') {
|
|
console.log('MathJax no listo, mostrando como texto:', window.mathJaxReady);
|
|
// Mostrar como texto plano si MathJax no está listo
|
|
mathContent.innerHTML = content;
|
|
}
|
|
|
|
} catch (e) {
|
|
console.error('Error en addEquation:', e);
|
|
}
|
|
}
|
|
|
|
function clearEquations() {
|
|
try {
|
|
var container = document.getElementById('equations-container');
|
|
if (container) {
|
|
container.innerHTML = '<div class="info-message">Panel de Ecuaciones LaTeX (SVG)</div>';
|
|
console.log('Ecuaciones limpiadas');
|
|
}
|
|
} catch (e) {
|
|
console.error('Error en clearEquations:', e);
|
|
}
|
|
}
|
|
|
|
// Función para notificar que está listo para renderizar
|
|
function triggerInitialRender() {
|
|
try {
|
|
console.log('Verificando estado MathJax:', window.mathJaxReady);
|
|
if (window.mathJaxReady) {
|
|
console.log('MathJax SVG listo para renderizado inicial');
|
|
return true;
|
|
}
|
|
return false;
|
|
} catch (e) {
|
|
console.error('Error en triggerInitialRender:', e);
|
|
return false;
|
|
}
|
|
}
|
|
|
|
// Monitor de estado para debug
|
|
setInterval(() => {
|
|
if (window.mathJaxReady) {
|
|
console.log('🎯 MathJax listo detectado');
|
|
}
|
|
}, 3000);
|
|
</script>
|
|
</body>
|
|
</html> |