优化前端js代码

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 = '<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);
+    }
+});

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 @@
         });
 
     </script>
+    <!-- 引入 Markdown 渲染脚本 -->
+    <script src="/static/js/render-desktop-markdown.js"></script>
 </body>
 </html>