Skip to content

Commit d652346

Browse files
yulin0629yulin0629
committed
feat: 實現 Markdown 教學內容的美觀呈現
- 使用 marked.js 在前端動態渲染 Markdown - 創建 Modal 彈窗顯示教學內容 - 美化 Markdown 渲染樣式（標題、程式碼、表格等） - 支援 ESC 鍵和點擊外部關閉 - 所有教學內容都在同一頁面內查看，無需跳轉
1 parent c555d8a commit d652346

1 file changed

Lines changed: 211 additions & 8 deletions

File tree

‎index.html‎

Lines changed: 211 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -208,6 +208,139 @@
208208
}
209209
}
210210
</style>
211+
<script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
212+
<style>
213+
/* Markdown 內容樣式 */
214+
.markdown-modal {
215+
display: none;
216+
position: fixed;
217+
top: 0;
218+
left: 0;
219+
width: 100%;
220+
height: 100%;
221+
background: rgba(0, 0, 0, 0.8);
222+
z-index: 1000;
223+
overflow: auto;
224+
}
225+
226+
.markdown-content {
227+
background: white;
228+
margin: 50px auto;
229+
padding: 40px;
230+
width: 90%;
231+
max-width: 900px;
232+
border-radius: 10px;
233+
position: relative;
234+
max-height: 90vh;
235+
overflow-y: auto;
236+
}
237+
238+
.markdown-close {
239+
position: absolute;
240+
top: 15px;
241+
right: 20px;
242+
font-size: 30px;
243+
cursor: pointer;
244+
color: #666;
245+
transition: color 0.3s;
246+
}
247+
248+
.markdown-close:hover {
249+
color: #000;
250+
}
251+
252+
/* Markdown 渲染樣式 */
253+
.markdown-content h1 {
254+
color: #333;
255+
border-bottom: 2px solid #667eea;
256+
padding-bottom: 10px;
257+
margin-bottom: 20px;
258+
}
259+
260+
.markdown-content h2 {
261+
color: #444;
262+
margin-top: 30px;
263+
margin-bottom: 15px;
264+
}
265+
266+
.markdown-content h3 {
267+
color: #555;
268+
margin-top: 20px;
269+
margin-bottom: 10px;
270+
}
271+
272+
.markdown-content code {
273+
background: #f4f4f4;
274+
padding: 2px 4px;
275+
border-radius: 3px;
276+
font-family: 'Consolas', 'Monaco', monospace;
277+
}
278+
279+
.markdown-content pre {
280+
background: #f8f8f8;
281+
border: 1px solid #ddd;
282+
border-radius: 5px;
283+
padding: 15px;
284+
overflow-x: auto;
285+
margin: 15px 0;
286+
}
287+
288+
.markdown-content pre code {
289+
background: none;
290+
padding: 0;
291+
}
292+
293+
.markdown-content blockquote {
294+
border-left: 4px solid #667eea;
295+
padding-left: 20px;
296+
margin-left: 0;
297+
color: #666;
298+
font-style: italic;
299+
}
300+
301+
.markdown-content ul, .markdown-content ol {
302+
margin-left: 20px;
303+
margin-bottom: 15px;
304+
}
305+
306+
.markdown-content li {
307+
margin-bottom: 5px;
308+
line-height: 1.6;
309+
}
310+
311+
.markdown-content table {
312+
border-collapse: collapse;
313+
width: 100%;
314+
margin: 15px 0;
315+
}
316+
317+
.markdown-content th, .markdown-content td {
318+
border: 1px solid #ddd;
319+
padding: 8px;
320+
text-align: left;
321+
}
322+
323+
.markdown-content th {
324+
background: #f4f4f4;
325+
font-weight: bold;
326+
}
327+
328+
.markdown-content strong {
329+
color: #333;
330+
font-weight: 600;
331+
}
332+
333+
.markdown-content em {
334+
color: #667eea;
335+
font-style: italic;
336+
}
337+
338+
.markdown-loading {
339+
text-align: center;
340+
padding: 50px;
341+
color: #666;
342+
}
343+
</style>
211344
</head>
212345
<body>
213346
<div class="container">
@@ -254,7 +387,7 @@ <h2>📚 8 個學習場景</h2>
254387
<div class="scenario-description">建立 Copilot 使用基礎，體驗傳統 Chat 功能</div>
255388
<span class="agent-indicator agent-0">Agent 0%</span>
256389
<div class="scenario-links">
257-
<a href="./01-first-experience/README.md" class="btn btn-doc">📚 查看教學</a>
390+
<a href="#" onclick="loadMarkdown('./01-first-experience/README.md', '場景 1：初次對話體驗'); return false;" class="btn btn-doc">📚 查看教學</a>
258391
<a href="./01-first-experience/" class="btn btn-demo">🎯 實際應用</a>
259392
</div>
260393
</div>
@@ -265,7 +398,7 @@ <h2>📚 8 個學習場景</h2>
265398
<div class="scenario-description">掌握 @workspace 核心功能，理解專案結構</div>
266399
<span class="agent-indicator agent-0">Agent 0%</span>
267400
<div class="scenario-links">
268-
<a href="./02-code-explanation/README.md" class="btn btn-doc">📚 查看教學</a>
401+
<a href="#" onclick="loadMarkdown('./02-code-explanation/README.md', '場景 2：程式碼解釋實作'); return false;" class="btn btn-doc">📚 查看教學</a>
269402
<a href="./02-code-explanation/" class="btn btn-demo">🎯 實際應用</a>
270403
</div>
271404
</div>
@@ -276,7 +409,7 @@ <h2>📚 8 個學習場景</h2>
276409
<div class="scenario-description">體驗 Agent 協助編程，對比手動 vs AI 效率</div>
277410
<span class="agent-indicator agent-20">Agent 20%</span>
278411
<div class="scenario-links">
279-
<a href="./03-function-generation/README.md" class="btn btn-doc">📚 查看教學</a>
412+
<a href="#" onclick="loadMarkdown('./03-function-generation/README.md', '場景 3：函數生成'); return false;" class="btn btn-doc">📚 查看教學</a>
280413
<a href="./03-function-generation/" class="btn btn-demo">🎯 實際應用</a>
281414
</div>
282415
</div>
@@ -287,7 +420,7 @@ <h2>📚 8 個學習場景</h2>
287420
<div class="scenario-description">讓 Agent 主動發現和修復程式問題</div>
288421
<span class="agent-indicator agent-30">Agent 30%</span>
289422
<div class="scenario-links">
290-
<a href="./04-debugging-assistant/README.md" class="btn btn-doc">📚 查看教學</a>
423+
<a href="#" onclick="loadMarkdown('./04-debugging-assistant/README.md', '場景 4：偵錯輔助'); return false;" class="btn btn-doc">📚 查看教學</a>
291424
<a href="./04-debugging-assistant/" class="btn btn-demo">🎯 實際應用</a>
292425
</div>
293426
</div>
@@ -298,7 +431,7 @@ <h2>📚 8 個學習場景</h2>
298431
<div class="scenario-description">Agent 自主設計測試架構和完整用例</div>
299432
<span class="agent-indicator agent-50">Agent 50%</span>
300433
<div class="scenario-links">
301-
<a href="./05-unit-testing/README.md" class="btn btn-doc">📚 查看教學</a>
434+
<a href="#" onclick="loadMarkdown('./05-unit-testing/README.md', '場景 5：單元測試'); return false;" class="btn btn-doc">📚 查看教學</a>
302435
<a href="./05-unit-testing/" class="btn btn-demo">🎯 實際應用</a>
303436
</div>
304437
</div>
@@ -309,7 +442,7 @@ <h2>📚 8 個學習場景</h2>
309442
<div class="scenario-description">Agent 分析遺留代碼並執行重構策略</div>
310443
<span class="agent-indicator agent-60">Agent 60%</span>
311444
<div class="scenario-links">
312-
<a href="./06-code-refactoring/README.md" class="btn btn-doc">📚 查看教學</a>
445+
<a href="#" onclick="loadMarkdown('./06-code-refactoring/README.md', '場景 6：程式碼重構'); return false;" class="btn btn-doc">📚 查看教學</a>
313446
<a href="./06-code-refactoring/" class="btn btn-demo">🎯 實際應用</a>
314447
</div>
315448
</div>
@@ -320,7 +453,7 @@ <h2>📚 8 個學習場景</h2>
320453
<div class="scenario-description">Agent 自動分析程式碼生成完整文件體系</div>
321454
<span class="agent-indicator agent-80">Agent 80%</span>
322455
<div class="scenario-links">
323-
<a href="./07-documentation/README.md" class="btn btn-doc">📚 查看教學</a>
456+
<a href="#" onclick="loadMarkdown('./07-documentation/README.md', '場景 7：文件生成'); return false;" class="btn btn-doc">📚 查看教學</a>
324457
<a href="./07-documentation/" class="btn btn-demo">🎯 實際應用</a>
325458
</div>
326459
</div>
@@ -331,7 +464,7 @@ <h2>📚 8 個學習場景</h2>
331464
<div class="scenario-description">Agent 完全主導端到端開發流程</div>
332465
<span class="agent-indicator agent-90">Agent 90%</span>
333466
<div class="scenario-links">
334-
<a href="./08-comprehensive-project/README.md" class="btn btn-doc">📚 查看教學</a>
467+
<a href="#" onclick="loadMarkdown('./08-comprehensive-project/README.md', '場景 8：綜合專案開發'); return false;" class="btn btn-doc">📚 查看教學</a>
335468
<a href="./08-comprehensive-project/" class="btn btn-demo">🎯 實際應用</a>
336469
</div>
337470
</div>
@@ -343,5 +476,75 @@ <h2>📚 8 個學習場景</h2>
343476
<p>🎯 預期成果：完成課程後提升 30-50% 開發效率，建立團隊級 AI 輔助開發流程</p>
344477
</div>
345478
</div>
479+
480+
<!-- Markdown Modal -->
481+
<div id="markdownModal" class="markdown-modal">
482+
<div class="markdown-content">
483+
<span class="markdown-close" onclick="closeMarkdown()">&times;</span>
484+
<div id="markdownBody">
485+
<div class="markdown-loading">📡 載入中...</div>
486+
</div>
487+
</div>
488+
</div>
489+
490+
<script>
491+
// 載入並顯示 Markdown
492+
async function loadMarkdown(path, title) {
493+
const modal = document.getElementById('markdownModal');
494+
const body = document.getElementById('markdownBody');
495+
496+
// 顯示 Modal
497+
modal.style.display = 'block';
498+
body.innerHTML = '<div class="markdown-loading">📡 載入中...</div>';
499+
500+
try {
501+
// Fetch Markdown 檔案
502+
const response = await fetch(path);
503+
if (!response.ok) {
504+
throw new Error('無法載入文件');
505+
}
506+
507+
const markdown = await response.text();
508+
509+
// 使用 marked.js 轉換 Markdown 為 HTML
510+
const html = marked.parse(markdown);
511+
512+
// 顯示內容
513+
body.innerHTML = html;
514+
515+
// 滾動到頂部
516+
body.parentElement.scrollTop = 0;
517+
518+
} catch (error) {
519+
body.innerHTML = `
520+
<div style="text-align: center; padding: 50px; color: #f00;">
521+
<h2>❌ 載入失敗</h2>
522+
<p>無法載入教學內容</p>
523+
<p style="color: #666; font-size: 0.9rem;">${error.message}</p>
524+
</div>
525+
`;
526+
}
527+
}
528+
529+
// 關閉 Markdown Modal
530+
function closeMarkdown() {
531+
document.getElementById('markdownModal').style.display = 'none';
532+
}
533+
534+
// 點擊 Modal 外部關閉
535+
window.onclick = function(event) {
536+
const modal = document.getElementById('markdownModal');
537+
if (event.target == modal) {
538+
closeMarkdown();
539+
}
540+
}
541+
542+
// ESC 鍵關閉
543+
document.addEventListener('keydown', function(event) {
544+
if (event.key === 'Escape') {
545+
closeMarkdown();
546+
}
547+
});
548+
</script>
346549
</body>
347550
</html>

0 commit comments

Comments
 (0)