From f17cbb0aa98d4d1fe3631eb3a1fbbe9a10e2fa80 Mon Sep 17 00:00:00 2001 From: npmrun <1549469775@qq.com> Date: Tue, 21 Apr 2026 15:41:02 +0800 Subject: [PATCH] style(markdown): update styles for markdown components and improve code block presentation - Changed markdown background to transparent for better integration with surrounding elements. - Enhanced the appearance of markdown code blocks with rounded corners, padding, and box shadows for improved readability. - Updated font family for code elements to ensure consistency and better aesthetics. - Commented out submit buttons in post creation and editing forms for future implementation. These changes refine the visual presentation of markdown content and prepare the UI for upcoming features. --- app/assets/scss/markdown/green.scss | 44 +++++++++++++++++++++++++++++++----- app/pages/me/posts/[id].vue | 4 ++-- app/pages/me/posts/new.vue | 4 ++-- packages/drizzle-pkg/db.sqlite | Bin 147456 -> 147456 bytes 4 files changed, 42 insertions(+), 10 deletions(-) diff --git a/app/assets/scss/markdown/green.scss b/app/assets/scss/markdown/green.scss index 55b310b..25081a2 100644 --- a/app/assets/scss/markdown/green.scss +++ b/app/assets/scss/markdown/green.scss @@ -22,7 +22,7 @@ } .markdown-body { --color-base: #ef4444; - --markdown-bg: white; + --markdown-bg: transparent; --color-bg: #ff47479c; --color-light: #ef44441a; --color-extra: rgba(239, 68, 68, 0.3); @@ -31,7 +31,13 @@ .markdown-body.green { background-color: var(--markdown-bg); - @apply p-3 lg:p-6; + box-shadow: 0 2px 8px rgba(0,0,0,0.1); + border-radius: 10px; + padding: 1.6em; + @media screen and (max-width: 768px) { + padding: 0; + box-shadow: none; + } strong { &::before{ @@ -132,10 +138,9 @@ } } - // 由prism.scss处理了 pre { - background: var(--prism-background); - font-size: var(--prism-font-size); + background: #f7f7f7; + font-size: 0.95em; // /* border: 1px solid #ddd; */ // padding: 1em 1.5em; display: block; @@ -144,7 +149,7 @@ pre, pre code { - font-family: var(--prism-font-family); + font-family: "JetBrains Mono", "Fira Code", Consolas, monospace; } // /* 底部印刷体、版本等标记 */ @@ -195,6 +200,33 @@ margin: 0; } } + + /* 代码块整体 */ + pre { + background: #f7f7f7; /* One Dark 背景 */ + color: #333; /* 文字色 */ + border-radius: 10px; /* 圆角 */ + padding: 1.2rem; + margin: 1rem 0; + overflow-x: auto; /* 长代码横向滚动 */ + box-shadow: 0 2px 8px rgba(0,0,0,0.15); + font-family: "JetBrains Mono", "Fira Code", Consolas, monospace; + font-size: 0.95em; + line-height: 1.5; + } + + /* 行内代码 `code` */ + code { + background: #f0f0f0; + color: #d73a49; + padding: 2px 6px; + border-radius: 4px; + } + pre code { + background: transparent; + padding: 0; + color: inherit; + } table { width: 100%; display: table; diff --git a/app/pages/me/posts/[id].vue b/app/pages/me/posts/[id].vue index eaf4f3e..8aa1933 100644 --- a/app/pages/me/posts/[id].vue +++ b/app/pages/me/posts/[id].vue @@ -149,9 +149,9 @@ const shareUrl = computed(() => { 返回列表 - + diff --git a/app/pages/me/posts/new.vue b/app/pages/me/posts/new.vue index 96a8c81..4fcf864 100644 --- a/app/pages/me/posts/new.vue +++ b/app/pages/me/posts/new.vue @@ -83,9 +83,9 @@ async function submit() { 返回列表 - + diff --git a/packages/drizzle-pkg/db.sqlite b/packages/drizzle-pkg/db.sqlite index ba487d8edc927477a162e3d7adee50a695cf1520..d3823f1fdcc03c5080c2fa58ee1e9c9af229bbc5 100644 GIT binary patch delta 1202 zcma*mUr19?7y$5db~m@X={+qqv$@iog~)Qd?(R>fcGJufODvL-(wlQlsBBIH%h*b? zhsqfjnmt%O1Qy}nLG=*UlMe-9X=M>jgK8lZ{dp-OI_It}!I!qn{m!}E-}im{?w#LH z`~7sU4tg$TltRyF!}WZMLUkdf$$(5;li4KL3LHk3b=r*2!bEX3VYjRpF zf)(~Z{q|rJ>>v8DVT)K-a#KyAZh&S`HyREx8+RhZ|0EI5?C{~TUqj03xgsi}t`g@j z*r^D8TwK#rf%nTrPtR(+4~v(2%5fYN!#yr4qM8;f0vz5aivGYl9LvPfKn}isO?(+J z;OHLfUAc;S`ea_r8fJ0q6n75~;COdzM4suRfC0$MffpE<4wS*%VmPqyv%N~r09vol zO9xs-I#4KB6KgHsTF#T`YIX@9`|d}2Z@jxc5IyiZGCp3n56|Mw=^sbi4;*T4BwJfl80tK=lb6G9X1=c(c@Xy*m8ISlyGtko7n=^ToBjxR;;IV2}Ijl7ilhq0Rxv$K$#qm z+ZOCU2@8Dd)zNmef7{`C!5hz4tHk+cdtZ`#waP{LKyo1+?dPB7c|Oi}g)x7vT2A<` z@FHHKVn8kpW24|yO0N@-J8{(NXySTrNI3s*Xx2E#j-02tBzhAuV;0u3oYCi12~Ai9t(Ej5I!n=Ygx>;odCcV}A(ylKwxyqw|pJm)uwh8$8{5DA2?Z#IJ9(^gSfoj7Eiz*@|Jmgo=}<3B{i1?WtY3m-Q@SX0`5Rd zs6xiES99H~IQIC(3QJE_KQwWq5s`V)NCq^a<`{AOPYAtsBn-!X($eeSSF+PTkJ9BE z73}nn2D)vq7WOvUHCP1u8G2{%0MsG+Zm@-&{vM;XQ4#7J8i|&}_Z&JAErER#U5GlM zdM1Z9Z((0vU8IF$9;lu4#Mm&@k;!pxYc_)v#2p7wgiEAA7!^cXnANB$@i7+rY4L1v zUVCc@$3`{BuB56vFhP82{-a7-Kii;9%pNvpkK7vTHj!n-kak4FQt)92%#MFZA6}v`=p)h7Cs9TLXS`>7&7CTcc(UY;@>9f%IclE-HSPf z6U_orWBu66_)My^A8!mV4J|+;pl;C@^!bB