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;