<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Prism.js HTML 中 JavaScript 代码高亮演示</title>
<!-- Prism.js CSS 主题 -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/themes/prism-tomorrow.min.css" rel="stylesheet" />
<style>
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
max-width: 1200px;
margin: 0 auto;
padding: 20px;
background-color: #f5f5f5;
}
h1 {
color: #333;
border-bottom: 3px solid #5a67d8;
padding-bottom: 10px;
}
.demo-section {
background: white;
padding: 20px;
margin: 20px 0;
border-radius: 8px;
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}
.demo-section h2 {
color: #5a67d8;
margin-top: 0;
}
.description {
color: #666;
margin-bottom: 15px;
line-height: 1.6;
}
pre[class*="language-"] {
border-radius: 6px;
margin: 10px 0;
}
.highlight-info {
background: #e3f2fd;
padding: 10px;
border-left: 4px solid #2196f3;
margin: 10px 0;
border-radius: 4px;
}
</style>
</head>
<body>
<h1>🎨 Prism.js - HTML 中 JavaScript 代码高亮演示</h1>
<div class="highlight-info">
<strong>✨ 功能说明：</strong> Prism.js 可以智能识别并高亮 HTML 中嵌入的 JavaScript 代码，包括 <script> 标签中的 JS、事件处理器中的 JS，以及 HTML 属性中的 JS 代码。
</div>
<!-- 演示 1：基本的 HTML 中包含 JavaScript -->
<div class="demo-section">
<h2>1️⃣ HTML 中的 <script> 标签</h2>
<p class="description">这是最常见的场景：在 HTML 文档中包含 <script> 标签，Prism.js 会自动识别并高亮其中的 JavaScript 代码。</p>
<pre><code class="language-markup"><!DOCTYPE html>
<html>
<head>
<title>示例页面</title>
<script>
// JavaScript 代码会被正确高亮
function greet(name) {
console.log(`Hello, ${name}!`);
return `Welcome, ${name}`;
}
const users = ['Alice', 'Bob', 'Charlie'];
users.forEach(user => greet(user));
// ES6+ 特性
const asyncFunction = async () => {
const response = await fetch('/api/data');
const data = await response.json();
return data;
};
</script>
</head>
<body>
<h1>Hello World</h1>
</body>
</html></code></pre>
</div>
<!-- 演示 2：内联事件处理器 -->
<div class="demo-section">
<h2>2️⃣ HTML 事件处理器中的 JavaScript</h2>
<p class="description">Prism.js 也能高亮 HTML 元素属性中的 JavaScript 代码，比如 onclick、onload 等事件处理器。</p>
<pre><code class="language-markup"><button onclick="alert('按钮被点击了！')">点击我</button>
<div onclick="
const now = new Date();
console.log('当前时间:', now.toLocaleString());
this.style.backgroundColor = '#' + Math.floor(Math.random()*16777215).toString(16);
">
点击改变背景色
</div>
<form onsubmit="
event.preventDefault();
const formData = new FormData(event.target);
console.log('表单数据:', Object.fromEntries(formData));
return false;
">
<input type="text" name="username" />
<button type="submit">提交</button>
</form></code></pre>
</div>
<!-- 演示 3：复杂的混合代码 -->
<div class="demo-section">
<h2>3️⃣ 复杂的 HTML + JavaScript 混合</h2>
<p class="description">在实际开发中，HTML 文档通常包含多个 <script> 标签、内联样式和事件处理器，Prism.js 都能正确处理。</p>
<pre><code class="language-markup"><!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<style>
.card {
padding: 20px;
border-radius: 8px;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}
</style>
<script>
class TodoApp {
constructor() {
this.todos = [];
this.init();
}
init() {
document.addEventListener('DOMContentLoaded', () => {
this.loadTodos();
this.bindEvents();
});
}
async loadTodos() {
try {
const response = await fetch('/api/todos');
this.todos = await response.json();
this.render();
} catch (error) {
console.error('加载失败:', error);
}
}
addTodo(text) {
const todo = {
id: Date.now(),
text: text,
completed: false,
createdAt: new Date().toISOString()
};
this.todos.push(todo);
this.render();
}
render() {
const list = document.getElementById('todo-list');
list.innerHTML = this.todos
.map(todo => `
<li class="${todo.completed ? 'completed' : ''}">
${todo.text}
</li>
`)
.join('');
}
}
const app = new TodoApp();
</script>
</head>
<body>
<div class="card">
<h1>待办事项</h1>
<input
type="text"
id="todo-input"
onkeypress="if(event.key === 'Enter') app.addTodo(this.value)"
/>
<ul id="todo-list"></ul>
</div>
</body>
</html></code></pre>
</div>
<!-- 演示 4：仅显示 JavaScript 代码 -->
<div class="demo-section">
<h2>4️⃣ 纯 JavaScript 代码高亮对比</h2>
<p class="description">作为对比，这里是纯 JavaScript 代码的高亮效果（不包含 HTML）。</p>
<pre><code class="language-javascript">// React 组件示例
import React, { useState, useEffect } from 'react';
const Counter = () => {
const [count, setCount] = useState(0);
const [history, setHistory] = useState([]);
useEffect(() => {
console.log('Count changed:', count);
setHistory(prev => [...prev, count]);
}, [count]);
const increment = () => setCount(prev => prev + 1);
const decrement = () => setCount(prev => prev - 1);
const reset = () => {
setCount(0);
setHistory([]);
};
return (
<div className="counter">
<h2>当前计数: {count}</h2>
<button onClick={increment}>+1</button>
<button onClick={decrement}>-1</button>
<button onClick={reset}>重置</button>
<div>
<h3>历史记录:</h3>
<ul>
{history.map((value, index) => (
<li key={index}>{value}</li>
))}
</ul>
</div>
</div>
);
};
export default Counter;</code></pre>
</div>
<!-- 演示 5：CSS 中的代码 -->
<div class="demo-section">
<h2>5️⃣ HTML 中的 CSS 代码</h2>
<p class="description">Prism.js 同样支持高亮 <style> 标签中的 CSS 代码。</p>
<pre><code class="language-markup"><style>
/* CSS 代码也会被正确高亮 */
.container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 20px;
padding: 20px;
}
.card {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
border-radius: 12px;
padding: 24px;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.card:hover {
transform: translateY(-5px);
box-shadow: 0 15px 40px rgba(0, 0, 0, 0.3);
}
@media (max-width: 768px) {
.container {
grid-template-columns: 1fr;
}
}
</style></code></pre>
</div>
<!-- 技术说明 -->
<div class="demo-section">
<h2>📚 技术说明</h2>
<div class="description">
<h3>如何实现 HTML 中 JavaScript 的高亮：</h3>
<ul>
<li><strong>使用 <code>language-markup</code> 或 <code>language-html</code></strong>：这会自动启用嵌入式语言支持</li>
<li><strong>引入必要的插件</strong>：Prism.js 会自动检测 HTML 中的 <script> 和 <style> 标签</li>
<li><strong>支持的嵌入场景</strong>：
<ul>
<li><script> 标签中的 JavaScript</li>
<li><style> 标签中的 CSS</li>
<li>HTML 属性中的内联 JavaScript（如 onclick）</li>
<li>style 属性中的内联 CSS</li>
</ul>
</li>
</ul>
<h3>需要的 CDN 资源：</h3>
<pre><code class="language-markup"><!-- CSS 主题 -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/themes/prism-tomorrow.min.css" rel="stylesheet" />
<!-- 核心 JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/prism.min.js"></script>
<!-- 标记语言支持（HTML） -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/components/prism-markup.min.js"></script>
<!-- JavaScript 支持 -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/components/prism-javascript.min.js"></script>
<!-- CSS 支持 -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/components/prism-css.min.js"></script></code></pre>
</div>
</div>
<!-- Prism.js 核心库和组件 -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/prism.min.js"></script>
<!-- 标记语言（HTML）支持 - 这是关键！ -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/components/prism-markup.min.js"></script>
<!-- JavaScript 语言支持 -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/components/prism-javascript.min.js"></script>
<!-- CSS 语言支持 -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/components/prism-css.min.js"></script>
<script>
// 页面加载完成后重新高亮所有代码块
document.addEventListener('DOMContentLoaded', () => {
Prism.highlightAll();
console.log('✅ Prism.js 已加载并完成代码高亮！');
});
</script>
</body>
</html>
