diff --git a/Html/apps/static/js/render-desktop-markdown.js b/Html/apps/static/js/render-desktop-markdown.js new file mode 100644 index 0000000..b6a6e2e --- /dev/null +++ b/Html/apps/static/js/render-desktop-markdown.js @@ -0,0 +1,116 @@ +// 动态加载 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 = '
💡 代码已放置在代码区中,点击展开查看
'; + + // 创建展开/折叠按钮 + 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); + } +}); diff --git a/Html/apps/templates/code-like-desktop.html b/Html/apps/templates/code-like-desktop.html index 770c013..0a4793e 100644 --- a/Html/apps/templates/code-like-desktop.html +++ b/Html/apps/templates/code-like-desktop.html @@ -193,7 +193,6 @@ - // 使用 fetch 发送请求到 Flask 服务器,获取 session 信息 fetch('/get_session', { method: 'GET', @@ -230,64 +229,6 @@ } - // 动态加载 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 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() { - loadMarkdown('{{course_id}}','{{chapter_name}}','{{lesson_name}}'); - }); - - // 侧边工具栏切换 const sidebarTools = document.getElementById('sidebarTools'); const toggleButton = document.getElementById('toggleButton'); @@ -303,5 +244,7 @@ }); + +