diff --git a/TaxBaik.Web/Pages/Blog/Post.cshtml b/TaxBaik.Web/Pages/Blog/Post.cshtml index c27ea5a..9f2c9ec 100644 --- a/TaxBaik.Web/Pages/Blog/Post.cshtml +++ b/TaxBaik.Web/Pages/Blog/Post.cshtml @@ -39,8 +39,8 @@
-
- @Html.Raw(Model.Post.Content) +
+ @Html.Raw(Model.HtmlContent)

diff --git a/TaxBaik.Web/Pages/Blog/Post.cshtml.cs b/TaxBaik.Web/Pages/Blog/Post.cshtml.cs index 8c8935c..ddcb64a 100644 --- a/TaxBaik.Web/Pages/Blog/Post.cshtml.cs +++ b/TaxBaik.Web/Pages/Blog/Post.cshtml.cs @@ -1,6 +1,7 @@ using Microsoft.AspNetCore.Mvc.RazorPages; using TaxBaik.Application.Services; using TaxBaik.Domain.Entities; +using Markdig; namespace TaxBaik.Web.Pages.Blog; @@ -9,6 +10,7 @@ public class BlogPostModel : PageModel private readonly BlogService _blogService; public BlogPost? Post { get; set; } + public string? HtmlContent { get; set; } public BlogPostModel(BlogService blogService) { @@ -20,6 +22,7 @@ public class BlogPostModel : PageModel Post = await _blogService.GetBySlugAsync(slug); if (Post != null) { + HtmlContent = Markdown.ToHtml(Post.Content ?? ""); _ = _blogService.IncrementViewCountAsync(Post.Id); } } diff --git a/TaxBaik.Web/TaxBaik.Web.csproj b/TaxBaik.Web/TaxBaik.Web.csproj index 0af16c5..0e29d42 100644 --- a/TaxBaik.Web/TaxBaik.Web.csproj +++ b/TaxBaik.Web/TaxBaik.Web.csproj @@ -23,6 +23,7 @@ + diff --git a/TaxBaik.Web/wwwroot/css/site.css b/TaxBaik.Web/wwwroot/css/site.css index 8e7ed5b..1c131e3 100644 --- a/TaxBaik.Web/wwwroot/css/site.css +++ b/TaxBaik.Web/wwwroot/css/site.css @@ -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; +}