Use highlightjs for syntaxhighlighting (fixes #3)

linkdotnet · linkdotnet · commit d4231ea9fa5d · 2021-07-04T11:59:08.000+02:00
diff --git a/LinkDotNet.Blog.Web/Pages/BlogPostPage.razor b/LinkDotNet.Blog.Web/Pages/BlogPostPage.razor
@@ -2,6 +2,7 @@
 @using LinkDotNet.Domain
 @using LinkDotNet.Infrastructure.Persistence
 @inject IRepository _repository
+@inject IJSRuntime _jsRuntime
 @inherits MarkdownComponentBase
 
 @if (BlogPost == null)
@@ -38,4 +39,13 @@ else
     {
         BlogPost = await _repository.GetByIdAsync(BlogPostId);
     }
+
+    protected override async Task OnAfterRenderAsync(bool firstRender)
+    {
+        if (firstRender)
+        {
+            await _jsRuntime.InvokeVoidAsync("hljs.highlightAll");
+            StateHasChanged();
+        }
+    }
 }
diff --git a/LinkDotNet.Blog.Web/Pages/_Host.cshtml b/LinkDotNet.Blog.Web/Pages/_Host.cshtml
@@ -26,7 +26,7 @@
     <link href="css/site.css" rel="stylesheet"/>
     <link href="LinkDotNet.Blog.Web.styles.css" rel="stylesheet"/>
     <link href="_content/Blazored.Toast/blazored-toast.min.css" rel="stylesheet" />
-    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" integrity="sha512-iBBXm8fW90+nuLcSKlbmrPcLa0OT92xO1BIsZ+ywDWZCvqsWgccV3gFoRBv0z+8dLJgyAHIhR35VZc2oM/gI1w==" crossorigin="anonymous" referrerpolicy="no-referrer" />
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.0.1/styles/monokai.min.css" integrity="sha512-RLF8eOxhuwsRINc7r56dpl9a3VStqrXD+udWahutJrYdyh++2Ghnf+s4jFsOyryKZt/GNjPwbXVPH3MJpKrn2g==" crossorigin="anonymous" referrerpolicy="no-referrer" />
 </head>
 <body>
 <component type="typeof(App)" render-mode="ServerPrerendered"/>
@@ -43,6 +43,8 @@
 </div>
 
 <script src="_framework/blazor.server.js"></script>
+<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.0.1/highlight.min.js" integrity="sha512-W7EehcwtSbRF63FIQlXEOOd5mnq0Et0V0nUOvwcUvjnCKgOLLYbqriQxEQSp63sfrkryxIg/A/O8v8O18QwQCQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
+<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.0.1/languages/csharp.min.js" integrity="sha512-2GO++5/u4InQ3/o7fLh93nyZIzTFl7fYi7+RjP7pgxsXikSCRf5jjw8U8vQSfCfFolN8G8xAxct9696uVxtQSg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
 <script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/js/all.min.js" integrity="sha512-RXf+QSDCUQs5uwRKaDoXt55jygZZm2V++WUZduaU/Ui/9EGp3f/2KZVahFZBKGH0s774sd3HmrhUy+SgOFQLVQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
 </body>
 </html>
