Merge pull request #3771 from abpframework/blog-Code-blocks-highlight

blog: Code blocks highlighed

modules/blogging/src/Volo.Blogging.Web/BloggingWebModule.cs

@@ -4,10 +4,12 @@ using Microsoft.Extensions.Options;
 using Volo.Abp.AspNetCore.Mvc.Localization;
 using Volo.Abp.AspNetCore.Mvc.UI.Bootstrap;
 using Volo.Abp.AspNetCore.Mvc.UI.Bundling;
+using Volo.Abp.AspNetCore.Mvc.UI.Packages.Prismjs;
 using Volo.Abp.AutoMapper;
 using Volo.Abp.Modularity;
 using Volo.Abp.UI.Navigation;
 using Volo.Abp.VirtualFileSystem;
+using Volo.Blogging.Bundling;
 using Volo.Blogging.Localization;
 
 namespace Volo.Blogging
@@ -51,6 +53,17 @@ namespace Volo.Blogging
                 options.AddProfile<AbpBloggingWebAutoMapperProfile>(validate: true);
             });
 
+            Configure<AbpBundleContributorOptions>(options =>
+            {
+                options
+                    .Extensions<PrismjsStyleBundleContributor>()
+                    .Add<PrismjsStyleBundleContributorBloggingExtension>();
+
+                options
+                    .Extensions<PrismjsScriptBundleContributor>()
+                    .Add<PrismjsScriptBundleContributorBloggingExtension>();
+            });
+
             Configure<RazorPagesOptions>(options =>
             {
                 var urlOptions = context.Services

modules/blogging/src/Volo.Blogging.Web/Bundling/PrismjsScriptBundleContributorBloggingExtension.cs

@@ -0,0 +1,20 @@
+using System;
+using System.Collections.Generic;
+using System.Linq;
+using System.Threading.Tasks;
+using Volo.Abp.AspNetCore.Mvc.UI.Bundling;
+
+namespace Volo.Blogging.Bundling
+{
+    public class PrismjsScriptBundleContributorBloggingExtension : BundleContributor
+    {
+        public override void ConfigureBundle(BundleConfigurationContext context)
+        {
+            context.Files.AddIfNotContains("/libs/prismjs/plugins/toolbar/prism-toolbar.js");
+            context.Files.AddIfNotContains("/libs/prismjs/plugins/show-language/prism-show-language.js");
+            context.Files.AddIfNotContains("/libs/prismjs/plugins/copy-to-clipboard/prism-copy-to-clipboard.js");
+            context.Files.AddIfNotContains("/libs/prismjs/plugins/line-highlight/prism-line-highlight.js");
+            context.Files.AddIfNotContains("/libs/prismjs/components/prism-csharp.js");
+        }
+    }
+}

modules/blogging/src/Volo.Blogging.Web/Bundling/PrismjsStyleBundleContributorBloggingExtension.cs

@@ -0,0 +1,17 @@
+using System;
+using System.Collections.Generic;
+using System.Linq;
+using System.Threading.Tasks;
+using Volo.Abp.AspNetCore.Mvc.UI.Bundling;
+
+namespace Volo.Blogging.Bundling
+{
+    public class PrismjsStyleBundleContributorBloggingExtension : BundleContributor
+    {
+        public override void ConfigureBundle(BundleConfigurationContext context)
+        {
+            context.Files.AddIfNotContains("/libs/prismjs/plugins/line-highlight/prism-line-highlight.css");
+            context.Files.AddIfNotContains("/libs/prismjs/plugins/toolbar/prism-toolbar.css");
+        }
+    }
+}

modules/blogging/src/Volo.Blogging.Web/Pages/Blogs/BloggingPage.cs

@@ -2,12 +2,12 @@
 using System.Linq;
 using System.Text;
 using System.Text.RegularExpressions;
-using CommonMark;
 using Microsoft.AspNetCore.Html;
 using Microsoft.AspNetCore.Mvc.Localization;
 using Microsoft.AspNetCore.Mvc.Razor.Internal;
 using Volo.Abp.AspNetCore.Mvc.UI.RazorPages;
 using Volo.Blogging.Localization;
+using Markdig;
 
 namespace Volo.Blogging.Pages.Blog
 {
@@ -32,7 +32,7 @@ namespace Volo.Blogging.Pages.Blog
 
         public string GetShortContent(string content) 
         {
-            var html = RenderMarkdownToString(content);
+            var html = RenderMarkdownToHtmlAsString(content);
             var plainText = Regex.Replace(html, "<[^>]*>", "");
 
             if (string.IsNullOrWhiteSpace(plainText))
@@ -65,26 +65,37 @@ namespace Volo.Blogging.Pages.Blog
             {
                 return new HtmlString("");
             }
-            
-            byte[] bytes = Encoding.Default.GetBytes(content);
-            var utf8Content = Encoding.UTF8.GetString(bytes);
 
-            var html = CommonMarkConverter.Convert(utf8Content);
+            var html = RenderMarkdownToHtmlAsString(content);
+
+            html = ReplaceCodeBlocksLanguage(
+                html,
+                "language-C#",
+                "language-csharp"
+            );
 
             return new HtmlString(html);
         }
 
-        public string RenderMarkdownToString(string content)
+        protected string ReplaceCodeBlocksLanguage(string content, string currentLanguage, string newLanguage)
+        {
+            return Regex.Replace(content, "<code class=\"" + currentLanguage + "\">", "<code class=\"" + newLanguage + "\">", RegexOptions.IgnoreCase);
+        }
+
+        public string RenderMarkdownToHtmlAsString(string content)
         {
             if (content.IsNullOrWhiteSpace())
             {
                 return "";
             }
 
-            byte[] bytes = Encoding.Default.GetBytes(content);
+            return Markdig.Markdown.ToHtml(Encoding.UTF8.GetString(Encoding.Default.GetBytes(content)),
-            var utf8Content = Encoding.UTF8.GetString(bytes);
+                new MarkdownPipelineBuilder()
-
+                    .UseAutoLinks()
-            return CommonMarkConverter.Convert(utf8Content);
+                    .UseBootstrap()
+                    .UseGridTables()
+                    .UsePipeTables()
+                    .Build());
         }
 
         public LocalizedHtmlString ConvertDatetimeToTimeAgo(DateTime dt)

modules/blogging/src/Volo.Blogging.Web/Pages/Blogs/Posts/Detail.cshtml

@@ -6,6 +6,7 @@
 @using Volo.Blogging
 @using Volo.Blogging.Pages.Blog.Posts
 @using Volo.Blogging.Areas.Blog.Helpers.TagHelpers
+@using Volo.Abp.AspNetCore.Mvc.UI.Packages.Prismjs
 @inject IAuthorizationService Authorization
 @model DetailModel
 @{
@@ -15,11 +16,13 @@
 }
 @section scripts {
     <abp-script-bundle name="@typeof(DetailModel).FullName">
+        <abp-script type="@typeof(PrismjsScriptBundleContributor)" />
         <abp-script src="/Pages/Blogs/Posts/detail.js" />
     </abp-script-bundle>
 }
 @section styles {
     <abp-style-bundle name="@typeof(DetailModel).FullName">
+        <abp-script type="@typeof(PrismjsStyleBundleContributor)" />
         <abp-style src="/Pages/Blogs/Shared/Styles/blog.css" />
     </abp-style-bundle>
 }
@@ -85,7 +88,7 @@
                 </section>
             </div>
         </div>
-        
+
         <div class="row">
             <div class="col-10 col-md-8 col-lg-7 mx-auto">
                 <section class="post-content">
@@ -95,7 +98,7 @@
                 </section>
             </div>
         </div>
-    
+
         <div class="row">
             <div class="col-10 col-md-8 col-lg-7 mx-auto">
                 <hr />

modules/blogging/src/Volo.Blogging.Web/Volo.Blogging.Web.csproj

@@ -1,4 +1,4 @@
-<Project Sdk="Microsoft.NET.Sdk.Web">
+<Project Sdk="Microsoft.NET.Sdk.Web">
 
   <Import Project="..\..\..\..\configureawait.props" />
   <Import Project="..\..\..\..\common.props" />
@@ -19,7 +19,7 @@
     <ProjectReference Include="..\..\..\..\framework\src\Volo.Abp.AspNetCore.Mvc.UI.Bundling\Volo.Abp.AspNetCore.Mvc.UI.Bundling.csproj" />
     <ProjectReference Include="..\..\..\..\framework\src\Volo.Abp.AutoMapper\Volo.Abp.AutoMapper.csproj" />
     <ProjectReference Include="..\Volo.Blogging.HttpApi\Volo.Blogging.HttpApi.csproj" />
-    <PackageReference Include="CommonMark.NET" Version="0.15.1" />
+    <PackageReference Include="Markdig.Signed" Version="0.18.0" />
   </ItemGroup>
 
   <ItemGroup>

npm/packs/blogging/package.json

@@ -7,7 +7,8 @@
   "dependencies": {
     "@abp/aspnetcore.mvc.ui.theme.shared": "^2.6.2",
     "@abp/owl.carousel": "^2.6.2",
-    "@abp/tui-editor": "^2.6.2"
+    "@abp/tui-editor": "^2.6.2",
+    "@abp/prismjs": "^2.6.2"
   },
   "gitHead": "eb4a0e507f492e275865b72caeb02ce28d69ae56"
 }