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

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

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

自認(rèn)為應(yīng)該是比較完美了，下面說說怎么做的。

一、準(zhǔn)備工具

1.1 添加Markdown轉(zhuǎn)html包：Markdig

Markdig：Markdig 是一個(gè)快速、強(qiáng)大、符合CommonMark標(biāo)準(zhǔn)、可擴(kuò)展的 .NET Markdown 處理器。

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

1.2 引入Prism插件

此Prism非彼Prism，是一個(gè)JS插件：Prism 是一個(gè)輕量級(jí)、健壯且優(yōu)雅的語法高亮庫。這是Dabblet的一個(gè)衍生項(xiàng)目。

在_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">
<!--行號(hào)插件-->
<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>
<!--顯示代碼塊行號(hào)-->
<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>
<!--復(fù)制代碼-->
<script src="https://cdn.jsdelivr.net/npm/prismjs@1.27.0/plugins/copy-to-clipboard/prism-copy-to-clipboard.min.js"></script>
<!--自動(dòng)去cdn加載對(duì)應(yīng)語言的代碼高亮js-->
<script src="https://cdn.jsdelivr.net/npm/prismjs@1.27.0/plugins/autoloader/prism-autoloader.min.js"></script>
</body>

二、使用

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

組件參數(shù)定義：

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

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

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

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

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

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

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

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

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

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

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

渲染相對(duì)來說就簡(jiǎn)單了（只針對(duì)我們使用），見下面的代碼：

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

在IcoTool.razor調(diào)用該組件：

<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"/>

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

參考文章：

.NET C# Blazor 服務(wù)端渲染Markdown

<div class="content">houdunren.com</div>
  <script>
    let con=prompt('請(qǐng)輸入要檢測(cè)的內(nèi)容，支持正則')
    console.log("輸入內(nèi)容：" + 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、時(shí)代的眼淚

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

故此，在近期有對(duì)文章明細(xì)中代碼樣式部分進(jìn)行改造，在之前是單調(diào)的灰色塊，如下：

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

1.2、當(dāng)世的英雄

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

二、Prims實(shí)現(xiàn)代碼高亮

2.1、什么是Prism

簡(jiǎn)單來說，Prism.js是一個(gè)輕量級(jí)的代碼著色器，可以使Html中的代碼像IDE中一樣對(duì)背景色，語法，關(guān)鍵字做出高亮處理。

附上其官網(wǎng)：https://prismjs.com/

2.2、如何下載Prism

以我目前適用的Nuxt為例：

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

2.2、引入JS和CSS

以我的Nuxt項(xiàng)目為例，在頁面用配置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鉤子函數(shù)中進(jìn)行代碼高亮處理


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

Java

三、寫在最后

選擇Prosm主要還是因?yàn)橐幌略?/p>

① 支持豐富

② 可以根據(jù)需要自定義配置

③ 引入和使用簡(jiǎn)單

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

在線咨詢

上一篇：火幣、幣安、OKEx，三大交易所這一年都干了啥？
下一篇：像許昕、劉子歌一樣逐夢(mèng)吧，這所體育運(yùn)動(dòng)學(xué)校招生啦！

您的項(xiàng)目需求

*請(qǐng)認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。

整合營(yíng)銷服務(wù)商