docs: update help docs

archive/2023-2024年第二学期.json

@@ -18,7 +18,7 @@
     "date": "2024-05-18T04:36:39.553Z",
     "week": 12,
     "name": "夏宇",
-    "content": "20届飘过来看看 \r\n哈哈哈哈哈"
+    "content": "20届飘过来看看\r\n\r\n哈哈哈哈哈"
   },
   {
     "_id": "66471fee854cd6380c63a283",
@@ -228,7 +228,7 @@
     "date": "2024-03-12T02:15:57.419Z",
     "week": 3,
     "name": "李锦程",
-    "content": "难得上午值班，学习学习模型的旧化以及渗线技巧。\r\n今天的天气很好，春也渐渐到来了，开心😋\r\n新学期的第一篇值班笔记，希望自己在新的学期可以拿出更好好看的模型作品吧！学业也要有长足的进步。"
+    "content": "难得上午值班，学习学习模型的旧化以及渗线技巧。\r\n\r\n今天的天气很好，春也渐渐到来了，开心😋\r\n\r\n新学期的第一篇值班笔记，希望自己在新的学期可以拿出更好好看的模型作品吧！学业也要有长足的进步。"
   },
   {
     "_id": "65eec4786f45fddc30d084f5",
@@ -256,7 +256,7 @@
     "date": "2024-03-06T08:33:19.687Z",
     "week": 2,
     "name": "刘明哲",
-    "content": "视频学习stm32和blender\r\n(最近忙于缓考，进度稍慢)"
+    "content": "视频学习stm32和blender\r\n\r\n(最近忙于缓考，进度稍慢)"
   },
   {
     "_id": "65e813006f45fddc30d084f1",

docs/help.md

@@ -2,10 +2,16 @@
 
 本文档旨在于让你使用 [Markdown](https://www.markdownguide.org) 语法写出漂亮的值班笔记。
 
-如果你是一名技术人员，应该对 Markdown 语法并不陌生，如果你是一名新手，也不用担心，值班无聊的时候可以多尝试写写，很快就能上手。
+如果你是一名开发人员，应该对 **Markdown** 语法并不陌生，如果你是一名新手，也不用担心，值班无聊的时候可以多尝试写写，很快就能上手。
 
 本文档即是使用 Markdown 书写，相信你学习完也可以写出一篇漂亮的值班笔记。
 
+> **切记** ✨
+>
+> 如果你不熟悉 Markdown，那么写值班笔记的时候，换行必须要按两次 `回车` 键或 `换行` 键，否则文本会显示在同一行。
+>
+> 你可以点击编辑器中的预览按钮，查看你的文本渲染是否正确。
+
 ---
 
 ## 一、基础认知
@@ -78,7 +84,6 @@ Markdown 是一种轻量级**标记语言**，使用一些简单的标记符号
 >
 > - 值班笔记的字数上限是 **1000** 个字符，因此多多发挥你的创意吧！
 > - 同时，网站会**自动保存**你编辑的内容，不用担心关闭浏览器导致内容丢失。
-> - 在 Markdown 中，使用两个及以上的**回车**才可以实现**换行**效果，即段落之间要有一个空行这是新手需要注意的地方。
 
 ---
 

package.json

@@ -16,16 +16,16 @@
     "@codemirror/lang-markdown": "^6.3.0",
     "@codemirror/language-data": "^6.5.1",
     "@codemirror/view": "^6.34.1",
-    "@types/node": "^22.7.9",
+    "@types/node": "^22.8.0",
     "@types/react": "^18.3.12",
     "@types/react-dom": "^18.3.1",
-    "@uiw/codemirror-theme-vscode": "^4.23.5",
-    "@uiw/react-codemirror": "^4.23.5",
+    "@uiw/codemirror-theme-vscode": "^4.23.6",
+    "@uiw/react-codemirror": "^4.23.6",
     "autoprefixer": "^10.4.20",
     "chart.js": "^4.4.5",
     "chartjs-plugin-datalabels": "^2.2.0",
     "clsx": "^2.1.1",
-    "framer-motion": "^11.11.9",
+    "framer-motion": "^11.11.10",
     "postcss": "^8.4.47",
     "prettier": "^3.3.3",
     "react": "^18.3.1",

src/components/MarkdownRenderer/MarkdownRenderer.tsx

@@ -16,7 +16,7 @@ export default function MarkdownRenderer({ content, className }: { content: stri
     <Markdown
       remarkPlugins={[remarkGfm]}
       components={{ a: Anchor }}
-      rehypePlugins={[[rehypePrism, { showLineNumbers: true, ignoreMissing: true }]]}
+      rehypePlugins={[[rehypePrism, { ignoreMissing: true }]]}
       className={clsx("markdown", className)}
     >
       {content}

src/components/MarkdownRenderer/styles/markdown.css

@@ -11,27 +11,27 @@
 }
 
 .markdown :is(h1, h2, h3, h4, h5, h6) {
-  @apply font-bold mt-4 text-gray-800;
+  @apply font-bold mt-3 text-gray-800;
 }
 
 .markdown ul {
-  @apply mt-4;
+  @apply mt-3;
 }
 
 .markdown li {
   @apply my-0.5 list-disc list-inside;
 }
 
 .markdown p {
-  @apply mt-4 text-gray-700;
+  @apply mt-3 text-gray-700;
 }
 
 .markdown a {
   @apply text-blue-600 underline;
 }
 
 .markdown table {
-  @apply text-gray-800 mt-4 rounded-xl outline outline-1 outline-gray-400;
+  @apply text-gray-800 mt-3 rounded-xl outline outline-1 outline-gray-400;
 }
 
 .markdown table tbody tr {
@@ -46,22 +46,22 @@
   @apply border-r border-gray-400;
 }
 
-.markdown pre[class*="language-"] {
-  @apply mt-4;
+.markdown pre:has(.code-highlight) {
+  @apply mt-3;
 }
 
 .markdown blockquote {
-  @apply mt-4 border-l-4 border-l-blue-600 pl-5 py-2 rounded-xl bg-black/5;
+  @apply mt-3 border-l-4 border-l-blue-600 pl-5 py-2 rounded-xl bg-black/5;
 }
 
 .markdown hr {
-  @apply border-b border-b-gray-400 mt-4;
+  @apply border-b border-b-gray-400 mt-3;
 }
 
 .markdown code:not([class]) {
-  @apply mx-0.5 px-1 py-0.5 bg-black/10 rounded-sm text-sm;
+  @apply mx-0.5 px-1 py-0.5 bg-black/10 rounded-sm text-sm text-black;
 }
 
 .markdown img {
-  @apply min-h-10 w-full max-w-6xl rounded-xl mx-auto mt-4 border border-gray-300 shadow-sm;
+  @apply min-h-10 w-full max-w-6xl rounded-xl mx-auto mt-3 border border-gray-300 shadow-sm;
 }