feat: add Markdig markdown rendering for blog posts
TaxBaik CI/CD / build-and-deploy (push) Successful in 1m47s

- Add Markdig NuGet package (0.38.0)
- Convert blog content from markdown to HTML in Post.cshtml.cs
- Display rendered HTML content instead of raw text
- Add comprehensive markdown styling (h1-h6, lists, tables, code, etc.)
- Use TaxBaik color scheme for markdown elements

Blog posts now render properly:
 Headings (#, ##, ###)
 Bold/italic text (**text**, *text*)
 Lists (-, *, ordered)
 Tables
 Code blocks
 Blockquotes
 Links

Styling follows TaxBaik brand:
- Primary color for headings
- Warm typography (Noto Sans KR)
- Consistent spacing and borders
- Mobile-responsive design
This commit is contained in:
2026-07-01 16:34:09 +09:00
parent ed8ac34542
commit 6ffff70ece
4 changed files with 144 additions and 2 deletions
+138
View File
@@ -836,3 +836,141 @@ img {
box-shadow: 0 0 0 6px rgba(46, 92, 78, 0.3);
transform: scale(1.1);
}
/* ===== 마크다운 스타일 ===== */
.markdown-body {
font-size: 1rem;
line-height: 1.8;
color: var(--color-text);
}
.markdown-body h1,
.markdown-body h2,
.markdown-body h3,
.markdown-body h4,
.markdown-body h5,
.markdown-body h6 {
font-weight: 700;
margin-top: 1.5rem;
margin-bottom: 1rem;
color: var(--color-text);
}
.markdown-body h1 {
font-size: 1.8rem;
border-bottom: 2px solid var(--color-primary);
padding-bottom: 0.5rem;
}
.markdown-body h2 {
font-size: 1.5rem;
border-bottom: 1px solid var(--color-border);
padding-bottom: 0.3rem;
}
.markdown-body h3 {
font-size: 1.25rem;
}
.markdown-body h4 {
font-size: 1.1rem;
}
.markdown-body p {
margin-bottom: 1rem;
}
.markdown-body strong {
font-weight: 700;
color: var(--color-primary-dark);
}
.markdown-body em {
font-style: italic;
color: var(--color-text-light);
}
.markdown-body code {
background: var(--color-bg-alt);
border: 1px solid var(--color-border);
border-radius: var(--radius-sm);
padding: 0.15rem 0.4rem;
font-family: 'Courier New', monospace;
font-size: 0.9rem;
color: #d63384;
}
.markdown-body pre {
background: var(--color-text);
color: #f8f8f8;
padding: 1rem;
border-radius: var(--radius-lg);
overflow-x: auto;
margin-bottom: 1rem;
line-height: 1.4;
}
.markdown-body pre code {
background: none;
border: none;
padding: 0;
color: inherit;
font-size: 0.9rem;
}
.markdown-body ul,
.markdown-body ol {
margin-bottom: 1rem;
margin-left: 2rem;
}
.markdown-body li {
margin-bottom: 0.5rem;
}
.markdown-body blockquote {
border-left: 4px solid var(--color-primary);
padding-left: 1rem;
margin: 1rem 0;
color: var(--color-text-light);
font-style: italic;
}
.markdown-body table {
border-collapse: collapse;
width: 100%;
margin-bottom: 1rem;
}
.markdown-body table th,
.markdown-body table td {
border: 1px solid var(--color-border);
padding: 0.75rem;
text-align: left;
}
.markdown-body table th {
background: var(--color-bg-alt);
font-weight: 700;
}
.markdown-body table tr:nth-child(even) {
background: var(--color-bg);
}
.markdown-body a {
color: var(--color-primary-dark);
text-decoration: none;
border-bottom: 1px solid var(--color-primary);
transition: color var(--transition-fast);
}
.markdown-body a:hover {
color: var(--color-primary);
}
.markdown-body hr {
border: none;
border-top: 1px solid var(--color-border);
margin: 2rem 0;
}