.svg)
前情提要请看Code BBS
若您觉得这篇blog对您有帮助，不妨点个赞？谢谢
我是根据这篇帖子，改了一下代码，然后得出：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>MD 公式转换工具</title>
<style>
:root {
--primary: #6366f1;
--primary-hover: #4f46e5;
--bg: #f8fafc;
--card-bg: rgba(255, 255, 255, 0.85);
--text-primary: #1e293b;
--text-secondary: #64748b;
--border: #e2e8f0;
--shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
--glass: rgba(255, 255, 255, 0.2);
--transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
--spacing: 1.5rem;
--radius: 12px;
}
@media (prefers-color-scheme: dark) {
:root {
--bg: #0f172a;
--card-bg: rgba(15, 23, 42, 0.7);
--text-primary: #f8fafc;
--text-secondary: #94a3b8;
--border: #1e293b;
--shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.25), 0 2px 4px -1px rgba(0, 0, 0, 0.1);
--glass: rgba(15, 23, 42, 0.4);
}
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
background: var(--bg);
color: var(--text-primary);
line-height: 1.6;
padding: 0;
min-height: 100vh;
display: flex;
flex-direction: column;
background-image: radial-gradient(at 80% 0%, hsla(189, 100%, 56%, 0.1) 0px, transparent 50%),
radial-gradient(at 0% 50%, hsla(355, 100%, 93%, 0.1) 0px, transparent 50%);
}
.container {
width: 100%;
max-width: 1000px;
margin: 0 auto;
padding: var(--spacing);
flex: 1;
}
header {
text-align: center;
margin-bottom: 3rem;
padding-top: 2rem;
}
h1 {
font-size: 2.5rem;
font-weight: 700;
margin-bottom: 0.5rem;
background: linear-gradient(90deg, var(--primary), #8b5cf6);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
letter-spacing: -0.025em;
}
.subtitle {
color: var(--text-secondary);
font-size: 1.125rem;
max-width: 600px;
margin: 0 auto;
}
.tool-card {
background: var(--card-bg);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
border-radius: var(--radius);
box-shadow: var(--shadow);
padding: 2.5rem;
border: 1px solid var(--glass);
transform: translateY(20px);
opacity: 0;
animation: fadeInUp 0.6s forwards;
transition: var(--transition);
}
@keyframes fadeInUp {
to {
opacity: 1;
transform: translateY(0);
}
}
.card-header {
display: flex;
align-items: center;
margin-bottom: 1.5rem;
}
.card-icon {
width: 48px;
height: 48px;
background: linear-gradient(135deg, var(--primary), #8b5cf6);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin-right: 1rem;
box-shadow: 0 4px 6px rgba(79, 70, 229, 0.15);
}
.card-icon svg {
width: 24px;
height: 24px;
color: white;
}
.card-title {
font-size: 1.25rem;
font-weight: 600;
}
.card-description {
color: var(--text-secondary);
font-size: 0.875rem;
}
.textarea-container {
position: relative;
margin-bottom: 1.5rem;
}
.textarea-label {
display: block;
margin-bottom: 0.5rem;
font-size: 0.875rem;
font-weight: 500;
color: var(--text-primary);
}
textarea {
width: 100%;
min-height: 120px;
padding: 1rem;
border: 1px solid var(--border);
border-radius: 8px;
resize: vertical;
font-size: 0.9375rem;
transition: var(--transition);
background: var(--card-bg);
color: var(--text-primary);
box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.05);
font-family: monospace;
}
textarea:focus {
outline: none;
border-color: var(--primary);
box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.2);
}
.button-group {
display: flex;
gap: 1rem;
margin: 2rem 0;
}
button {
flex: 1;
padding: 0.875rem 1rem;
background: var(--primary);
color: white;
border: none;
border-radius: 8px;
cursor: pointer;
font-size: 0.9375rem;
font-weight: 500;
transition: var(--transition);
display: flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
}
button:hover {
background: var(--primary-hover);
transform: translateY(-2px);
box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
}
button:active {
transform: translateY(0);
}
button svg {
width: 18px;
height: 18px;
}
.stats {
display: flex;
justify-content: space-between;
font-size: 0.8125rem;
color: var(--text-secondary);
margin-bottom: 1rem;
}
.stat-item {
display: flex;
align-items: center;
gap: 0.25rem;
}
.stat-item svg {
width: 14px;
height: 14px;
}
footer {
text-align: center;
padding: 2rem 0;
color: var(--text-secondary);
font-size: 0.875rem;
margin-top: auto;
}
.katex-preview {
background: var(--card-bg);
border: 1px solid var(--border);
border-radius: 8px;
padding: 1.5rem;
min-height: 100px;
overflow-x: auto;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
font-size: 1.2em;
}
.katex-preview.error {
color: #ef4444;
border-color: #ef4444;
background: rgba(239, 68, 68, 0.05);
font-family: inherit;
justify-content: flex-start;
text-align: left;
padding: 1rem;
}
.katex-display {
margin: 0;
overflow-x: auto;
overflow-y: hidden;
}
@media (max-width: 768px) {
.container {
padding: 1rem;
}
h1 {
font-size: 2rem;
}
.tool-card {
padding: 1.5rem;
}
.button-group {
flex-direction: column;
}
}
</style>
</head>
<body>
<div class="container">
<header>
<h1>Markdown 公式转换器</h1>
<p class="subtitle">将 LaTeX 数学公式转换为兼容格式</p>
</header>
<main>
<div class="tool-card">
<div class="card-header">
<div class="card-icon">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m3.343-5.657l-.707-.707m2.828 9.9a5 5 0 117.072 0l-.548.547A3.374 3.374 0 0014 18.469V19a2 2 0 11-4 0v-.531c0-.895-.356-1.754-.988-2.386l-.548-.547z"/>
</svg>
</div>
<div>
<h2 class="card-title">公式转换器</h2>
<p class="card-description">输入 Markdown 内容，自动转换兼容格式</p>
</div>
</div>
<div class="textarea-container">
<label for="input" class="textarea-label">输入 Markdown 内容</label>
<textarea id="input" placeholder="输入标准公式格式：
行内公式: $E=mc^2$
块级公式: $$\int_a^b f(x)dx$$"></textarea>
</div>
<div class="stats">
<div class="stat-item">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6"/>
</svg>
<span id="inputStats">输入: 0 字符</span>
</div>
<div class="stat-item">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"/>
</svg>
<span id="renderStatus">准备就绪</span>
</div>
</div>
<div class="button-group">
<button id="render-button">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"/>
</svg>
渲染公式
</button>
</div>
<div class="textarea-container">
<label class="textarea-label">公式预览</label>
<div id="latex-preview" class="katex-preview">等待渲染...</div>
</div>
</div>
</main>
<footer>
<p>© <span id="current-year"></span> LaTeX 公式渲染工具 | 使用 KaTeX 引擎</p>
</footer>
</div>
<script>
// 初始化状态
let katexLoaded = false;
// 加载KaTeX资源
function loadKatex() {
if (!document.querySelector('#katex-css')) {
const link = document.createElement('link');
link.id = 'katex-css';
link.rel = 'stylesheet';
link.href = 'https://cdn.jsdelivr.net/npm/katex@0.16.9/dist/katex.min.css';
document.head.appendChild(link);
}
if (!document.querySelector('#katex-js')) {
const script = document.createElement('script');
script.id = 'katex-js';
script.src = 'https://cdn.jsdelivr.net/npm/katex@0.16.9/dist/katex.min.js';
script.onload = () => {
katexLoaded = true;
document.getElementById('render-button').disabled = false;
updateStatus('准备就绪');
};
document.head.appendChild(script);
}
}
// 更新状态显示
function updateStatus(message) {
document.getElementById('renderStatus').textContent = message;
}
// 更新字符统计
function updateStats() {
const input = document.getElementById('input');
document.getElementById('inputStats').textContent = `输入: ${input.value.length} 字符`;
}
// 严格验证公式格式
function validateFormula(formula) {
// 行内公式: 精确匹配 $...$，且不包含换行
const inlineRegex = /^\$[^$\n]+\$$/;
// 块级公式: 精确匹配 $$...$$，允许包含换行
const blockRegex = /^\$\$[\s\S]+\$\$$/;
return inlineRegex.test(formula) || blockRegex.test(formula);
}
// 渲染LaTeX公式
function renderLaTeX() {
const input = document.getElementById('input');
const preview = document.getElementById('latex-preview');
// 重置状态
preview.innerHTML = '';
preview.classList.remove('error');
updateStats();
const content = input.value.trim();
if (!content) {
preview.innerHTML = '请输入内容';
updateStatus('等待输入');
return;
}
if (!katexLoaded) {
preview.innerHTML = '正在加载数学引擎...';
updateStatus('加载中...');
return;
}
// 严格验证公式格式
if (!validateFormula(content)) {
preview.innerHTML = '请使用标准格式：\n行内公式: $...$ \n块级公式: $$...$$';
preview.classList.add('error');
updateStatus('格式错误');
return;
}
try {
const isBlock = content.startsWith('$$');
katex.render(content.slice(isBlock ? 2 : 1, isBlock ? -2 : -1), preview, {
throwOnError: true,
displayMode: isBlock
});
updateStatus(isBlock ? '块级公式渲染成功' : '行内公式渲染成功');
} catch (e) {
preview.innerHTML = `渲染错误: ${e.message}`;
preview.classList.add('error');
updateStatus('渲染失败');
}
}
// 初始化应用
document.addEventListener('DOMContentLoaded', () => {
// 设置年份
document.getElementById('current-year').textContent = new Date().getFullYear();
// 加载KaTeX
loadKatex();
// 绑定渲染按钮事件
const renderButton = document.getElementById('render-button');
renderButton.addEventListener('click', renderLaTeX);
renderButton.disabled = true;
// 初始化状态
updateStatus('正在初始化...');
// 输入时更新字符统计
document.getElementById('input').addEventListener('input', updateStats);
});
</script>
</body>
</html>
到此结束
评论区