增加
一个功能就是双击到
latex公式
时，做
一个类似/* 点击元素向父窗口发送行号（可选） */
document.addEventListener('click', (ev) => {
const line = ev.target.closest('[data-source-line]')?.dataset.sourceLine;
if (line) {
parent.postMessage({ type: 'preview-click', line: Number(line) }, '*');
}
}); 发送 parent.postMessage({ type: '
latex-update',
latex: "获取的
latex公式" }, '*'); preview-template.html中
latex公式都类似$x=\frac {-b\pm
\sqrt {{b}^{2}-4ac}} {2a}$ 使用双$$包裹的内容都是公式 下面是需要
修改的代码<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>实
时预览</title>
<meta name="viewport" content="width=device-width,initial-scale=1" />
<!-- 动态外部样式占位，将由父窗口注入 -->
<link id="ext-css" rel="stylesheet" href="" />
<!-- 错误信息占位 -->
<style>
body{margin:0;padding:0;font-family:sans-serif;background:#fff;color:#333;}
#error-mask{
position:fixed;inset:0;background:rgba(255,0,0,.05);
display:flex;justify-content:center;align-items:center;
}
#error-box{
max-width:90%;max-height:90%;overflow:auto;
padding:1rem 1.5rem;border:1px solid #e74c3c;border-radius:4px;
background:#fdf2f2;color:#c0392b;font-family:Consolas,monospace;
white-space:pre-wrap;
}
/* 点击高亮 */
[data-source-highlight]{
outline:2px dashed #ff6b00;
outline-offset:2px;
}
/*
LaTeX公式样式 */
.
latex-formula {
display: inline-block;
margin: 0 0.2em;
}
</style>
<script>
MathJax = {
tex: {
inlineMath: [['$', '$'], ['\\(', '\\)']]
},
svg: {
fontCache: 'global'
}
};
</script>
<script src="/mathjax/es5/tex-chtml.js" async></script>
<!-- 内联样式 / 脚本由父窗口 postMessage 注入 -->
</head>
<body>
<!-- 真实渲染内容 -->
<div id="app"></div>
<p style="color: red;">实际应用中应使用动态规划或矩阵快速幂等优化方法。$x=\frac {-b\pm
\sqrt {{b}^{2}-4ac}} {2a}$</p>
<script>
/* 负责接收父窗口发来的 HTML/CSS/JS 与错误信息 */
window.addEventListener('message', (e) => {
const { type, payload } = e.data;
if (type === 'update') {
const { html, css, js, cssUrl, error } = payload;
// 显示或隐藏错误
const oldBox = document.getElementById('error-mask');
if (oldBox) oldBox.remove();
if (error) {
const mask = document.createElement('div');
mask.id = 'error-mask';
mask.innerHTML = `<div id="error-box">${error}</div>`;
document.body.appendChild(mask);
return;
}
// 注入 CSS
let styleEl = document.getElementById('inline-style');
if (!styleEl) {
styleEl = document.createElement('style');
styleEl.id = 'inline-style';
document.head.appendChild(styleEl);
}
styleEl.textContent = css;
// 外部 CSS
const extLink = document.getElementById('ext-css');
extLink.href = cssUrl || '';
// 注入 HTML / JS
document.getElementById('app').innerHTML = html;
try {
// 处理
LaTeX公式
process
Latex();
// 用 Function 包裹，让报错可以捕获行列
new Function(js)();
// 再次处理
LaTeX公式（JS可能添加了新的公式）
process
Latex();
// 触发MathJax重新渲染
if (window.MathJax) {
MathJax.typesetPromise && MathJax.typesetPromise();
}
} catch (e) {
const mask = document.createElement('div');
mask.id = 'error-mask';
mask.innerHTML = `<div id="error-box">${e}</div>`;
document.body.appendChild(mask);
}
}
if (type === 'highlight' && e.data.line) {
const el = document.querySelector(`[data-source-line="${e.data.line}"]`);
if (el) {
el.scrollIntoView({ behavior: 'smooth', block: 'center' });
el.setAttribute('data-source-highlight', '');
setTimeout(() => el.removeAttribute('data-source-highlight'), 1500);
}
}
});
/* 处理
LaTeX公式 */
function process
Latex() {
// 找到所有带有data-
latex属性的元素
const
latexElements = document.querySelectorAll('[data-
latex]');
latexElements.forEach(el => {
// 如果已经处理过，跳过
if (el.classList.contains('
latex-processed')) return;
// 获取
LaTeX代码
const
latexCode = el.getAttribute('data-
latex');
// 创建MathJax可识别的元素
const mathElement = document.createElement('span');
mathElement.classList.add('
latex-formula');
mathElement.textContent = `$$${
latexCode}$$`;
// 保留原始行号数据（如果有）
const line = el.getAttribute('data-source-line');
if (line) {
mathElement.setAttribute('data-source-line', line);
}
// 替换原始元素
el.parentNode.replaceChild(mathElement, el);
//
标记为已处理
mathElement.classList.add('
latex-processed');
});
}
/* 点击元素向父窗口发送行号（可选） */
document.addEventListener('click', (ev) => {
const line = ev.target.closest('[data-source-line]')?.dataset.sourceLine;
if (line) {
parent.postMessage({ type: 'preview-click', line: Number(line) }, '*');
}
});
</script>
</body>
</html>
扫一扫
1721
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
