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