Add support for Markdown with syntax highlighting

Website/ViewModels/BlogPostViewModel.cs

@@ -1,4 +1,6 @@
 using System;
+using Markdig;
+using Markdig.SyntaxHighlighting;
 using Website.Models;
 
 namespace Website.ViewModels
@@ -8,12 +10,21 @@ namespace Website.ViewModels
 		public BlogPostViewModel(BlogPost blogPost)
 		{
 			Title = blogPost.Title;
-			Content = blogPost.Content;
+			Content = Markdown.ToHtml(blogPost.Content).Trim();
 			Timestamp = blogPost.Timestamp;
 			Url = blogPost.Url;
+
+			Content = Markdown.ToHtml(blogPost.Content, GetPipeline()).Trim();
 		}
 
-		public string Title { get; private set; }
+		private MarkdownPipeline GetPipeline()=>new MarkdownPipelineBuilder()
+				//.UseAdvancedExtensions()
+				.UseAutoLinks()
+				.UseSoftlineBreakAsHardlineBreak()
+				.UseSyntaxHighlighting()
+				.Build();
+
+	public string Title { get; private set; }
 		public string Content { get; private set; }
 		public DateTime Timestamp { get; private set; }
 		public string Url { get; private set; }

Website/Views/Home/Index.cshtml

@@ -14,6 +14,6 @@
 <hr />
 <h2>Latest Blog Post</h2>
 <h3><a href="/blog/view/@Model.Url">@Model.Title</a></h3>
-@Model.Content
+@Html.Raw(Model.Content)
 <small>Posted on @Model.Timestamp.ToString()</small>
 <p><a href="/blog/view/@Model.Url>">Read more...</a></p>

Website/Website.csproj

@@ -10,6 +10,8 @@
     <PackageReference Include="BuildBundlerMinifier" Version="2.9.406" />
     <PackageReference Include="dapper" Version="1.60.9" />
     <PackageReference Include="dapper.contrib" Version="1.60.1" />
+    <PackageReference Include="markdig" Version="0.16.0" />
+    <PackageReference Include="Markdig.SyntaxHighlighting" Version="1.1.7" />
     <PackageReference Include="Microsoft.AspNetCore.App" />
     <PackageReference Include="Microsoft.AspNetCore.Razor.Design" Version="2.2.0" PrivateAssets="All" />
     <PackageReference Include="mysqlconnector" Version="0.52.0" />

Website/wwwroot/css/blog.less

@@ -1,29 +1,17 @@
 @import "colours.less";
 
-.code {
-    border: 4px solid @control;
-    background: @control2;
+.editor-colors {
+    border: 4px solid #fff;
+    background: #fff;
     border-radius: 4px;
-    margin: 0;
+    margin-bottom: 10px;
     overflow: auto;
+    padding: 6px;
 
-    ol {
-        list-style-position: inside;
-        padding: 0;
+    pre {
         margin: 0;
-    }
-
-    li {
-        background: @control;
-        padding: 1px;
-
-        >div {
-            display: inline;
-        }
-
-        &:nth-child(2n) {
-            background: @control2;
-        }
+        tab-size: 4;
+        -moz-tab-size: 4;
     }
 }