前端：修复markdown样式
This commit is contained in:
parent
e66f7b902d
commit
fde98a5032
@ -29,10 +29,6 @@ const mockPost: PostDisplay = {
|
|||||||
id: 1,
|
id: 1,
|
||||||
title: "Markdown 完全指南：从基础到高级排版",
|
title: "Markdown 完全指南：从基础到高级排版",
|
||||||
content: `
|
content: `
|
||||||
# Markdown 完全指南：从基础到高级排版
|
|
||||||
|
|
||||||
这篇指南介绍 Markdown 的基础语法和高级排版技巧。
|
|
||||||
|
|
||||||
## 1. 基础语法
|
## 1. 基础语法
|
||||||
|
|
||||||
### 1.1 粗体文本
|
### 1.1 粗体文本
|
||||||
@ -195,11 +191,79 @@ function greet(user: User): string {
|
|||||||
|
|
||||||
:smile: :heart: :star: :rocket:
|
:smile: :heart: :star: :rocket:
|
||||||
|
|
||||||
## 2. 高级排版
|
### 1.14 可折叠内容
|
||||||
|
|
||||||
|
\`\`\`markdown
|
||||||
|
<details>
|
||||||
|
<summary >
|
||||||
|
🎯 如何选择合适的写作工具？
|
||||||
|
</summary>
|
||||||
|
|
||||||
|
选择写作工具时需要考虑以下几点：
|
||||||
|
|
||||||
|
1. **跨平台支持** - 确保在不同设备上都能访问
|
||||||
|
2. **实时预览** - Markdown 实时渲染很重要
|
||||||
|
3. **版本控制** - 最好能支持文章的版本管理
|
||||||
|
4. **导出功能** - 支持导出为多种格式
|
||||||
|
</details>
|
||||||
|
\`\`\`
|
||||||
|
|
||||||
|
<details>
|
||||||
|
<summary>
|
||||||
|
🎯 如何选择合适的写作工具？
|
||||||
|
</summary>
|
||||||
|
|
||||||
|
选择写作工具时需要考虑以下几点：
|
||||||
|
|
||||||
|
1. **跨平台支持** - 确保在不同设备上都能访问
|
||||||
|
2. **实时预览** - Markdown 实时渲染很重要
|
||||||
|
3. **版本控制** - 最好能支持文章的版本管理
|
||||||
|
4. **导出功能** - 支持导出为多种格式
|
||||||
|
</details>
|
||||||
|
|
||||||
|
### 1.15 引用式
|
||||||
|
|
||||||
|
\`\`\`markdown
|
||||||
|
> 📌 **最佳实践**
|
||||||
|
>
|
||||||
|
> 好的文章需要有清晰的结构和流畅的表达。以下是一些建议：
|
||||||
|
>
|
||||||
|
> 1. 开门见山，直入主题
|
||||||
|
> 2. 层次分明，逻辑清晰
|
||||||
|
> 3. 语言简洁，表达准确
|
||||||
|
>
|
||||||
|
> *— 写作指南*
|
||||||
|
\`\`\`
|
||||||
|
|
||||||
|
> 📌 **最佳实践**
|
||||||
|
>
|
||||||
|
> 好的文章需要有清晰的结构和流畅的表达。以下是一些建议：
|
||||||
|
>
|
||||||
|
> 1. 开门见山，直入主题
|
||||||
|
> 2. 层次分明，逻辑清晰
|
||||||
|
> 3. 语言简洁，表达准确
|
||||||
|
>
|
||||||
|
> *— 写作指南*
|
||||||
|
|
||||||
|
|
||||||
|
### 1.16 脚注
|
||||||
|
|
||||||
|
\`\`\`markdown
|
||||||
|
这里有一个脚注[^1]。
|
||||||
|
[^2]: 这是脚注的内容。
|
||||||
|
\`\`\`
|
||||||
|
|
||||||
|
这里有一个脚注[^1]。
|
||||||
|
|
||||||
|
[^1]:这是脚注的内容。
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
## 2. HTML排版
|
||||||
|
|
||||||
### 2.1 图文混排布局
|
### 2.1 图文混排布局
|
||||||
|
|
||||||
<pre>
|
\`\`\`markdown
|
||||||
<div class="flex items-center gap-6 my-8">
|
<div class="flex items-center gap-6 my-8">
|
||||||
<img src="https://images.unsplash.com/photo-1516116216624-53e697fedbea?w=400&h=400"
|
<img src="https://images.unsplash.com/photo-1516116216624-53e697fedbea?w=400&h=400"
|
||||||
alt="写作工具"
|
alt="写作工具"
|
||||||
@ -209,7 +273,7 @@ function greet(user: User): string {
|
|||||||
<p>使用合适的写作工具可以极大提升写作效率。推荐使用支持即时预览的编辑器，这样可以实时查看排版效果。</p>
|
<p>使用合适的写作工具可以极大提升写作效率。推荐使用支持即时预览的编辑器，这样可以实时查看排版效果。</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</pre>
|
\`\`\`
|
||||||
|
|
||||||
<div class="flex items-center gap-6 my-8">
|
<div class="flex items-center gap-6 my-8">
|
||||||
<img src="https://images.unsplash.com/photo-1516116216624-53e697fedbea?w=400&h=400"
|
<img src="https://images.unsplash.com/photo-1516116216624-53e697fedbea?w=400&h=400"
|
||||||
@ -221,39 +285,11 @@ function greet(user: User): string {
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
### 2.2 可折叠内容
|
|
||||||
|
|
||||||
<pre>
|
|
||||||
<details class="my-4">
|
|
||||||
<summary class="cursor-pointer p-4 bg-gray-100 rounded-lg font-medium hover:bg-gray-200 transition-colors">
|
|
||||||
🎯 如何选择合适的写作工具？
|
|
||||||
</summary>
|
|
||||||
|
|
||||||
选择写作工具时需要考虑以下几点：
|
### 2.2 并排卡片
|
||||||
|
|
||||||
1. **跨平台支持** - 确保在不同设备上都能访问
|
\`\`\`markdown
|
||||||
2. **实时预览** - Markdown 实时渲染很重要
|
|
||||||
3. **版本控制** - 最好能支持文章的版本管理
|
|
||||||
4. **导出功能** - 支持导出为多种格式
|
|
||||||
</details>
|
|
||||||
</pre>
|
|
||||||
|
|
||||||
<details class="my-4">
|
|
||||||
<summary class="cursor-pointer p-4 bg-gray-100 rounded-lg font-medium hover:bg-gray-200 transition-colors">
|
|
||||||
🎯 如何选择合适的写作工具？
|
|
||||||
</summary>
|
|
||||||
|
|
||||||
选择写作工具时需要考虑以下几点：
|
|
||||||
|
|
||||||
1. **跨平台支持** - 确保在不同设备上都能访问
|
|
||||||
2. **实时预览** - Markdown 实时渲染很重要
|
|
||||||
3. **版本控制** - 最好能支持文章的版本管理
|
|
||||||
4. **导出功能** - 支持导出为多种格式
|
|
||||||
</details>
|
|
||||||
|
|
||||||
### 2.3 并排卡片
|
|
||||||
|
|
||||||
<pre>
|
|
||||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-6 my-8">
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-6 my-8">
|
||||||
<div class="p-6 bg-gray-100 rounded-lg">
|
<div class="p-6 bg-gray-100 rounded-lg">
|
||||||
<h4 class="text-lg font-bold mb-2">🚀 快速上手</h4>
|
<h4 class="text-lg font-bold mb-2">🚀 快速上手</h4>
|
||||||
@ -264,7 +300,7 @@ function greet(user: User): string {
|
|||||||
<p>专注于内容创作，让工具自动处理排版，提高写作效率。</p>
|
<p>专注于内容创作，让工具自动处理排版，提高写作效率。</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</pre>
|
\`\`\`
|
||||||
|
|
||||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-6 my-8">
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-6 my-8">
|
||||||
<div class="p-6 bg-gray-100 rounded-lg">
|
<div class="p-6 bg-gray-100 rounded-lg">
|
||||||
@ -279,12 +315,12 @@ function greet(user: User): string {
|
|||||||
|
|
||||||
### 2.4 高亮提示框
|
### 2.4 高亮提示框
|
||||||
|
|
||||||
<pre>
|
\`\`\`markdown
|
||||||
<div class="p-6 bg-blue-50 border-l-4 border-blue-500 rounded-lg my-8">
|
<div class="p-6 bg-blue-50 border-l-4 border-blue-500 rounded-lg my-8">
|
||||||
<h4 class="text-lg font-bold text-blue-700 mb-2">💡 小贴士</h4>
|
<h4 class="text-lg font-bold text-blue-700 mb-2">💡 小贴士</h4>
|
||||||
<p class="text-blue-600">在写作时，可以先列出文章大纲，再逐步充实内容。这可以保证文章结构清晰，内容完整。</p>
|
<p class="text-blue-600">在写作时，可以先列出文章大纲，再逐步充实内容。这可以保证文章结构清晰，内容完整。</p>
|
||||||
</div>
|
</div>
|
||||||
</pre>
|
\`\`\`
|
||||||
|
|
||||||
<div class="p-6 bg-blue-50 border-l-4 border-blue-500 rounded-lg my-8">
|
<div class="p-6 bg-blue-50 border-l-4 border-blue-500 rounded-lg my-8">
|
||||||
<h4 class="text-lg font-bold text-blue-700 mb-2">小贴士</h4>
|
<h4 class="text-lg font-bold text-blue-700 mb-2">小贴士</h4>
|
||||||
@ -293,7 +329,7 @@ function greet(user: User): string {
|
|||||||
|
|
||||||
### 2.5 时间线
|
### 2.5 时间线
|
||||||
|
|
||||||
<pre>
|
\`\`\`markdown
|
||||||
<div class="relative pl-8 my-8 border-l-2 border-gray-200">
|
<div class="relative pl-8 my-8 border-l-2 border-gray-200">
|
||||||
<div class="mb-8 relative">
|
<div class="mb-8 relative">
|
||||||
<div class="absolute -left-10 w-4 h-4 bg-blue-500 rounded-full"></div>
|
<div class="absolute -left-10 w-4 h-4 bg-blue-500 rounded-full"></div>
|
||||||
@ -307,7 +343,7 @@ function greet(user: User): string {
|
|||||||
<p>广泛搜集相关资料，为写作做充实准备。</p>
|
<p>广泛搜集相关资料，为写作做充实准备。</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</pre>
|
\`\`\`
|
||||||
|
|
||||||
<div class="relative pl-8 my-8 border-l-2 border-gray-200">
|
<div class="relative pl-8 my-8 border-l-2 border-gray-200">
|
||||||
<div class="mb-8 relative">
|
<div class="mb-8 relative">
|
||||||
@ -323,53 +359,9 @@ function greet(user: User): string {
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
### 2.6 引用式
|
|
||||||
|
|
||||||
<pre>
|
|
||||||
> 📌 **最佳实践**
|
|
||||||
>
|
|
||||||
> 好的文章需要有清晰的结构和流畅的表达。以下是一些建议：
|
|
||||||
>
|
|
||||||
> 1. 开门见山，直入主题
|
|
||||||
> 2. 层次分明，逻辑清晰
|
|
||||||
> 3. 语言简洁，表达准确
|
|
||||||
>
|
|
||||||
> *— 写作指南*
|
|
||||||
</pre>
|
|
||||||
|
|
||||||
> 📌 **最佳实践**
|
## 3. 总结
|
||||||
>
|
|
||||||
> 好的文章需要有清晰的结构和流畅的表达。以下是一些建议：
|
|
||||||
>
|
|
||||||
> 1. 开门见山，直入主题
|
|
||||||
> 2. 层次分明，逻辑清晰
|
|
||||||
> 3. 语言简洁，表达准确
|
|
||||||
>
|
|
||||||
> *— 写作指南*
|
|
||||||
|
|
||||||
## 3. 特殊语法
|
|
||||||
|
|
||||||
### 3.1 脚注
|
|
||||||
|
|
||||||
<pre>
|
|
||||||
这里有一个脚注[^1]。
|
|
||||||
|
|
||||||
[^1]: 这是脚注的内容。
|
|
||||||
</pre>
|
|
||||||
|
|
||||||
这里有一个脚注[^1]。
|
|
||||||
|
|
||||||
[^1]: 这是脚注的内容。
|
|
||||||
|
|
||||||
### 3.2 表情符号
|
|
||||||
|
|
||||||
<pre>
|
|
||||||
:smile: :heart: :star: :rocket:
|
|
||||||
</pre>
|
|
||||||
|
|
||||||
:smile: :heart: :star: :rocket:
|
|
||||||
|
|
||||||
## 4. 总结
|
|
||||||
|
|
||||||
本文展示了 Markdown 从基础到高级的各种用法：
|
本文展示了 Markdown 从基础到高级的各种用法：
|
||||||
|
|
||||||
@ -701,6 +693,7 @@ export default new Template({}, ({ http, args }) => {
|
|||||||
const match = /language-(\w+)/.exec(className || '');
|
const match = /language-(\w+)/.exec(className || '');
|
||||||
const code = String(children).replace(/\n$/, '');
|
const code = String(children).replace(/\n$/, '');
|
||||||
|
|
||||||
|
// 如果是内联代码
|
||||||
if (!className || inline) {
|
if (!className || inline) {
|
||||||
return (
|
return (
|
||||||
<code
|
<code
|
||||||
@ -714,6 +707,9 @@ export default new Template({}, ({ http, args }) => {
|
|||||||
|
|
||||||
const language = match ? match[1] : '';
|
const language = match ? match[1] : '';
|
||||||
|
|
||||||
|
// 特殊处理表格语法
|
||||||
|
const isTable = code.includes('|') && code.includes('\n') && code.includes('---');
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="my-4 sm:my-6">
|
<div className="my-4 sm:my-6">
|
||||||
<div className="flex justify-between items-center h-9 sm:h-10 px-4 sm:px-6
|
<div className="flex justify-between items-center h-9 sm:h-10 px-4 sm:px-6
|
||||||
@ -730,36 +726,50 @@ export default new Template({}, ({ http, args }) => {
|
|||||||
<div className="border border-[--gray-6] rounded-b-lg bg-white dark:bg-[--gray-1]">
|
<div className="border border-[--gray-6] rounded-b-lg bg-white dark:bg-[--gray-1]">
|
||||||
<div className="overflow-x-auto">
|
<div className="overflow-x-auto">
|
||||||
<div className="p-4 sm:p-6">
|
<div className="p-4 sm:p-6">
|
||||||
<SyntaxHighlighter
|
{isTable ? (
|
||||||
language={language || "text"}
|
// 对表格使用 pre 标签保持格式
|
||||||
style={{
|
<pre
|
||||||
...oneLight,
|
className="m-0 p-0 bg-transparent font-mono text-[0.9rem] leading-relaxed overflow-x-auto"
|
||||||
'punctuation': {
|
style={{
|
||||||
color: 'var(--gray-12)'
|
color: 'inherit',
|
||||||
},
|
whiteSpace: 'pre'
|
||||||
'operator': {
|
}}
|
||||||
color: 'var(--gray-12)'
|
>
|
||||||
},
|
{code}
|
||||||
'symbol': {
|
</pre>
|
||||||
color: 'var(--gray-12)'
|
) : (
|
||||||
}
|
// 其他代码使用 SyntaxHighlighter
|
||||||
}}
|
<SyntaxHighlighter
|
||||||
customStyle={{
|
language={language || "text"}
|
||||||
margin: 0,
|
style={{
|
||||||
padding: 0,
|
...oneLight,
|
||||||
background: "none",
|
'punctuation': {
|
||||||
fontSize: "0.9rem",
|
color: 'var(--gray-12)'
|
||||||
lineHeight: 1.6,
|
},
|
||||||
}}
|
'operator': {
|
||||||
codeTagProps={{
|
color: 'var(--gray-12)'
|
||||||
className: "dark:text-[--gray-12]",
|
},
|
||||||
style: {
|
'symbol': {
|
||||||
color: "inherit"
|
color: 'var(--gray-12)'
|
||||||
}
|
}
|
||||||
}}
|
}}
|
||||||
>
|
customStyle={{
|
||||||
{code}
|
margin: 0,
|
||||||
</SyntaxHighlighter>
|
padding: 0,
|
||||||
|
background: "none",
|
||||||
|
fontSize: "0.9rem",
|
||||||
|
lineHeight: 1.6,
|
||||||
|
}}
|
||||||
|
codeTagProps={{
|
||||||
|
className: "dark:text-[--gray-12]",
|
||||||
|
style: {
|
||||||
|
color: "inherit"
|
||||||
|
}
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{code}
|
||||||
|
</SyntaxHighlighter>
|
||||||
|
)}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@ -837,7 +847,8 @@ export default new Template({}, ({ http, args }) => {
|
|||||||
<summary
|
<summary
|
||||||
className="px-4 py-3 cursor-pointer hover:bg-[--gray-3] transition-colors
|
className="px-4 py-3 cursor-pointer hover:bg-[--gray-3] transition-colors
|
||||||
text-[--gray-12] font-medium select-none
|
text-[--gray-12] font-medium select-none
|
||||||
marker:text-[--gray-11]"
|
marker:text-[--gray-11]
|
||||||
|
"
|
||||||
{...props}
|
{...props}
|
||||||
/>
|
/>
|
||||||
),
|
),
|
||||||
|
|||||||
@ -316,3 +316,84 @@ html[class~="dark"] .scroll-container::-webkit-scrollbar-thumb:hover {
|
|||||||
.scroll-hidden::-webkit-scrollbar {
|
.scroll-hidden::-webkit-scrollbar {
|
||||||
display: none; /* Chrome, Safari and Opera */
|
display: none; /* Chrome, Safari and Opera */
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* 可折叠块样式 */
|
||||||
|
details {
|
||||||
|
transition: all 0.2s ease;
|
||||||
|
background-color: transparent;
|
||||||
|
border: 1px solid var(--gray-6);
|
||||||
|
border-radius: 8px;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 亮色模式样式 */
|
||||||
|
details summary {
|
||||||
|
padding: 1rem;
|
||||||
|
background-color: var(--gray-2);
|
||||||
|
font-weight: 500;
|
||||||
|
color: var(--gray-12);
|
||||||
|
border-bottom: 1px solid transparent; /* 添加透明边框 */
|
||||||
|
transition: all 0.2s ease; /* 添加过渡效果 */
|
||||||
|
}
|
||||||
|
|
||||||
|
details summary:hover {
|
||||||
|
background-color: var(--gray-4);
|
||||||
|
}
|
||||||
|
|
||||||
|
details[open] {
|
||||||
|
background-color: var(--gray-2);
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
/* 暗色模式样式覆盖 */
|
||||||
|
html[class~="dark"] details {
|
||||||
|
background-color: var(--gray-3);
|
||||||
|
background-color: transparent;
|
||||||
|
}
|
||||||
|
|
||||||
|
html[class~="dark"] details summary {
|
||||||
|
background-color: var(--gray-3);
|
||||||
|
color: var(--gray-12);
|
||||||
|
}
|
||||||
|
|
||||||
|
html[class~="dark"] details summary:hover {
|
||||||
|
background-color: var(--gray-5);
|
||||||
|
}
|
||||||
|
|
||||||
|
html[class~="dark"] details[open] {
|
||||||
|
background-color: var(--gray-3);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 内容区域样式 */
|
||||||
|
details > *:not(summary) {
|
||||||
|
padding: 1rem;
|
||||||
|
color: var(--gray-11);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 移除默认的三角形标记 */
|
||||||
|
details summary::-webkit-details-marker,
|
||||||
|
details summary::marker {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 自定义展开/折叠指示器 */
|
||||||
|
details summary {
|
||||||
|
position: relative;
|
||||||
|
padding-right: 2.5rem;
|
||||||
|
cursor: pointer;
|
||||||
|
user-select: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
details summary::after {
|
||||||
|
position: absolute;
|
||||||
|
right: 1rem;
|
||||||
|
top: 50%;
|
||||||
|
transform: translateY(-50%);
|
||||||
|
transition: transform 0.2s ease;
|
||||||
|
color: var(--gray-11);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 暗色模式下的指示器颜色 */
|
||||||
|
html[class~="dark"] details summary::after {
|
||||||
|
color: var(--gray-10);
|
||||||
|
}
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user