652 lines
18 KiB
Vue
652 lines
18 KiB
Vue
<script setup lang="ts">
|
||
import { computed, onMounted, ref, watch } from 'vue';
|
||
import { marked } from 'marked';
|
||
import hljs from 'highlight.js';
|
||
// 导入亮色主题样式
|
||
import 'highlight.js/styles/github.css'; // 亮色主题
|
||
// 导入主题存储
|
||
import { useThemeStore } from '@/stores/theme';
|
||
|
||
const props = defineProps({
|
||
content: {
|
||
type: String,
|
||
required: true
|
||
},
|
||
removeFirstH1: {
|
||
type: Boolean,
|
||
default: false
|
||
}
|
||
});
|
||
|
||
// 使用主题存储
|
||
const themeStore = useThemeStore();
|
||
// 使用 isDarkTheme 函数来检查当前是否为暗色主题
|
||
const isDarkMode = computed(() => themeStore.isDarkTheme());
|
||
|
||
// 监听主题变化
|
||
watch(() => themeStore.currentTheme, () => {
|
||
// 主题变化时更新代码高亮样式
|
||
updateCodeBlocksTheme();
|
||
});
|
||
|
||
// 更新代码块主题样式
|
||
const updateCodeBlocksTheme = () => {
|
||
// 这个函数可以在需要时手动更新代码块的样式
|
||
// 由于我们使用CSS变量控制样式，可能不需要特定实现
|
||
// 但如果需要，可以在这里添加额外逻辑
|
||
};
|
||
|
||
const renderedContent = computed(() => {
|
||
if (!props.content) return '<p>没有内容</p>';
|
||
|
||
let processedContent = props.content;
|
||
|
||
// 如果需要，移除第一个一级标题
|
||
if (props.removeFirstH1) {
|
||
const lines = processedContent.split('\n');
|
||
const firstH1Index = lines.findIndex(line => line.startsWith('# '));
|
||
|
||
if (firstH1Index !== -1) {
|
||
processedContent = lines.slice(firstH1Index + 1).join('\n');
|
||
}
|
||
}
|
||
|
||
// 创建自定义渲染器
|
||
const renderer = new marked.Renderer();
|
||
|
||
// 重写代码块渲染方法，添加语言信息
|
||
renderer.code = (code, incomingLanguage) => {
|
||
// 确保语言参数是字符串
|
||
const language = incomingLanguage || 'plaintext';
|
||
// 验证语言
|
||
const validLanguage = hljs.getLanguage(language) ? language : 'plaintext';
|
||
// 高亮代码
|
||
const highlightedCode = hljs.highlight(code, { language: validLanguage }).value;
|
||
|
||
// 添加语言标签到代码块
|
||
return `<pre class="hljs" data-language="${validLanguage}"><code class="language-${validLanguage}">${highlightedCode}</code></pre>`;
|
||
};
|
||
|
||
// 设置 marked 选项
|
||
marked.use({
|
||
renderer: renderer,
|
||
gfm: true,
|
||
breaks: true
|
||
});
|
||
|
||
return marked(processedContent);
|
||
});
|
||
|
||
// 页面挂载后，确保应用正确的主题样式
|
||
onMounted(() => {
|
||
updateCodeBlocksTheme();
|
||
});
|
||
</script>
|
||
|
||
<template>
|
||
<div class="markdown-content" :data-theme="themeStore.currentTheme" v-html="renderedContent"></div>
|
||
</template>
|
||
|
||
<style scoped>
|
||
.markdown-content {
|
||
color: hsl(var(--bc));
|
||
line-height: 1.6;
|
||
padding: 1rem 1.5rem;
|
||
max-width: 100%;
|
||
background-color: inherit; /* 继承父元素的背景色 */
|
||
height: 100%;
|
||
}
|
||
|
||
.markdown-content :deep(img) {
|
||
max-width: 60%;
|
||
height: auto;
|
||
display: block;
|
||
margin: 1rem auto;
|
||
border-radius: 0.5rem;
|
||
box-shadow: 0 1px 3px rgba(0,0,0,0.12);
|
||
}
|
||
|
||
.markdown-content :deep(h1) {
|
||
margin-top: 2.5rem;
|
||
margin-bottom: 1.5rem;
|
||
color: hsl(var(--bc));
|
||
font-weight: 700;
|
||
font-size: 2.2rem;
|
||
line-height: 1.3;
|
||
padding-bottom: 0.7rem;
|
||
border-bottom: 2px solid hsl(var(--p) / 0.7);
|
||
text-shadow: 1px 1px 2px rgba(0,0,0,0.05);
|
||
}
|
||
|
||
.markdown-content :deep(h2) {
|
||
margin-top: 2rem;
|
||
margin-bottom: 1rem;
|
||
color: hsl(var(--bc));
|
||
font-weight: 600;
|
||
font-size: 1.7rem;
|
||
line-height: 1.4;
|
||
padding: 0.5rem 1rem;
|
||
border-left: 5px solid hsl(var(--p));
|
||
background: linear-gradient(to right, hsl(var(--b2) / 0.5), transparent);
|
||
border-radius: 0.3rem;
|
||
}
|
||
|
||
.markdown-content :deep(h3) {
|
||
margin-top: 1.8rem;
|
||
margin-bottom: 0.9rem;
|
||
color: hsl(var(--bc));
|
||
font-weight: 600;
|
||
font-size: 1.4rem;
|
||
line-height: 1.4;
|
||
padding-left: 1rem;
|
||
border-left: 3px solid hsl(var(--s));
|
||
padding-top: 0.3rem;
|
||
padding-bottom: 0.3rem;
|
||
}
|
||
|
||
.markdown-content :deep(h4),
|
||
.markdown-content :deep(h5),
|
||
.markdown-content :deep(h6) {
|
||
margin-top: 1.5rem;
|
||
margin-bottom: 0.7rem;
|
||
color: hsl(var(--bc));
|
||
font-weight: 600;
|
||
font-size: 1.2rem;
|
||
line-height: 1.5;
|
||
padding-left: 1.5rem;
|
||
position: relative;
|
||
}
|
||
|
||
.markdown-content :deep(h4::before),
|
||
.markdown-content :deep(h5::before),
|
||
.markdown-content :deep(h6::before) {
|
||
content: '▶';
|
||
color: hsl(var(--p) / 0.7);
|
||
position: absolute;
|
||
left: 0.2rem;
|
||
font-size: 0.9em;
|
||
}
|
||
|
||
.markdown-content :deep(p) {
|
||
text-indent: 2em;
|
||
margin: 1rem 0;
|
||
color: hsl(var(--bc) / 0.8);
|
||
line-height: 1.8;
|
||
}
|
||
|
||
.markdown-content :deep(ul),
|
||
.markdown-content :deep(ol) {
|
||
padding-left: 2.5em;
|
||
margin: 1.25rem 0;
|
||
color: hsl(var(--bc) / 0.8);
|
||
background-color: hsl(var(--b1) / 0.3);
|
||
border-radius: 0.5rem;
|
||
padding-top: 0.75rem;
|
||
padding-bottom: 0.75rem;
|
||
padding-right: 1rem;
|
||
border-left: 3px solid hsl(var(--p) / 0.7);
|
||
}
|
||
|
||
.markdown-content :deep(li) {
|
||
margin: 0.5rem 0;
|
||
position: relative;
|
||
padding-left: 0.5rem;
|
||
}
|
||
|
||
.markdown-content :deep(ul ul),
|
||
.markdown-content :deep(ul ol),
|
||
.markdown-content :deep(ol ul),
|
||
.markdown-content :deep(ol ol) {
|
||
margin: 0.5rem 0 0.5rem 0.5rem;
|
||
padding-left: 1.5rem;
|
||
border-left: 2px solid hsl(var(--s) / 0.5);
|
||
background-color: transparent;
|
||
}
|
||
|
||
.markdown-content :deep(ul) {
|
||
list-style-type: disc;
|
||
}
|
||
|
||
.markdown-content :deep(ol) {
|
||
list-style-type: decimal;
|
||
}
|
||
|
||
.markdown-content :deep(ul ul) {
|
||
list-style-type: circle;
|
||
}
|
||
|
||
.markdown-content :deep(ul ul ul) {
|
||
list-style-type: square;
|
||
}
|
||
|
||
.markdown-content :deep(ul li::marker) {
|
||
color: hsl(var(--p));
|
||
}
|
||
|
||
.markdown-content :deep(ol li::marker) {
|
||
color: hsl(var(--s));
|
||
}
|
||
|
||
/* 代码块样式增强 - 响应主题 */
|
||
.markdown-content :deep(pre) {
|
||
background-color: var(--code-bg, hsl(var(--b2)));
|
||
padding: 1rem;
|
||
border-radius: 0.5rem;
|
||
overflow-x: auto;
|
||
border: 1px solid hsl(var(--b2));
|
||
margin: 1.5rem 0;
|
||
box-shadow: 0 4px 8px rgba(0,0,0,0.1);
|
||
position: relative;
|
||
color: var(--code-color, hsl(var(--bc)));
|
||
}
|
||
|
||
.markdown-content :deep(pre::before) {
|
||
content: '';
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
right: 0;
|
||
height: 4px;
|
||
background: linear-gradient(90deg, hsl(var(--p)), hsl(var(--s)));
|
||
border-radius: 0.5rem 0.5rem 0 0;
|
||
}
|
||
|
||
/* 代码语言标签 */
|
||
.markdown-content :deep(pre.hljs::after) {
|
||
content: attr(data-language);
|
||
position: absolute;
|
||
top: 0;
|
||
right: 0;
|
||
color: var(--code-label-color, hsl(var(--bc) / 0.7));
|
||
font-size: 0.75rem;
|
||
background-color: var(--code-label-bg, hsl(var(--b3)));
|
||
padding: 0.2rem 0.5rem;
|
||
border-radius: 0 0.3rem 0 0.3rem;
|
||
opacity: 0.8;
|
||
}
|
||
|
||
/* 内联代码样式 */
|
||
.markdown-content :deep(code) {
|
||
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
|
||
background-color: var(--inline-code-bg, hsl(var(--b3) / 0.7));
|
||
padding: 0.2rem 0.5rem;
|
||
border-radius: 0.25rem;
|
||
font-size: 0.9em;
|
||
color: var(--inline-code-color, hsl(var(--p)));
|
||
border: 1px solid hsl(var(--b2) / 0.5);
|
||
}
|
||
|
||
/* 确保代码块内的代码不受内联代码样式影响 */
|
||
.markdown-content :deep(pre code) {
|
||
background-color: transparent;
|
||
padding: 0;
|
||
border: none;
|
||
color: inherit;
|
||
font-size: 0.95em;
|
||
line-height: 1.5;
|
||
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
|
||
}
|
||
|
||
/* 为常见语言添加一些特殊的高亮效果 */
|
||
.markdown-content :deep(.hljs-keyword),
|
||
.markdown-content :deep(.hljs-tag),
|
||
.markdown-content :deep(.hljs-selector-tag) {
|
||
color: #cc99cd; /* 紫色，用于关键字 */
|
||
}
|
||
|
||
.markdown-content :deep(.hljs-string),
|
||
.markdown-content :deep(.hljs-regexp),
|
||
.markdown-content :deep(.hljs-template-tag) {
|
||
color: #7ec699; /* 绿色，用于字符串 */
|
||
}
|
||
|
||
.markdown-content :deep(.hljs-number),
|
||
.markdown-content :deep(.hljs-literal) {
|
||
color: #f08d49; /* 橙色，用于数字 */
|
||
}
|
||
|
||
.markdown-content :deep(.hljs-comment) {
|
||
color: #999999; /* 灰色，用于注释 */
|
||
font-style: italic;
|
||
}
|
||
|
||
.markdown-content :deep(.hljs-name),
|
||
.markdown-content :deep(.hljs-attribute),
|
||
.markdown-content :deep(.hljs-selector-id),
|
||
.markdown-content :deep(.hljs-selector-class) {
|
||
color: #e2777a; /* 红色，用于HTML标签名和属性 */
|
||
}
|
||
|
||
.markdown-content :deep(.hljs-built_in),
|
||
.markdown-content :deep(.hljs-builtin-name) {
|
||
color: #6196cc; /* 蓝色，用于内置函数 */
|
||
}
|
||
|
||
.markdown-content :deep(.hljs-title),
|
||
.markdown-content :deep(.hljs-function) {
|
||
color: #f8c555; /* 金色，用于函数名和类名 */
|
||
}
|
||
|
||
.markdown-content :deep(table) {
|
||
border-collapse: separate;
|
||
border-spacing: 0;
|
||
width: 100%;
|
||
margin: 1.5rem 0;
|
||
background-color: hsl(var(--b1));
|
||
border-radius: 0.5rem;
|
||
overflow: hidden;
|
||
box-shadow: 0 2px 8px rgba(0,0,0,0.08);
|
||
border: 1px solid hsl(var(--b2));
|
||
}
|
||
|
||
.markdown-content :deep(th),
|
||
.markdown-content :deep(td) {
|
||
border: 1px solid hsl(var(--b2));
|
||
padding: 0.75rem 1rem;
|
||
text-align: left;
|
||
}
|
||
|
||
.markdown-content :deep(th) {
|
||
background-color: hsl(var(--p) / 0.15);
|
||
font-weight: 600;
|
||
color: hsl(var(--bc));
|
||
border-bottom: 2px solid hsl(var(--p) / 0.5);
|
||
}
|
||
|
||
.markdown-content :deep(tr:nth-child(even)) {
|
||
background-color: hsl(var(--b2) / 0.3);
|
||
}
|
||
|
||
.markdown-content :deep(tr:hover) {
|
||
background-color: hsl(var(--b2) / 0.5);
|
||
}
|
||
|
||
.markdown-content :deep(td) {
|
||
color: hsl(var(--bc) / 0.8);
|
||
}
|
||
|
||
.markdown-content :deep(blockquote) {
|
||
margin: 1.5rem 0;
|
||
padding: 1rem 1.5rem;
|
||
border-left: 4px solid hsl(var(--p));
|
||
background-color: hsl(var(--b2) / 0.3);
|
||
color: hsl(var(--bc) / 0.9);
|
||
font-style: italic;
|
||
border-radius: 0 0.5rem 0.5rem 0;
|
||
box-shadow: 0 2px 5px rgba(0,0,0,0.03);
|
||
position: relative;
|
||
}
|
||
|
||
.markdown-content :deep(blockquote::before) {
|
||
content: '"';
|
||
font-size: 2rem;
|
||
color: hsl(var(--p) / 0.3);
|
||
position: absolute;
|
||
top: 0.5rem;
|
||
left: 0.5rem;
|
||
font-family: serif;
|
||
}
|
||
|
||
.markdown-content :deep(blockquote p) {
|
||
margin-top: 0.5rem;
|
||
}
|
||
|
||
.markdown-content :deep(hr) {
|
||
border: none;
|
||
border-top: 1px solid hsl(var(--b2));
|
||
margin: 1.5rem 0;
|
||
}
|
||
|
||
.markdown-content :deep(a) {
|
||
color: hsl(var(--p));
|
||
text-decoration: none;
|
||
transition: color 0.2s;
|
||
}
|
||
|
||
.markdown-content :deep(a:hover) {
|
||
color: hsl(var(--pf));
|
||
text-decoration: underline;
|
||
}
|
||
|
||
/* 亮色主题下的代码样式 */
|
||
:root[data-theme="winter"] .markdown-content :deep(.hljs),
|
||
.markdown-content[data-theme="winter"] :deep(.hljs),
|
||
[data-theme="winter"] .markdown-content :deep(.hljs) {
|
||
--code-bg: #f5f7ff;
|
||
--code-color: #333;
|
||
--inline-code-bg: #f0f2fa;
|
||
--inline-code-color: #d32f2f;
|
||
--code-label-bg: #e6e9f5;
|
||
--code-label-color: #666;
|
||
}
|
||
|
||
/* 亮色主题下的语法高亮 */
|
||
:root[data-theme="winter"] .markdown-content :deep(.hljs-keyword),
|
||
.markdown-content[data-theme="winter"] :deep(.hljs-keyword),
|
||
[data-theme="winter"] .markdown-content :deep(.hljs-keyword),
|
||
:root[data-theme="winter"] .markdown-content :deep(.hljs-tag),
|
||
.markdown-content[data-theme="winter"] :deep(.hljs-tag),
|
||
[data-theme="winter"] .markdown-content :deep(.hljs-tag),
|
||
:root[data-theme="winter"] .markdown-content :deep(.hljs-selector-tag),
|
||
.markdown-content[data-theme="winter"] :deep(.hljs-selector-tag),
|
||
[data-theme="winter"] .markdown-content :deep(.hljs-selector-tag) {
|
||
color: #8959a8; /* 紫色，用于关键字 */
|
||
}
|
||
|
||
:root[data-theme="winter"] .markdown-content :deep(.hljs-string),
|
||
.markdown-content[data-theme="winter"] :deep(.hljs-string),
|
||
[data-theme="winter"] .markdown-content :deep(.hljs-string),
|
||
:root[data-theme="winter"] .markdown-content :deep(.hljs-regexp),
|
||
.markdown-content[data-theme="winter"] :deep(.hljs-regexp),
|
||
[data-theme="winter"] .markdown-content :deep(.hljs-regexp) {
|
||
color: #2e7d32; /* 绿色，用于字符串 */
|
||
}
|
||
|
||
:root[data-theme="winter"] .markdown-content :deep(.hljs-number),
|
||
.markdown-content[data-theme="winter"] :deep(.hljs-number),
|
||
[data-theme="winter"] .markdown-content :deep(.hljs-number),
|
||
:root[data-theme="winter"] .markdown-content :deep(.hljs-literal),
|
||
.markdown-content[data-theme="winter"] :deep(.hljs-literal),
|
||
[data-theme="winter"] .markdown-content :deep(.hljs-literal) {
|
||
color: #f5871f; /* 橙色，用于数字 */
|
||
}
|
||
|
||
:root[data-theme="winter"] .markdown-content :deep(.hljs-comment),
|
||
.markdown-content[data-theme="winter"] :deep(.hljs-comment),
|
||
[data-theme="winter"] .markdown-content :deep(.hljs-comment) {
|
||
color: #8e908c; /* 灰色，用于注释 */
|
||
font-style: italic;
|
||
}
|
||
|
||
:root[data-theme="winter"] .markdown-content :deep(.hljs-built_in),
|
||
.markdown-content[data-theme="winter"] :deep(.hljs-built_in),
|
||
[data-theme="winter"] .markdown-content :deep(.hljs-built_in) {
|
||
color: #3e999f; /* 青色，用于内置函数 */
|
||
}
|
||
|
||
:root[data-theme="winter"] .markdown-content :deep(.hljs-title),
|
||
.markdown-content[data-theme="winter"] :deep(.hljs-title),
|
||
[data-theme="winter"] .markdown-content :deep(.hljs-title),
|
||
:root[data-theme="winter"] .markdown-content :deep(.hljs-function),
|
||
.markdown-content[data-theme="winter"] :deep(.hljs-function),
|
||
[data-theme="winter"] .markdown-content :deep(.hljs-function) {
|
||
color: #4271ae; /* 蓝色，用于函数名 */
|
||
}
|
||
|
||
:root[data-theme="winter"] .markdown-content :deep(.hljs-name),
|
||
.markdown-content[data-theme="winter"] :deep(.hljs-name),
|
||
[data-theme="winter"] .markdown-content :deep(.hljs-name),
|
||
:root[data-theme="winter"] .markdown-content :deep(.hljs-attribute),
|
||
.markdown-content[data-theme="winter"] :deep(.hljs-attribute),
|
||
[data-theme="winter"] .markdown-content :deep(.hljs-attribute) {
|
||
color: #c82829; /* 红色，用于HTML标签和属性 */
|
||
}
|
||
|
||
/* 暗黑主题下的代码样式 */
|
||
:root[data-theme="night"] .markdown-content :deep(.hljs),
|
||
.markdown-content[data-theme="night"] :deep(.hljs),
|
||
[data-theme="night"] .markdown-content :deep(.hljs) {
|
||
--code-bg: #1e1e2e;
|
||
--code-color: #f8f8f2;
|
||
--inline-code-bg: #282a36;
|
||
--inline-code-color: #ff79c6;
|
||
--code-label-bg: #282a36;
|
||
--code-label-color: #bd93f9;
|
||
}
|
||
|
||
/* 暗黑主题下的语法高亮 */
|
||
:root[data-theme="night"] .markdown-content :deep(.hljs-keyword),
|
||
.markdown-content[data-theme="night"] :deep(.hljs-keyword),
|
||
[data-theme="night"] .markdown-content :deep(.hljs-keyword),
|
||
:root[data-theme="night"] .markdown-content :deep(.hljs-tag),
|
||
.markdown-content[data-theme="night"] :deep(.hljs-tag),
|
||
[data-theme="night"] .markdown-content :deep(.hljs-tag),
|
||
:root[data-theme="night"] .markdown-content :deep(.hljs-selector-tag),
|
||
.markdown-content[data-theme="night"] :deep(.hljs-selector-tag),
|
||
[data-theme="night"] .markdown-content :deep(.hljs-selector-tag) {
|
||
color: #cc99cd; /* 紫色，用于关键字 */
|
||
}
|
||
|
||
:root[data-theme="night"] .markdown-content :deep(.hljs-string),
|
||
.markdown-content[data-theme="night"] :deep(.hljs-string),
|
||
[data-theme="night"] .markdown-content :deep(.hljs-string),
|
||
:root[data-theme="night"] .markdown-content :deep(.hljs-regexp),
|
||
.markdown-content[data-theme="night"] :deep(.hljs-regexp),
|
||
[data-theme="night"] .markdown-content :deep(.hljs-regexp) {
|
||
color: #7ec699; /* 绿色，用于字符串 */
|
||
}
|
||
|
||
:root[data-theme="night"] .markdown-content :deep(.hljs-number),
|
||
.markdown-content[data-theme="night"] :deep(.hljs-number),
|
||
[data-theme="night"] .markdown-content :deep(.hljs-number),
|
||
:root[data-theme="night"] .markdown-content :deep(.hljs-literal),
|
||
.markdown-content[data-theme="night"] :deep(.hljs-literal),
|
||
[data-theme="night"] .markdown-content :deep(.hljs-literal) {
|
||
color: #f08d49; /* 橙色，用于数字 */
|
||
}
|
||
|
||
:root[data-theme="night"] .markdown-content :deep(.hljs-comment),
|
||
.markdown-content[data-theme="night"] :deep(.hljs-comment),
|
||
[data-theme="night"] .markdown-content :deep(.hljs-comment) {
|
||
color: #999999; /* 灰色，用于注释 */
|
||
font-style: italic;
|
||
}
|
||
|
||
:root[data-theme="night"] .markdown-content :deep(.hljs-built_in),
|
||
.markdown-content[data-theme="night"] :deep(.hljs-built_in),
|
||
[data-theme="night"] .markdown-content :deep(.hljs-built_in) {
|
||
color: #6196cc; /* 蓝色，用于内置函数 */
|
||
}
|
||
|
||
:root[data-theme="night"] .markdown-content :deep(.hljs-title),
|
||
.markdown-content[data-theme="night"] :deep(.hljs-title),
|
||
[data-theme="night"] .markdown-content :deep(.hljs-title),
|
||
:root[data-theme="night"] .markdown-content :deep(.hljs-function),
|
||
.markdown-content[data-theme="night"] :deep(.hljs-function),
|
||
[data-theme="night"] .markdown-content :deep(.hljs-function) {
|
||
color: #f8c555; /* 金色，用于函数名 */
|
||
}
|
||
|
||
:root[data-theme="night"] .markdown-content :deep(.hljs-name),
|
||
.markdown-content[data-theme="night"] :deep(.hljs-name),
|
||
[data-theme="night"] .markdown-content :deep(.hljs-name),
|
||
:root[data-theme="night"] .markdown-content :deep(.hljs-attribute),
|
||
.markdown-content[data-theme="night"] :deep(.hljs-attribute),
|
||
[data-theme="night"] .markdown-content :deep(.hljs-attribute) {
|
||
color: #e2777a; /* 红色，用于HTML标签和属性 */
|
||
}
|
||
|
||
.markdown-content :deep(table) {
|
||
border-collapse: separate;
|
||
border-spacing: 0;
|
||
width: 100%;
|
||
margin: 1.5rem 0;
|
||
background-color: hsl(var(--b1));
|
||
border-radius: 0.5rem;
|
||
overflow: hidden;
|
||
box-shadow: 0 2px 8px rgba(0,0,0,0.08);
|
||
border: 1px solid hsl(var(--b2));
|
||
}
|
||
|
||
.markdown-content :deep(th),
|
||
.markdown-content :deep(td) {
|
||
border: 1px solid hsl(var(--b2));
|
||
padding: 0.75rem 1rem;
|
||
text-align: left;
|
||
}
|
||
|
||
.markdown-content :deep(th) {
|
||
background-color: hsl(var(--p) / 0.15);
|
||
font-weight: 600;
|
||
color: hsl(var(--bc));
|
||
border-bottom: 2px solid hsl(var(--p) / 0.5);
|
||
}
|
||
|
||
.markdown-content :deep(tr:nth-child(even)) {
|
||
background-color: hsl(var(--b2) / 0.3);
|
||
}
|
||
|
||
.markdown-content :deep(tr:hover) {
|
||
background-color: hsl(var(--b2) / 0.5);
|
||
}
|
||
|
||
.markdown-content :deep(td) {
|
||
color: hsl(var(--bc) / 0.8);
|
||
}
|
||
|
||
.markdown-content :deep(blockquote) {
|
||
margin: 1.5rem 0;
|
||
padding: 1rem 1.5rem;
|
||
border-left: 4px solid hsl(var(--p));
|
||
background-color: hsl(var(--b2) / 0.3);
|
||
color: hsl(var(--bc) / 0.9);
|
||
font-style: italic;
|
||
border-radius: 0 0.5rem 0.5rem 0;
|
||
box-shadow: 0 2px 5px rgba(0,0,0,0.03);
|
||
position: relative;
|
||
}
|
||
|
||
.markdown-content :deep(blockquote::before) {
|
||
content: '"';
|
||
font-size: 2rem;
|
||
color: hsl(var(--p) / 0.3);
|
||
position: absolute;
|
||
top: 0.5rem;
|
||
left: 0.5rem;
|
||
font-family: serif;
|
||
}
|
||
|
||
.markdown-content :deep(blockquote p) {
|
||
margin-top: 0.5rem;
|
||
}
|
||
|
||
.markdown-content :deep(hr) {
|
||
border: none;
|
||
border-top: 1px solid hsl(var(--b2));
|
||
margin: 1.5rem 0;
|
||
}
|
||
|
||
.markdown-content :deep(a) {
|
||
color: hsl(var(--p));
|
||
text-decoration: none;
|
||
transition: color 0.2s;
|
||
}
|
||
|
||
.markdown-content :deep(a:hover) {
|
||
color: hsl(var(--pf));
|
||
text-decoration: underline;
|
||
}
|
||
|
||
/* 暗黑模式下的代码高亮调整 */
|
||
@media (prefers-color-scheme: dark) {
|
||
.markdown-content :deep(pre) {
|
||
background-color: hsl(var(--b3));
|
||
border-color: hsl(var(--b1) / 0.7);
|
||
}
|
||
|
||
.markdown-content :deep(code) {
|
||
background-color: hsl(var(--b2) / 0.7);
|
||
}
|
||
}
|
||
</style>
|