Cms Kit - Contents as markdown

modules/cms-kit/src/Volo.CmsKit.Admin.Web/Pages/CmsKit/BlogPosts/create.js

@@ -241,7 +241,7 @@
             },
             events: {
                 change: function (_val) {
-                    $editorInput.val(editor.getHtml());
+                    $editorInput.val(editor.getMarkdown());
                     $editorInput.trigger("change");
                 }
             }

modules/cms-kit/src/Volo.CmsKit.Admin.Web/Pages/CmsKit/BlogPosts/update.js

@@ -187,7 +187,7 @@
             },
             events: {
                 change: function (_val) {
-                    $editorInput.val(editor.getHtml());
+                    $editorInput.val(editor.getMarkdown());
                     $editorInput.trigger("change");
                 }
             }

modules/cms-kit/src/Volo.CmsKit.Admin.Web/Pages/CmsKit/Pages/create.js

@@ -95,7 +95,7 @@
             },
             events: {
                 change: function (_val) {
-                    $editorInput.val(editor.getHtml());
+                    $editorInput.val(editor.getMarkdown());
                     $editorInput.trigger("change");
                 }
             }

modules/cms-kit/src/Volo.CmsKit.Admin.Web/Pages/CmsKit/Pages/update.js

@@ -70,7 +70,7 @@
             },
             events: {
                 change: function (_val) {
-                    $editorInput.val(editor.getHtml());
+                    $editorInput.val(editor.getMarkdown());
                     $editorInput.trigger("change");
                 }
             }

modules/cms-kit/src/Volo.CmsKit.Public.Web/CmsKitPublicWebModule.cs

@@ -1,4 +1,5 @@
-using Microsoft.AspNetCore.Mvc.RazorPages;
+using Markdig;
+using Microsoft.AspNetCore.Mvc.RazorPages;
 using Microsoft.Extensions.DependencyInjection;
 using Volo.Abp.AspNetCore.Mvc.Localization;
 using Volo.Abp.AutoMapper;
@@ -55,6 +56,14 @@ public override void ConfigureServices(ServiceConfigurationContext context)
             {
                 options.AddMaps<CmsKitPublicWebModule>(validate: true);
             });
+
+            context.Services
+                .AddSingleton(_ => new MarkdownPipelineBuilder()
+                    .UseAutoLinks()
+                    .UseBootstrap()
+                    .UseGridTables()
+                    .UsePipeTables()
+                    .Build());
         }
 
         public override void PostConfigureServices(ServiceConfigurationContext context)

modules/cms-kit/src/Volo.CmsKit.Public.Web/Pages/CmsKit/Shared/Components/Pages/Default.cshtml

@@ -1,9 +1,14 @@
 @addTagHelper *, Volo.Abp.AspNetCore.Mvc.UI.Bootstrap
 
+@using Volo.CmsKit.Public.Web.Renderers
+@using Volo.Abp.AspNetCore.Mvc.UI.Packages.HighlightJs
+
+@inject IMarkdownToHtmlRenderer MarkdownRenderer
+
 @model Volo.CmsKit.Public.Web.Pages.CmsKit.Shared.Components.Pages.PageViewModel
 
 <abp-card>
     <abp-card-body>
-        @Html.Raw(Model.Content)
+        @Html.Raw(await MarkdownRenderer.RenderAsync(Model.Content))
     </abp-card-body>
 </abp-card>

modules/cms-kit/src/Volo.CmsKit.Public.Web/Pages/CmsKit/Shared/Components/Pages/DefaultPageViewComponent.cs

@@ -3,10 +3,25 @@
 using Microsoft.AspNetCore.Mvc;
 using Volo.Abp.AspNetCore.Mvc;
 using Volo.CmsKit.Public.Pages;
+using Volo.CmsKit.Public.Web.Renderers;
+using Volo.Abp.AspNetCore.Mvc.UI.Packages.HighlightJs;
+using Volo.Abp.AspNetCore.Mvc.UI.Widgets;
 
 namespace Volo.CmsKit.Public.Web.Pages.CmsKit.Shared.Components.Pages
 {
-    [ViewComponent(Name = "CmsDefaultPage")]
+    [Widget(
+        StyleTypes = new[]
+        {
+            typeof(HighlightJsStyleContributor)
+        },
+        ScriptTypes = new[]
+        {
+            typeof(HighlightJsScriptContributor)
+        },
+        ScriptFiles = new[]
+        {
+            "/Pages/Public/CmsKit/highlightOnLoad.js"
+        })]
     public class DefaultPageViewComponent : AbpViewComponent
     {
         protected IPagePublicAppService PagePublicAppService { get; }
@@ -15,7 +30,7 @@ public DefaultPageViewComponent(IPagePublicAppService pagePublicAppService)
         {
             PagePublicAppService = pagePublicAppService;
         }
-        
+
         public virtual async Task<IViewComponentResult> InvokeAsync(Guid pageId, string title, string content)
         {
             var model = new PageViewModel
@@ -24,15 +39,15 @@ public virtual async Task<IViewComponentResult> InvokeAsync(Guid pageId, string
                 Title = title,
                 Content = content
             };
-            
+
             return View("~/Pages/CmsKit/Shared/Components/Pages/Default.cshtml", model);
         }
     }
 
     public class PageViewModel
     {
         public Guid Id { get; set; }
-        
+
         public string Title { get; set; }
 
         public string Content { get; set; }

modules/cms-kit/src/Volo.CmsKit.Public.Web/Pages/Public/CmsKit/Blogs/BlogPost.cshtml

@@ -7,14 +7,27 @@
 @using Volo.CmsKit.Public.Web.Pages.CmsKit.Shared.Components.ReactionSelection
 @using Volo.CmsKit.Public.Web.Pages.CmsKit.Shared.Components.Rating
 @using Volo.CmsKit.Public.Web.Pages.CmsKit.Shared.Components.Tags
+@using Volo.CmsKit.Public.Web.Renderers
+@using Volo.Abp.AspNetCore.Mvc.UI.Packages.HighlightJs
 
 @inherits CmsKitPublicPageBase
 
 @model Volo.CmsKit.Public.Web.Pages.Public.CmsKit.Blogs.BlogPostModel
 
+@inject IMarkdownToHtmlRenderer MarkdownRenderer
 
 @section styles{
+<abp-abp-style-bundle>
     <abp-style src="/Pages/Public/CmsKit/Blogs/blogPost.css" />
+    <abp-style type="typeof(HighlightJsStyleContributor)" />
+</abp-abp-style-bundle>
+}
+
+@section scripts{
+<abp-script-bundle>
+    <abp-script type="typeof(HighlightJsScriptContributor)" />
+    <abp-script src="/Pages/Public/CmsKit/highlightOnLoad.js" />
+</abp-script-bundle>
 }
 
 @{
@@ -31,7 +44,9 @@
                     <span class="font-weight-bold">@@@Model.BlogPost.Author?.UserName</span>
                     <small style="opacity:.65;">@Model.BlogPost.CreationTime</small>
                 </p>
-                @Html.Raw(Model.BlogPost.Content)
+
+                @Html.Raw(await MarkdownRenderer.RenderAsync(Model.BlogPost.Content))
+
                 <p class="mb-3">
                     @if (Model.BlogPost.LastModificationTime != null)
                     {
@@ -45,10 +60,10 @@
                     if (Model.TagsFeature?.IsEnabled == true)
                     {
                         @await Component.InvokeAsync(typeof(TagViewComponent), new
-                        {
-                            entityType = Volo.CmsKit.Blogs.BlogPostConsts.EntityType,
-                            entityId = Model.BlogPost.Id.ToString()
-                        })
+                {
+                entityType = Volo.CmsKit.Blogs.BlogPostConsts.EntityType,
+                entityId = Model.BlogPost.Id.ToString()
+                })
                     }
                 }
             </div>
@@ -62,8 +77,8 @@
                     {
                         @await Component.InvokeAsync(typeof(ReactionSelectionViewComponent), new
                         {
-                            entityType = Volo.CmsKit.Blogs.BlogPostConsts.EntityType,
-                            entityId = Model.BlogPost.Id.ToString()
+                        entityType = Volo.CmsKit.Blogs.BlogPostConsts.EntityType,
+                        entityId = Model.BlogPost.Id.ToString()
                         })
                     }
                 }
@@ -76,8 +91,8 @@
                     {
                         @await Component.InvokeAsync(typeof(RatingViewComponent), new
                         {
-                            entityType = Volo.CmsKit.Blogs.BlogPostConsts.EntityType,
-                            entityId = Model.BlogPost.Id.ToString()
+                        entityType = Volo.CmsKit.Blogs.BlogPostConsts.EntityType,
+                        entityId = Model.BlogPost.Id.ToString()
                         })
                     }
                 }

modules/cms-kit/src/Volo.CmsKit.Public.Web/Pages/Public/CmsKit/Blogs/BlogPost.cshtml.cs

@@ -1,4 +1,5 @@
-using Microsoft.AspNetCore.Mvc;
+using Markdig;
+using Microsoft.AspNetCore.Mvc;
 using System;
 using System.Collections.Generic;
 using System.Linq;

modules/cms-kit/src/Volo.CmsKit.Public.Web/Pages/Public/CmsKit/Pages/Index.cshtml

@@ -2,11 +2,15 @@
 @using Microsoft.AspNetCore.Mvc.Localization
 @using Volo.CmsKit.Localization
 @using Volo.CmsKit.Public.Web.Pages.CmsKit.Shared.Components.Pages
+
 @model Volo.CmsKit.Public.Web.Pages.Public.CmsKit.Pages.IndexModel
+
 @inject IHtmlLocalizer<CmsKitResource> L
 
 @section styles{
+
     <abp-style src="/Pages/Public/CmsKit/Pages/index.css" />
+
     <style>
         @Html.Raw(Model.Page.Style)
     </style>

modules/cms-kit/src/Volo.CmsKit.Public.Web/Pages/Public/CmsKit/highlightOnLoad.js

@@ -0,0 +1,8 @@
+$(function () {
+
+    document.querySelectorAll('code').forEach(block => {
+        $(block).addClass('hljs'); // Put in gray box even language is not supported
+        hljs.highlightBlock(block);
+    });
+
+})

modules/cms-kit/src/Volo.CmsKit.Public.Web/Renderers/IMarkdownToHtmlRenderer.cs

@@ -0,0 +1,9 @@
+using System.Threading.Tasks;
+
+namespace Volo.CmsKit.Public.Web.Renderers
+{
+    public interface IMarkdownToHtmlRenderer
+    {
+        Task<string> RenderAsync(string rawMarkdown);
+    }
+}

modules/cms-kit/src/Volo.CmsKit.Public.Web/Renderers/MarkdownToHtmlRenderer.cs

@@ -0,0 +1,22 @@
+using Markdig;
+using System.Threading.Tasks;
+using Volo.Abp.DependencyInjection;
+
+namespace Volo.CmsKit.Public.Web.Renderers
+{
+    public class MarkdownToHtmlRenderer : IMarkdownToHtmlRenderer, ITransientDependency
+    {
+        protected MarkdownPipeline MarkdownPipeline { get; }
+
+        public MarkdownToHtmlRenderer(MarkdownPipeline markdownPipeline)
+        {
+            MarkdownPipeline = markdownPipeline;
+        }
+
+        public Task<string> RenderAsync(string rawMarkdown)
+        {
+            return Task.FromResult(
+                Markdown.ToHtml(rawMarkdown, MarkdownPipeline));
+        }
+    }
+}

modules/cms-kit/src/Volo.CmsKit.Public.Web/Volo.CmsKit.Public.Web.csproj

@@ -1,4 +1,4 @@
-<Project Sdk="Microsoft.NET.Sdk.Web">
+<Project Sdk="Microsoft.NET.Sdk.Web">
 
   <Import Project="..\..\..\..\common.props" />
   <Import Project="..\..\..\..\configureawait.props" />
@@ -16,6 +16,7 @@
     <ProjectReference Include="..\Volo.CmsKit.Common.Web\Volo.CmsKit.Common.Web.csproj" />
     <ProjectReference Include="..\Volo.CmsKit.Public.HttpApi\Volo.CmsKit.Public.HttpApi.csproj" />
     <PackageReference Include="Microsoft.Extensions.FileProviders.Embedded" Version="$(MicrosoftPackageVersion)" />
+    <PackageReference Include="Markdig.Signed" Version="0.24.0" />
   </ItemGroup>
 
   <ItemGroup>
@@ -29,9 +30,4 @@
     <Content Remove="Components\**\*.css" />
   </ItemGroup>
 
-  <ItemGroup>
-    <None Remove="Pages\Public\CmsKit\Blogs\index.css" />
-    <None Remove="Pages\Public\CmsKit\Pages\index.css" />
-  </ItemGroup>
-
 </Project>

npm/packs/cms-kit.public/package.json

@@ -5,7 +5,8 @@
     "access": "public"
   },
   "dependencies": {
-    "@abp/star-rating-svg": "~4.2.2"
+    "@abp/star-rating-svg": "~4.2.2",
+    "@abp/highlight.js": "~4.2.2"
   },
   "gitHead": "bb4ea17d5996f01889134c138d00b6c8f858a431"
 }