Chuyển đổi Markdown sang HTML trong template Razor của ASP.NET Core

Ngày cập nhật: 2024-09-06 | Số lần xem: 1151 | Số từ: 489 | Phân loại: Windows

Tôi đã quen sử dụng Markdown để ghi chú, vì vậy khi chỉnh sửa nội dung tôi thường dùng định dạng này. Tuy nhiên, trên website thì lại cần hiển thị dưới dạng HTML.

Vì lý do đó, tôi đã tìm kiếm một thư viện C# hỗ trợ chuyển đổi Markdown sang HTML. Tôi đã phát hiện ra thư viện Markdig:

Tuy nhiên, việc sử dụng trực tiếp thư viện này trong file Razor (.cshtml) của ASP.NET Core MVC không hề đơn giản – bạn phải tự bọc thêm logic xử lý. Điều này khá phức tạp và mất thời gian. Vì thế, tôi đã tiếp tục tìm kiếm và chọn một thư viện được bọc sẵn dựa trên Markdig:

Hỗ trợ Markdown cho ASP.NET Core

Để cài đặt thư viện, bạn có thể chạy lệnh sau:

1

dotnet.exe add package westwind.aspnetcore.markdown

Sau khi cài đặt thành công, bạn sẽ thấy trong file .csproj của dự án xuất hiện đoạn cấu hình mới như sau:

1
2
3

<ItemGroup>
  <PackageReference Include="westwind.aspnetcore.markdown" Version="3.21.0" />
</ItemGroup>

🔨 Sử dụng Westwind.AspNetCore.Markdown trong .NET 8.0

Lưu ý rằng các ví dụ minh họa trong tài liệu chính thức thường hướng dẫn cho ASP.NET Core 3.0, nhưng cú pháp trong .NET 8 đã thay đổi đáng kể. Tôi đã dành thời gian nghiên cứu một số dự án trên GitHub để hiểu cách tích hợp đúng.

Dưới đây là cách sử dụng trong .NET 8:

Program.cs

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17

using Westwind.AspNetCore.Markdown;

var builder = WebApplication.CreateBuilder(args);

// Thêm dịch vụ vào container
builder.Services.AddMarkdown();

// ...

var app = builder.Build();

// Phải cấu hình trước UseRouting()
app.UseMarkdown();
app.UseRouting();

// ...
app.Run();

Trong tệp Razor (.cshtml), ví dụ như Index.cshtml, bạn có thể gọi như sau:

1
2
3
4
5

@using Westwind.AspNetCore.Markdown

<div>
  @Markdown.ParseHtmlString("## Chào thế giới!")
</div>

✅ Kết quả là nội dung Markdown sẽ được chuyển đổi thành HTML và hiển thị trên trang web.

❎ Lỗi thường gặp

Một lỗi phổ biến xảy ra khi bạn quên import namespace của thư viện trong cả file .cs lẫn .cshtml. Ví dụ:

1

using Westwind.AspNetCore.Markdown;

và

1

@using Westwind.AspNetCore.Markdown

Nếu không làm như trên, bạn có thể gặp các lỗi như:

1
2
3

Program.cs(6,18): error CS1061: 'IServiceCollection' does not contain a definition for 'AddMarkdown' and no accessible extension method 'AddMarkdown' accepting a first argument of type 'IServiceCollection' could be found (are you missing a using directive or an assembly 
Program.cs(39,5): error CS1061: 'WebApplication' does not contain a definition for 'UseMarkdown' and no accessible extension method 'UseMarkdown' accepting a first argument of type 'WebApplication' could be found (are you missing a using directive or an assembly 
Index.cshtml(95,6): error CS0103: The name 'Markdown' does not exist in the current context

Khi bạn không sử dụng Visual Studio hoặc các IDE thông minh như VSCode với tính năng gợi ý tự động, thì những lỗi như trên dễ bị bỏ sót hơn.

🌍 Xử lý Markdown trong tài nguyên đa ngôn ngữ (I18N)

Giả sử bạn đang sử dụng tài nguyên đa ngôn ngữ (internationalization - I18N) trong dự án và lưu trữ nội dung bằng Markdown. Khi muốn hiển thị nội dung này qua Razor, bạn có thể gặp lỗi kiểu dữ liệu:

cannot convert from ‘Microsoft.AspNetCore.Mvc.Localization.LocalizedHtmlString’ to ‘string’

Nguyên nhân là vì phương thức ParseHtmlString() yêu cầu đầu vào là chuỗi string, nhưng Localizer["Content"] trả về đối tượng LocalizedHtmlString.

Cách giải quyết đúng là sử dụng thuộc tính .Value để ép kiểu:

1

@Markdown.ParseHtmlString(@Localizer["Content"].Value)

Hy vọng bài viết này giúp bạn hiểu rõ hơn về cách tích hợp và sử dụng Markdown trong ASP.NET Core Razor, cũng như tránh được những lỗi cơ bản khi làm việc với tài nguyên đa ngôn ngữ. Nếu bạn có bất kỳ câu hỏi nào, đừng ngần ngại chia sẻ nhé!