From 19818ef69e186b2a79a385fad29a2f32961aaf92 Mon Sep 17 00:00:00 2001
From: Robert Marshall <rob@robware.uk>
Date: Sun, 28 Apr 2019 09:06:59 +0100
Subject: [PATCH] Add support for Markdown with syntax highlighting

---
 .../VIewModels/BlogPostViewModelTests.cs      | 22 +++++++++++++++
 Website/ViewModels/BlogPostViewModel.cs       | 15 ++++++++--
 Website/Views/Home/Index.cshtml               |  2 +-
 Website/Website.csproj                        |  2 ++
 Website/wwwroot/css/blog.less                 | 28 ++++++-------------
 5 files changed, 46 insertions(+), 23 deletions(-)
 create mode 100644 Website.Tests/VIewModels/BlogPostViewModelTests.cs

diff --git a/Website.Tests/VIewModels/BlogPostViewModelTests.cs b/Website.Tests/VIewModels/BlogPostViewModelTests.cs
new file mode 100644
index 0000000..f2f400e
--- /dev/null
+++ b/Website.Tests/VIewModels/BlogPostViewModelTests.cs
@@ -0,0 +1,22 @@
+using FluentAssertions;
+using NSubstitute;
+using Website.Data.States;
+using Website.Models;
+using Website.ViewModels;
+using Xunit;
+
+namespace Website.Tests.VIewModels
+{
+	public class BlogPostViewModelTests
+	{
+		[Fact]
+		public void Content_WithMarkdownContent_ReturnsHtml() {
+			var state = new BlogPostState {
+				Post_Content="# header"
+			};
+			var post = new BlogPost(state);
+			var vm = new BlogPostViewModel(post);
+			vm.Content.Should().Be("<h1>header</h1>");
+		}
+	}
+}
\ No newline at end of file
diff --git a/Website/ViewModels/BlogPostViewModel.cs b/Website/ViewModels/BlogPostViewModel.cs
index 91df4f3..73c42f9 100644
--- a/Website/ViewModels/BlogPostViewModel.cs
+++ b/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; }
diff --git a/Website/Views/Home/Index.cshtml b/Website/Views/Home/Index.cshtml
index 5fca93b..fbd8ffd 100644
--- a/Website/Views/Home/Index.cshtml
+++ b/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>
\ No newline at end of file
diff --git a/Website/Website.csproj b/Website/Website.csproj
index be2995d..7fdcf19 100644
--- a/Website/Website.csproj
+++ b/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" />
diff --git a/Website/wwwroot/css/blog.less b/Website/wwwroot/css/blog.less
index 005c1c3..04ad0ea 100644
--- a/Website/wwwroot/css/blog.less
+++ b/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;
     }
 }