feat: 美化文章 Markdown 预览样式，支持亮/暗双色模式
- Drawer 宽度调整为 50%，标题栏加背景/底部边框 - 为预览内容 div 添加 markdown-body 类 - 新增完整 markdown-body 样式： - h1-h6 标题层级（h1/h2 带下划线） - 段落、强调、链接（带 hover 过渡） - 内联代码：使用 Element Plus 填充色 + danger 颜色 - 代码块：亮色模式 #f6f8fa 浅灰背景，暗色模式 #161b22 深背景 - 引用块：主题色左边框 + 浅色背景 - 有序/无序列表（支持嵌套） - 表格：条纹行 + hover 高亮 - 图片：居中、圆角、阴影 - 水平线 - 暗色模式通过 html.dark 选择器单独覆盖代码块和图片阴影 Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
This commit is contained in:
parent
18224299aa
commit
d4ec727437
GPG Key ID:
343F7F37BECCFAE2
@ -215,6 +215,191 @@ body .el-dialog {
|
|||||||
overflow: auto;
|
overflow: auto;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
/* ===== Markdown 预览 ===== */
|
||||||
|
.article-preview-drawer {
|
||||||
|
> .el-drawer__header {
|
||||||
|
border-bottom: 1px solid var(--el-border-color-lighter);
|
||||||
|
padding: 14px 20px;
|
||||||
|
margin-bottom: 0;
|
||||||
|
background: var(--el-fill-color-light);
|
||||||
|
|
||||||
|
.el-drawer__title {
|
||||||
|
font-size: var(--el-font-size-base);
|
||||||
|
font-weight: var(--el-font-weight-primary);
|
||||||
|
color: var(--el-text-color-primary);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
> .el-drawer__body {
|
||||||
|
padding: 24px 32px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.markdown-body {
|
||||||
|
font-size: 15px;
|
||||||
|
line-height: 1.8;
|
||||||
|
color: var(--el-text-color-primary);
|
||||||
|
word-break: break-word;
|
||||||
|
|
||||||
|
// 首个元素去掉顶部外边距
|
||||||
|
> :first-child { margin-top: 0 !important; }
|
||||||
|
|
||||||
|
// ── 标题 ───────────────────────────────────
|
||||||
|
h1, h2, h3, h4, h5, h6 {
|
||||||
|
font-weight: 600;
|
||||||
|
line-height: 1.35;
|
||||||
|
margin: 1.4em 0 0.6em;
|
||||||
|
color: var(--el-text-color-primary);
|
||||||
|
}
|
||||||
|
h1 {
|
||||||
|
font-size: 1.8em;
|
||||||
|
padding-bottom: 0.4em;
|
||||||
|
border-bottom: 2px solid var(--el-border-color);
|
||||||
|
}
|
||||||
|
h2 {
|
||||||
|
font-size: 1.45em;
|
||||||
|
padding-bottom: 0.3em;
|
||||||
|
border-bottom: 1px solid var(--el-border-color-lighter);
|
||||||
|
}
|
||||||
|
h3 { font-size: 1.2em; }
|
||||||
|
h4 { font-size: 1.05em; }
|
||||||
|
h5 { font-size: 0.95em; }
|
||||||
|
h6 {
|
||||||
|
font-size: 0.9em;
|
||||||
|
color: var(--el-text-color-secondary);
|
||||||
|
}
|
||||||
|
|
||||||
|
// ── 段落 ───────────────────────────────────
|
||||||
|
p { margin: 0.85em 0; }
|
||||||
|
|
||||||
|
// ── 链接 ───────────────────────────────────
|
||||||
|
a {
|
||||||
|
color: var(--el-color-primary);
|
||||||
|
text-decoration: none;
|
||||||
|
border-bottom: 1px solid transparent;
|
||||||
|
transition: border-color 0.2s, color 0.2s;
|
||||||
|
&:hover {
|
||||||
|
color: var(--el-color-primary-light-3);
|
||||||
|
border-bottom-color: var(--el-color-primary-light-3);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// ── 强调 ───────────────────────────────────
|
||||||
|
strong { font-weight: 600; }
|
||||||
|
em { font-style: italic; }
|
||||||
|
del { color: var(--el-text-color-secondary); text-decoration: line-through; }
|
||||||
|
|
||||||
|
// ── 内联代码 ───────────────────────────────
|
||||||
|
:not(pre) > code {
|
||||||
|
font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
|
||||||
|
font-size: 0.85em;
|
||||||
|
padding: 0.18em 0.45em;
|
||||||
|
border-radius: 4px;
|
||||||
|
background: var(--el-fill-color-dark);
|
||||||
|
color: var(--el-color-danger);
|
||||||
|
border: 1px solid var(--el-border-color-lighter);
|
||||||
|
}
|
||||||
|
|
||||||
|
// ── 代码块（亮色：浅灰背景；暗色：深背景） ───
|
||||||
|
pre {
|
||||||
|
background: #f6f8fa;
|
||||||
|
border: 1px solid var(--el-border-color-lighter);
|
||||||
|
border-radius: 8px;
|
||||||
|
padding: 1em 1.2em;
|
||||||
|
overflow-x: auto;
|
||||||
|
margin: 1em 0;
|
||||||
|
code {
|
||||||
|
font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
|
||||||
|
font-size: 0.875em;
|
||||||
|
background: none;
|
||||||
|
border: none;
|
||||||
|
padding: 0;
|
||||||
|
color: #24292f;
|
||||||
|
line-height: 1.65;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// ── 引用块 ─────────────────────────────────
|
||||||
|
blockquote {
|
||||||
|
margin: 1em 0;
|
||||||
|
padding: 0.6em 1.1em;
|
||||||
|
border-left: 4px solid var(--el-color-primary-light-5);
|
||||||
|
background: var(--el-color-primary-light-9);
|
||||||
|
border-radius: 0 6px 6px 0;
|
||||||
|
color: var(--el-text-color-secondary);
|
||||||
|
> :first-child { margin-top: 0; }
|
||||||
|
> :last-child { margin-bottom: 0; }
|
||||||
|
}
|
||||||
|
|
||||||
|
// ── 列表 ───────────────────────────────────
|
||||||
|
ul, ol {
|
||||||
|
margin: 0.7em 0;
|
||||||
|
padding-left: 1.8em;
|
||||||
|
}
|
||||||
|
li {
|
||||||
|
margin: 0.3em 0;
|
||||||
|
line-height: 1.75;
|
||||||
|
> ul, > ol { margin: 0.2em 0; }
|
||||||
|
}
|
||||||
|
ul > li { list-style-type: disc; }
|
||||||
|
ul > li > ul > li { list-style-type: circle; }
|
||||||
|
ol > li { list-style-type: decimal; }
|
||||||
|
|
||||||
|
// ── 水平线 ─────────────────────────────────
|
||||||
|
hr {
|
||||||
|
border: none;
|
||||||
|
border-top: 1px solid var(--el-border-color);
|
||||||
|
margin: 1.6em 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
// ── 图片 ───────────────────────────────────
|
||||||
|
img {
|
||||||
|
max-width: 100%;
|
||||||
|
height: auto;
|
||||||
|
border-radius: 6px;
|
||||||
|
display: block;
|
||||||
|
margin: 1em auto;
|
||||||
|
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
|
||||||
|
}
|
||||||
|
|
||||||
|
// ── 表格 ───────────────────────────────────
|
||||||
|
table {
|
||||||
|
border-collapse: collapse;
|
||||||
|
width: 100%;
|
||||||
|
margin: 1em 0;
|
||||||
|
font-size: 0.9em;
|
||||||
|
border: 1px solid var(--el-border-color);
|
||||||
|
border-radius: 6px;
|
||||||
|
overflow: hidden;
|
||||||
|
th, td {
|
||||||
|
padding: 0.6em 1em;
|
||||||
|
border: 1px solid var(--el-border-color-lighter);
|
||||||
|
text-align: left;
|
||||||
|
vertical-align: top;
|
||||||
|
}
|
||||||
|
th {
|
||||||
|
background: var(--el-fill-color-light);
|
||||||
|
font-weight: 600;
|
||||||
|
color: var(--el-text-color-regular);
|
||||||
|
}
|
||||||
|
tr:nth-child(even) td { background: var(--el-fill-color-lighter); }
|
||||||
|
tr:hover td { background: var(--el-color-primary-light-9); }
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 暗色模式：代码块使用深色背景
|
||||||
|
html.dark .markdown-body {
|
||||||
|
pre {
|
||||||
|
background: #161b22;
|
||||||
|
border-color: rgba(255, 255, 255, 0.08);
|
||||||
|
code { color: #e6edf3; }
|
||||||
|
}
|
||||||
|
|
||||||
|
img { box-shadow: 0 2px 12px rgba(0, 0, 0, 0.4); }
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ========================================== */
|
||||||
|
|
||||||
.el-tabs--card.nav-tabs {
|
.el-tabs--card.nav-tabs {
|
||||||
> .el-tabs__header {
|
> .el-tabs__header {
|
||||||
margin-bottom: 0;
|
margin-bottom: 0;
|
||||||
|
|||||||
@ -99,8 +99,9 @@
|
|||||||
v-model="markdownPreview.show"
|
v-model="markdownPreview.show"
|
||||||
:title="markdownPreview.title"
|
:title="markdownPreview.title"
|
||||||
direction="rtl"
|
direction="rtl"
|
||||||
class="custom-drawer">
|
size="50%"
|
||||||
<div v-html="markdownPreview.content"></div>
|
class="custom-drawer article-preview-drawer">
|
||||||
|
<div class="markdown-body" v-html="markdownPreview.content"></div>
|
||||||
</el-drawer>
|
</el-drawer>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user