cdn change to local and use markdown and style change

Html/apps/static/css/lesson_markdown.css

@@ -1,30 +1,37 @@
-/* 左右分栏：左=编辑，右=预览 */
-  .editor-pane {
-    grid-template-columns: 1fr 1fr; /* 左右各一半 */
-    gap: 12px;
-    align-items: start;
-  }
-  /* 兼容你页面现有布局：让编辑区域（左半）占满左侧 */
-  .tab-content {
-    height: calc(100vh - 220px); /* 视口高度自适应，按需调整 */
-    overflow: hidden; /* 内部由 EasyMDE 自己滚动 */
-    display: flex;
-  }
-  .tab {
-    height: 100%;
-  }
-  .tab textarea {
-    height: 100%;
-  }
-  /* 右侧预览 */
-  .md-preview-pane {
-    border: 1px solid #e5e7eb;
-    border-radius: 8px;
-    padding: 16px;
-    background: #fff;
-    height: calc(100vh - 220px);
-    overflow: auto;
-  }
+/* 让左侧编辑区真正占满并允许内部滚动 */
+.tab-content {
+  height: calc(100vh - 220px);
+  /* 不要隐藏滚动：*/
+  overflow: visible;  /* 或者干脆删掉 overflow 这行 */
+}
+
+/* EasyMDE 容器按列铺开，编辑器本体撑满剩余空间 */
+.EasyMDEContainer {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+}
+
+/* 关键：让 CodeMirror 吃满容器高度 */
+.EasyMDEContainer .CodeMirror {
+  height: 100% !important;
+}
+
+/* 关键：滚动发生在 CodeMirror-scroll 里 */
+.EasyMDEContainer .CodeMirror-scroll {
+  height: 100% !important;
+  overflow: auto !important;   /* 启用内部滚动条（也支持鼠标滚轮） */
+}
+
+/* 右侧预览保持原样独立滚动 */
+.md-preview-pane {
+  border: 1px solid #e5e7eb;
+  border-radius: 8px;
+  padding: 16px;
+  background: #fff;
+  height: calc(100vh - 220px);
+  overflow: auto;
+}
   .md-preview-pane h1, .md-preview-pane h2, .md-preview-pane h3 {
     border-bottom: 1px solid #f1f5f9;
     padding-bottom: .3em;

Html/apps/static/css/teacherboard.css

@@ -13,7 +13,39 @@
     font-size: 32px;
     margin-bottom: 20px;
 }
+#chapter-list {
+  /* 设置固定高度，超出范围将出现滚动 */
+  max-height: 75vh;
+  /* 超出高度时显示垂直滚动条 */
+  overflow-y: auto;
+  
+  /* 隐藏水平滚动条（如果不需要） */
+  overflow-x: hidden;
+  
+  /* 可选：添加一些内边距和边框增强视觉效果 */
+  padding: 10px;
+  border: 1px solid #e0e0e0;
+  border-radius: 4px;
+}
 
+/* 可选：美化滚动条样式（仅WebKit浏览器有效） */
+#chapter-list::-webkit-scrollbar {
+  width: 6px; /* 滚动条宽度 */
+}
+
+#chapter-list::-webkit-scrollbar-track {
+  background: #f1f1f1; /* 滚动条轨道背景 */
+  border-radius: 3px;
+}
+
+#chapter-list::-webkit-scrollbar-thumb {
+  background: #c1c1c1; /* 滚动条滑块颜色 */
+  border-radius: 3px;
+}
+
+#chapter-list::-webkit-scrollbar-thumb:hover {
+  background: #a8a8a8; /* 鼠标悬停时的滑块颜色 */
+}
 .course-cards {
     display: flex;
     flex-wrap: wrap;