use markdown to edit

Html/apps/static/css/lesson.css

@@ -125,7 +125,7 @@
   .tab-btn.active { background:#f0f8ff; border-color:#a0c4ff; }
   .actions { margin-left:auto; }
   .actions button { padding:6px 12px; border:none; border-radius:8px; background:#4CAF50; color:#fff; cursor:pointer; }
-  .tab-content { flex:1; padding:8px; }
+  .tab-content { flex:1; padding:8px;display: flex; }
   .tab { display:none; height:100%; }
   .tab.active { display:block; height:100%; }
   textarea {

Html/apps/static/css/lesson_markdown.css

@@ -0,0 +1,56 @@
+/* 左右分栏：左=编辑，右=预览 */
+  .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;
+  }
+  .md-preview-pane h1, .md-preview-pane h2, .md-preview-pane h3 {
+    border-bottom: 1px solid #f1f5f9;
+    padding-bottom: .3em;
+    margin-top: 1.2em;
+  }
+  .md-preview-pane img {
+    max-width: 100%;
+    height: auto;
+  }
+  /* 只影响右侧 Markdown 预览里的表格 */
+.md-preview-pane .table {
+  /* 如果你想完全摆脱 bootstrap.table 的影响 */
+  all: revert;         /* 或者 all: unset; 视需求选择 */
+  display: table;
+  border-collapse: collapse;
+  /* 下面写你自己的表格样式 */
+  border: 1px solid #e5e7eb;
+}
+
+.md-preview-pane .table th,
+.md-preview-pane .table td {
+  border: 1px solid #e5e7eb;
+  padding: 8px 10px;
+}
+
+.md-preview-pane .table thead th {
+  background: #f8fafc;
+  font-weight: 600;
+}