add: styles of code block and table.

YaeBlog.Core/Extensions/WebApplicationBuilderExtensions.cs

@@ -24,6 +24,8 @@ public static class WebApplicationBuilderExtensions
         builder.Services.AddSingleton<IEssayContentService, EssayContentService>(provider =>
             provider.GetRequiredService<EssayContentService>());
         builder.Services.AddTransient<ImagePostRenderProcessor>();
+        builder.Services.AddTransient<CodeBlockPostRenderProcessor>();
+        builder.Services.AddTransient<TablePostRenderProcessor>();
         builder.Services.AddTransient<BlogOptions>(provider =>
             provider.GetRequiredService<IOptions<BlogOptions>>().Value);
 

YaeBlog.Core/Extensions/WebApplicationExtensions.cs

@@ -8,11 +8,11 @@ namespace YaeBlog.Core.Extensions;
 
 public static class WebApplicationExtensions
 {
-    public static WebApplication UseMiddleRenderProcessors(this WebApplication application)
+    public static void UseYaeBlog(this WebApplication application)
     {
         application.UsePostRenderProcessor<ImagePostRenderProcessor>();
-
-        return application;
+        application.UsePostRenderProcessor<CodeBlockPostRenderProcessor>();
+        application.UsePostRenderProcessor<TablePostRenderProcessor>();
     }
 
     private static void UsePreRenderProcessor<T>(this WebApplication application) where T : IPreRenderProcessor

YaeBlog.Core/Processors/CodeBlockPostRenderProcessor.cs

@@ -0,0 +1,29 @@
+using AngleSharp;
+using AngleSharp.Dom;
+using YaeBlog.Core.Abstractions;
+using YaeBlog.Core.Models;
+
+namespace YaeBlog.Core.Processors;
+
+public class CodeBlockPostRenderProcessor : IPostRenderProcessor
+{
+    public async Task<BlogEssay> ProcessAsync(BlogEssay essay)
+    {
+        BrowsingContext context = new(Configuration.Default);
+        IDocument document = await context.OpenAsync(
+            req => req.Content(essay.HtmlContent));
+
+        IEnumerable<IElement> preElements = from e in document.All
+            where e.LocalName == "pre"
+            select e;
+
+        foreach (IElement element in preElements)
+        {
+            element.ClassList.Add("p-3 text-bg-secondary rounded-1");
+        }
+
+        return essay.WithNewHtmlContent(document.DocumentElement.OuterHtml);
+    }
+
+    public string Name => nameof(CodeBlockPostRenderProcessor);
+}

YaeBlog.Core/Processors/ImagePostRenderProcessor.cs

@@ -38,7 +38,7 @@ public class ImagePostRenderProcessor(ILogger<ImagePostRenderProcessor> logger,
         return essay.WithNewHtmlContent(html.DocumentElement.OuterHtml);
     }
 
-    public string Name => "ImagePostRenderProcessor";
+    public string Name => nameof(ImagePostRenderProcessor);
 
     private string GenerateImageLink(string filename, string essayFilename)
     {

YaeBlog.Core/Processors/TablePostRenderProcessor.cs

@@ -0,0 +1,34 @@
+using AngleSharp;
+using AngleSharp.Dom;
+using AngleSharp.Html.Dom;
+using YaeBlog.Core.Abstractions;
+using YaeBlog.Core.Models;
+
+namespace YaeBlog.Core.Processors;
+
+public class TablePostRenderProcessor: IPostRenderProcessor
+{
+    public async Task<BlogEssay> ProcessAsync(BlogEssay essay)
+    {
+        BrowsingContext browsingContext = new(Configuration.Default);
+        IDocument document = await browsingContext.OpenAsync(
+            req => req.Content(essay.HtmlContent));
+
+        IEnumerable<IHtmlTableElement> tableElements = from item in document.All
+            where item.LocalName == "table"
+            select item as IHtmlTableElement;
+
+        foreach (IHtmlTableElement element in tableElements)
+        {
+            IHtmlDivElement divElement = document.CreateElement<IHtmlDivElement>();
+            divElement.InnerHtml = element.OuterHtml;
+            divElement.ClassList.Add("py-2", "table-wrapper");
+
+            element.Replace(divElement);
+        }
+
+        return essay.WithNewHtmlContent(document.DocumentElement.OuterHtml);
+    }
+
+    public string Name => nameof(TablePostRenderProcessor);
+}

YaeBlog/Components/App.razor

@@ -19,6 +19,10 @@
 
 <script src="_framework/blazor.web.js"></script>
 <script src="bootstrap.bundle.min.js"></script>
+<script src="clipboard.min.js"></script>
+<script>
+    const clipboard = new ClipboardJS('.btn');
+</script>
 </body>
 
 </html>

YaeBlog/Program.cs

@@ -13,7 +13,7 @@ WebApplication application = builder.Build();
 
 application.UseStaticFiles();
 application.UseAntiforgery();
-application.UseMiddleRenderProcessors();
+application.UseYaeBlog();
 
 application.MapRazorComponents<App>()
     .AddInteractiveServerRenderMode();

YaeBlog/wwwroot/globals.css

@@ -1,18 +1,3 @@
-body a {
-    text-decoration: none;
-}
-
-body main {
-    flex: 1;
-    min-height: 100vh;
-    overflow-x: visible;
-}
-
-body p {
-    margin: 0;
-    margin-block: 0;
-}
-
 @font-face {
     font-family: "Font Awesome 6 Free";
     font-style: normal;
@@ -38,3 +23,59 @@ body p {
     border-radius: 4px;
     background-color: transparent;
 }
+
+.table-wrapper {
+    overflow-x: auto;
+}
+
+body a {
+    text-decoration: none;
+}
+
+body main {
+    flex: 1;
+    min-height: 100vh;
+    overflow-x: visible;
+}
+
+body p {
+    margin: 0;
+    margin-block: 1em;
+}
+
+h2, h3 {
+    margin-block-start: 1.5em;
+    margin-block-end: 1em;
+}
+
+h4, h5 {
+    margin-block-start: 1em;
+    margin-block-end: 1em;
+}
+
+table {
+    margin: 0 auto;
+    border-collapse: collapse;
+}
+
+table td {
+    padding: 3px 20px;
+    border: 1px var(--bs-border-color) solid;
+}
+
+table thead {
+    background: var(--bs-secondary-bg);
+}
+
+table thead td {
+    font-weight: 700;
+    border: none;
+}
+
+table thead th {
+    padding: 3px 20px;
+}
+
+table thead tr {
+    border: 1px var(--bs-border-color) solid;
+}