MVC开发Markdown编辑器（1）

MVC markdown

---

• MVC开发Markdown编辑器（1）
  • 前言
  • 安装
  • 解析
  • 结束语

前言

想在近段时间通过mvc开发个人博客,编辑器希望是markdown风格的,这样写文字会很方便。首先先解决在.net下markdown编辑器的实现,查了许多资料,有许多开源的markdown解析引擎,我暂且用的是在Nuget排名较高的Markdowndeep来解析,语法非常简单,几句代码轻松解析。

PS:接下来若出现mdd即代表MarkdownDeep

安装

在Nuget中通过Install-Package MarkdownDeep.Full命令来安装完整版的Markdowndeep

其中包括js版本和.net版本

或者通过Install-Package MarkdownDeep.NET命令来安装

只含安装.net版本

解析

安装完成后在Script文件中会加入几个mdd的包

MarkdownDeepLib.min.js是用来解析的,mdd_styles.css是默认的一些样式,通过js解析需要引入MarkdownDeepLib.min.js,css则可有可无

1. js解析mdd

   var markdown = new MarkdownDeep.Markdown();
   md.ExtraMode = true;
   md.SafeMode = true;
   md.MarkdownInHtml = true;
   var output = md.Transform(content);

   到此为止,解析完成。是不是很简单！
   
   第一行是生成一个markdown对象,第二到第四行设置一些属性,第五行解析输出
   
   PS:如果有谁对mmd比较了解希望能说明下mmd属性具体作用

2. .net解析mdd

   这里有两种方法

   1. 通过Nuget安装MarkdownDeepHelper,这是一个封装好的helper类,拿来直接在view中通过@Html.Markdown(something)来解析并返回MvcHtmlString
   2. 自己写个扩展方法实现MarkdownDeepHelper,两种方法其实都一样,因为代码量真的很少,.net的代码和js代码几乎完全一样。

   public static class MarkdownHelper
   {
       /// <summary>
       /// 生成一个私有静态实例
       /// </summary>
       private static Markdown markdown = new Markdown();
       /// <summary>
       /// 解析成Html并返回.
       /// </summary>
       /// <param name="helper">该方法扩展自HtmlHelper</param>
       /// <param name="text">需要被解析的字符串</param>
       /// <returns>The HTML representation of the supplied Markdown.</returns>
       public static IHtmlString Markdown(this HtmlHelper helper, string text)
       {
           // 通过Tranform方法解析字符串
           string html = markdown.Transform(text);
           markdown.ExtraMode = true;
           markdown.SafeMode = true;
           markdown.MarkdownInHtml = true;
           // 返回MvcHtmlString,防止被编码
           return new MvcHtmlString(html);
       }
   }

   在通过View中引入MarkdownHelper命名空间即可通过@Html.Markdown(something)解析 是不是和前者完全一样
   
   到此为止解析完成。

结束语

已经2点多了,实时预览放在下一次了。睡觉

PS:如果有哪些写的不对或不好的地方欢迎大家指点