@@ -247,14 +247,27 @@ const _show = computed({
247247</template >
248248
249249<style >
250+ /* 更贴近 GitHub 的 markdown 展示样式(不引入新依赖,仅调整样式)
251+ * 合并策略:颜色/背景走 upstream 的 var(--v-theme-*) token;保留本地布局增强(word-wrap、首尾 margin、task list、表格横向滚动)
252+ */
250253.markdown-body {
251254 font-family : -apple-system , BlinkMacSystemFont, " Segoe UI" , Helvetica , Arial ,
252255 sans-serif ;
256+ font-size : 16px ;
253257 line-height : 1.6 ;
258+ word-wrap : break-word ;
254259 padding : 8px 0 ;
255260 color : var (--v-theme-secondaryText );
256261}
257262
263+ .markdown-body > :first-child {
264+ margin-top : 0 ;
265+ }
266+
267+ .markdown-body > :last-child {
268+ margin-bottom : 0 ;
269+ }
270+
258271.markdown-body h1 ,
259272.markdown-body h2 ,
260273.markdown-body h3 ,
@@ -279,17 +292,66 @@ const _show = computed({
279292 padding-bottom : 0.3em ;
280293}
281294
295+ .markdown-body h3 {
296+ font-size : 1.25em ;
297+ }
298+
282299.markdown-body p {
283300 margin-top : 0 ;
284301 margin-bottom : 16px ;
285302}
286303
304+ .markdown-body hr {
305+ height : 0.25em ;
306+ padding : 0 ;
307+ margin : 24px 0 ;
308+ background-color : var (--v-theme-containerBg );
309+ border : 0 ;
310+ }
311+
312+ .markdown-body a {
313+ color : var (--v-theme-primary );
314+ text-decoration : none ;
315+ }
316+
317+ .markdown-body a :hover {
318+ text-decoration : underline ;
319+ }
320+
321+ /* Lists */
322+ .markdown-body ul ,
323+ .markdown-body ol {
324+ padding-left : 2em ;
325+ margin-top : 0 ;
326+ margin-bottom : 16px ;
327+ }
328+
329+ .markdown-body li + li {
330+ margin-top : 0.25em ;
331+ }
332+
333+ .markdown-body li > p {
334+ margin-top : 0 ;
335+ }
336+
337+ /* Task list */
338+ .markdown-body .task-list-item {
339+ list-style-type : none ;
340+ }
341+
342+ .markdown-body .task-list-item input [type = " checkbox" ] {
343+ margin : 0 0.35em 0 0 ;
344+ vertical-align : middle ;
345+ }
346+
347+ /* Code */
287348.markdown-body code {
288349 padding : 0.2em 0.4em ;
289350 margin : 0 ;
290351 background-color : var (--v-theme-codeBg );
291- border-radius : 3px ;
292- font-family : " SFMono-Regular" , Consolas, " Liberation Mono" , Menlo, monospace ;
352+ border-radius : 6px ;
353+ font-family : ui-monospace , SFMono-Regular, Consolas, " Liberation Mono" , Menlo,
354+ monospace ;
293355 font-size : 85% ;
294356}
295357
@@ -299,57 +361,53 @@ const _show = computed({
299361 font-size : 85% ;
300362 line-height : 1.45 ;
301363 background-color : var (--v-theme-containerBg );
302- border-radius : 3px ;
303- margin-bottom : 16px ;
364+ border : 1px solid var (--v-theme-border );
365+ border-radius : 6px ;
366+ margin : 0 0 16px ;
304367}
305368
306369.markdown-body pre code {
307370 background-color : transparent ;
308371 padding : 0 ;
309372}
310373
311- .markdown-body ul ,
312- .markdown-body ol {
313- padding-left : 2em ;
314- margin-bottom : 16px ;
315- }
316-
317- .markdown-body img {
318- max-width : 100% ;
319- margin : 8px 0 ;
320- box-sizing : border-box ;
321- background-color : var (--v-theme-background );
322- border-radius : 3px ;
323- }
324-
374+ /* Blockquote */
325375.markdown-body blockquote {
326376 padding : 0 1em ;
327377 color : var (--v-theme-secondaryText );
328378 border-left : 0.25em solid var (--v-theme-border );
329- margin-bottom : 16px ;
330- }
331-
332- .markdown-body a {
333- color : var (--v-theme-primary );
334- text-decoration : none ;
379+ margin : 0 0 16px ;
335380}
336381
337- .markdown-body a :hover {
338- text-decoration : underline ;
382+ /* Images */
383+ .markdown-body img {
384+ max-width : 100% ;
385+ height : auto ;
386+ margin : 0.5em 0 ;
387+ box-sizing : border-box ;
388+ background-color : var (--v-theme-background );
389+ border-radius : 6px ;
339390}
340391
392+ /* Tables (GitHub-like + 横向滚动) */
341393.markdown-body table {
342394 border-spacing : 0 ;
343395 border-collapse : collapse ;
344- width : 100% ;
345- overflow : auto ;
346- margin-bottom : 16px ;
396+ width : max-content ;
397+ min-width : 100% ;
398+ display : block ;
399+ overflow-x : auto ;
400+ margin : 0 0 16px ;
347401}
348402
349403.markdown-body table th ,
350404.markdown-body table td {
351405 padding : 6px 13px ;
352- border : 1px solid var (--v-theme-background );
406+ border : 1px solid var (--v-theme-border );
407+ }
408+
409+ .markdown-body table th {
410+ font-weight : 600 ;
353411}
354412
355413.markdown-body table tr {
@@ -358,15 +416,7 @@ const _show = computed({
358416}
359417
360418.markdown-body table tr :nth-child (2n ) {
361- background-color : var (--v-theme-background );
362- }
363-
364- .markdown-body hr {
365- height : 0.25em ;
366- padding : 0 ;
367- margin : 24px 0 ;
368419 background-color : var (--v-theme-containerBg );
369- border : 0 ;
370420}
371421 </style >
372422
0 commit comments