完美：C# Blazor中顯示Markdown并添加

完美：C# Blazor中顯示Markdown并添加代碼高亮

天發了一篇介紹這個庫：C# Blazor中顯示Markdown文件，介紹怎么在Blazor中顯示Markdown內容的文章，文章內的代碼是沒有高亮的，思來相去，還是要做好，于是百度到這篇文章.NET C# Blazor 服務端渲染Markdown，現在渲染效果如下：

自認為應該是比較完美了，下面說說怎么做的。

一、準備工具

1.1 添加Markdown轉html包：Markdig

Markdig：Markdig 是一個快速、強大、符合CommonMark標準、可擴展的 .NET Markdown 處理器。

<PackageReference Include="Markdig" Version="0.27.0" />

1.2 引入Prism插件

此Prism非彼Prism，是一個JS插件：Prism 是一個輕量級、健壯且優雅的語法高亮庫。這是Dabblet的一個衍生項目。

在_Layout.cshtml的head中引入：

<head>
....
<!--重置瀏覽器樣式-->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/normalize.css@8.0.1/normalize.css">
<!--代碼塊主題-->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/prismjs@1.27.0/themes/prism-coy.min.css">
<!--工具欄插件-->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/prismjs@1.27.0/plugins/toolbar/prism-toolbar.min.css">
<!--行號插件-->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/prismjs@1.27.0/plugins/line-numbers/prism-line-numbers.min.css">
...
</head>
<body>
...
<!--prism核心js (用于渲染代碼塊)-->
<script src="https://cdn.jsdelivr.net/npm/prismjs@1.27.0/prism.min.js"></script>
<!--顯示代碼塊行號-->
<script src="https://cdn.jsdelivr.net/npm/prismjs@1.27.0/plugins/line-numbers/prism-line-numbers.min.js"></script>
<!--工具欄(一些插件的前置依賴)-->
<script src="https://cdn.jsdelivr.net/npm/prismjs@1.27.0/plugins/toolbar/prism-toolbar.min.js"></script>
<!--代碼塊顯示語言名稱-->
<script src="https://cdn.jsdelivr.net/npm/prismjs@1.27.0/plugins/show-language/prism-show-language.min.js"></script>
<!--復制代碼-->
<script src="https://cdn.jsdelivr.net/npm/prismjs@1.27.0/plugins/copy-to-clipboard/prism-copy-to-clipboard.min.js"></script>
<!--自動去cdn加載對應語言的代碼高亮js-->
<script src="https://cdn.jsdelivr.net/npm/prismjs@1.27.0/plugins/autoloader/prism-autoloader.min.js"></script>
</body>

二、使用

我將Markdown展示單獨提取成了組件MarkdownComponent.razor，將加載的Markdown文件相對路徑、需要鏈接的文章鏈接和源碼鏈接做成參數，方便后面其他工具復用，下面的代碼片段主要在這個文件內。

組件參數定義：

@code {
    [Parameter]
    public string LocalPostFilePath { get; set; }=null!;

    [Parameter]
    public string RemotePostUrl { get; set; }=null!;

    [Parameter]
    public string SourceCodeUrl { get; set; }=null!;
}

Markdown內容讀取，Markdown格式轉html在OnInitializedAsync()方法中定義：

protected override async Task OnInitializedAsync()
{
    var markdownData=await File.ReadAllTextAsync(LocalPostFilePath);

    // markdown 轉為 html
    var htmlData=Markdown.ToHtml(markdownData);

    // 轉為 prism 支持的語言標記（不是必須，可以刪除）
    htmlData=htmlData.Replace("language-golang", "language-go");

    // TODO: 使用 https://github.com/mganss/HtmlSanitizer 清洗html中的xss
    if (htmlData.Contains("<script") || htmlData.Contains("<link"))
    {
        _hasXss=true;
    }

    // 將 普通文本 轉為 可以渲染的html的類型
    _postHtmlContent=(MarkupString) htmlData;
}

最后一步，需要在組件完成后，調用Prism插件方法，寫在方法OnAfterRenderAsync(bool firstRender)中，這是做代碼高亮的關鍵代碼：

protected override async Task OnAfterRenderAsync(bool firstRender)
{
    await _jsRuntime.InvokeVoidAsync("Prism.highlightAll");
}

渲染相對來說就簡單了（只針對我們使用），見下面的代碼：

<div class="line-numbers">
    @{
        if (_hasXss)
        {
            @_postHtmlContent.ToString()
        }
        else
        {
            @_postHtmlContent
        }
    }
</div>

在IcoTool.razor調用該組件：

<MarkdownComponent
    LocalPostFilePath="wwwroot/2022/02/2022-02-22_02.md"
    RemotePostUrl="https://dotnet9.com/1715"
    SourceCodeUrl="https://github.com/dotnet9/dotnet9.com/blob/develop/src/Dotnet9.Tools.Web/Pages/Public/ImageTools/IcoTool.razor"/>

當然組件封裝看個人需求，大致思路是上面的，就不貼詳細代碼了，有興趣看看Dotnet9工具箱源碼。

參考文章：

.NET C# Blazor 服務端渲染Markdown

<div class="content">houdunren.com</div>
  <script>
    let con=prompt('請輸入要檢測的內容，支持正則')
    console.log("輸入內容：" + con);
    let reg=new RegExp(con,'g')
    let div=document.querySelector('div');
    div.innerHTML=div.innerHTML.replace(reg,search=>{
      return `<span style="color:red">${search}</span>`
    })
  </script>

、前言

1.1、時代的眼淚

在建站初期一直使用富文本默認的樣式，其中在代碼部分的展示對閱讀造成了很大的困擾，

故此，在近期有對文章明細中代碼樣式部分進行改造，在之前是單調的灰色塊，如下：

改造后無論是從格式還是樣式都有了質的飛躍，和使用IDE的情況很接近了。

1.2、當世的英雄

下面我就把整個的改造過程分享給大家，希望能有些幫助。

二、Prims實現代碼高亮

2.1、什么是Prism

簡單來說，Prism.js是一個輕量級的代碼著色器，可以使Html中的代碼像IDE中一樣對背景色，語法，關鍵字做出高亮處理。

附上其官網：https://prismjs.com/

2.2、如何下載Prism

以我目前適用的Nuxt為例：

在官網的download下我們可以看到有語言、核心庫、主題、插件三大項讓用戶去自定義選擇，如下：

2.2、引入JS和CSS

以我的Nuxt項目為例，在頁面用配置Head屬性如下：


         head() {
            return {
              title: this.articleTitle + "-光慕華",
              link: [
                { rel: 'stylesheet', href: '/css/prism.css' }
              ],
              script: [
                { src: '/js/prism.js'},
                { src: '/js/jquery.min.js'}
              ]
            }
          },

Java

2.3、在Created鉤子函數中進行代碼高亮處理


        created(){    
              if (typeof window !=='undefined') {
                  setTimeout(()=>{
                    // 這里加定時器讓它后執行，不然沒效果
                    Prism.highlightAll() 
                  },200)
                }
          },

Java

三、寫在最后

選擇Prosm主要還是因為一下原因

① 支持豐富

② 可以根據需要自定義配置

③ 引入和使用簡單

希望本篇文章能對需要的人起到一定的幫助作用，加油！

在線咨詢

上一篇：火幣、幣安、OKEx，三大交易所這一年都干了啥？
下一篇：像許昕、劉子歌一樣逐夢吧，這所體育運動學校招生啦！

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商