Using Markdown in ASP.NET (Core)

How to use Markdown – it might take you days to figure out, but reading my article or downloading the source code, you can get it done within 10 minutes. Let me first introduce it to you:

Markdown is a lightweight markup language that allows people to write documents using easy-to-read and easy-to-write plain text format. Markdown was created by John Gruber in 2004. Documents written in Markdown can be exported to HTML, Word, images, PDF, Epub, and many other formats. As it becomes more and more popular, our website naturally cannot fall behind. So let me teach you how to configure and use it!

The final effect is as follows:

1. First, reference the Markdown related library files ( Open source project address )

<link href="~/Lib/MarkDown/css/editormd.css" rel="stylesheet" />
<link href="~/Lib/MarkDown/css/editormd.preview.css" rel="stylesheet" />
<script src="~/Lib/MarkDown/js/editormd.js"></script>

2. Add the editor in HTML (To load data, just place it inside the textarea tag and it will be loaded into the editor)

<div id="test-editormd">
  <textarea id="articleContent" style="display: none;">
@Html.Raw(Model.Context)</textarea
  >
</div>

3. Set up initialization (Image upload is not covered here for now; if you want to learn about it, please see my later blog posts)

$(function () {
  testEditor = editormd("test-editormd", {
    width: "99%",
    height: 640,
    syncScrolling: "single",
    path: "/Lib/MarkDown/lib/",
    saveHTMLToTextarea: true,
    emoji: true,
  });
});

4. Get data and save

function btnSave() {
  alert("HTML data: " + testEditor.getHTML());
  alert("Markdown data: " + testEditor.getMarkdown());
  // Save as needed – just store the text.
}

Related recommendations:

1. Configuring and using the MarkDown rich text editor in ASP.NET Core to implement image upload and screenshot upload ( Open source code .NET Core 3.0 )

2. How to load template files in the MarkDown rich text editor: Link

Open source address Give it a star, click recommend!

Note: Our Jiyuwu project will continue to provide various useful ASP.NET Core demos for the long term, aiming to help .NET developers improve competitiveness and development speed. It is recommended to bookmark this template collection project as soon as possible.