117 lines
5.3 KiB
JavaScript
117 lines
5.3 KiB
JavaScript
// 动态加载 Markdown 文件
|
||
function loadMarkdown(course_id, chapter_name, lesson_name) {
|
||
fetch(`/${course_id}-${chapter_name}-${lesson_name}-markdown`)
|
||
.then(response => response.json())
|
||
.then(data => {
|
||
if (data.markdown_content) {
|
||
// 使用 marked 解析 Markdown 内容
|
||
const html = marked.parse(data.markdown_content);
|
||
|
||
// 创建包含 MathJax 支持的 HTML 结构
|
||
const markdownContainer = document.createElement('div');
|
||
markdownContainer.id = 'markdown-content-container';
|
||
markdownContainer.innerHTML = html;
|
||
|
||
// 处理代码块，实现缩略显示
|
||
const codeBlocks = markdownContainer.querySelectorAll('pre code');
|
||
codeBlocks.forEach(codeBlock => {
|
||
const preBlock = codeBlock.parentElement;
|
||
|
||
// 保存原始代码内容
|
||
const originalContent = preBlock.innerHTML;
|
||
|
||
// 创建缩略提示元素
|
||
const codeHint = document.createElement('div');
|
||
codeHint.className = 'code-hint';
|
||
codeHint.innerHTML = '<div style="padding: 10px; background-color: #f5f5f5; border: 1px solid #ddd; border-radius: 4px; color: #666; font-size: 14px; text-align: center;">💡 代码已放置在代码区中，点击展开查看</div>';
|
||
|
||
// 创建展开/折叠按钮
|
||
const toggleButton = document.createElement('button');
|
||
toggleButton.className = 'toggle-code';
|
||
toggleButton.innerHTML = '展开代码';
|
||
toggleButton.style.cssText = 'margin: 5px; padding: 5px 10px; background-color: #007bff; color: white; border: none; border-radius: 3px; cursor: pointer; font-size: 12px;';
|
||
|
||
// 添加到提示元素中
|
||
codeHint.appendChild(toggleButton);
|
||
|
||
// 替换原始代码块为提示
|
||
preBlock.innerHTML = '';
|
||
preBlock.appendChild(codeHint);
|
||
|
||
// 保存原始代码，用于切换
|
||
preBlock.dataset.originalContent = originalContent;
|
||
preBlock.dataset.isExpanded = 'false';
|
||
|
||
// 添加切换事件
|
||
toggleButton.addEventListener('click', () => {
|
||
if (preBlock.dataset.isExpanded === 'false') {
|
||
// 展开代码
|
||
preBlock.innerHTML = preBlock.dataset.originalContent;
|
||
toggleButton.innerHTML = '折叠代码';
|
||
preBlock.appendChild(toggleButton);
|
||
preBlock.dataset.isExpanded = 'true';
|
||
// 如果MathJax已加载，重新排版
|
||
if (typeof MathJax !== 'undefined') {
|
||
MathJax.typesetPromise([preBlock]);
|
||
}
|
||
} else {
|
||
// 折叠代码
|
||
preBlock.innerHTML = '';
|
||
preBlock.appendChild(codeHint.cloneNode(true));
|
||
preBlock.appendChild(toggleButton.cloneNode(true));
|
||
preBlock.dataset.isExpanded = 'false';
|
||
// 重新添加事件监听
|
||
const newToggleButton = preBlock.querySelector('.toggle-code');
|
||
newToggleButton.addEventListener('click', arguments.callee);
|
||
}
|
||
});
|
||
});
|
||
|
||
// 清空内容容器并添加渲染后的内容
|
||
const contentElement = document.getElementById('markdown-content');
|
||
contentElement.innerHTML = '';
|
||
contentElement.appendChild(markdownContainer);
|
||
|
||
// 配置并加载 MathJax
|
||
if (typeof MathJax === 'undefined') {
|
||
// 动态加载 MathJax
|
||
const script = document.createElement('script');
|
||
script.src = '/static/cdnback/js/tex-mml-chtml.js';
|
||
script.async = true;
|
||
script.onload = function() {
|
||
MathJax.config = {
|
||
tex: {
|
||
inlineMath: [['$', '$'], ['\\(', '\\)']]
|
||
},
|
||
svg: {
|
||
fontCache: 'global'
|
||
}
|
||
};
|
||
MathJax.typesetPromise([markdownContainer]);
|
||
// 初始化课程进度
|
||
next_chapter();
|
||
};
|
||
document.head.appendChild(script);
|
||
} else {
|
||
// MathJax 已加载，直接排版
|
||
MathJax.typesetPromise([markdownContainer]);
|
||
// 初始化课程进度
|
||
next_chapter();
|
||
}
|
||
} else {
|
||
console.error('Markdown file not found');
|
||
}
|
||
})
|
||
.catch(error => {
|
||
console.error('Error loading markdown:', error);
|
||
});
|
||
}
|
||
|
||
// 文档加载完成后初始化
|
||
document.addEventListener('DOMContentLoaded', function() {
|
||
// 从全局变量获取课程信息
|
||
if (window.appData) {
|
||
loadMarkdown(window.appData.course_id, window.appData.chapter_name, window.appData.lesson_name);
|
||
}
|
||
});
|