Markdownを表示するライブラリー MarkDig

2021-05-12
.md

こんにちはMAYURIです。 今ではドキュメントのスタンダートとなっているMarkdownを表示する方法を解説したいと思います。 ASP.NETでは複数のライブラリーがあるようですが、本日はMarkDigというライブラリーを使ってみます。

Markdown?

下記日本マークダウンユーザー会より

Markdown(マークダウン)は、文章の書き方です。デジタル文書を活用する方法として考案されました。特徴は、

手軽に文章構造を明示できること 簡単で、覚えやすいこと 読み書きに特別なアプリを必要としないこと それでいて、対応アプリを使えば快適に読み書きできること などです。Markdownはジョン・グルーバー(John Gruber)によって2004年に開発され、最初は Daring Fireball: Markdown で>公開されました。その後、多くの開発者の手を経ながら発展してきました。

http://www.markdown.jp/what-is-markdown/#markdown-1

まさにブログに向いているフォーマット。今回は公開しているCMSサービスでMarkdownを使えるようにしていきます。

Markdig

書きやすいMarkdownですが、やはり表記はHTMLにする必要があるため、変換するサービスが必要です。それが本日のトピックMarkDigです。 MarkDigを使うと簡単にMarkdownをHtmlに変換することができます。

MarkdigはこちらのGitを参照ください。利用方法も明記されています。 https://github.com/xoofx/markdig

またはNugetからも利用することができます。 https://www.nuget.org/packages/Markdig.Signed/

コード部分をハイライトしたい場合はエクステンションを利用することができます。今回利用しているエクステンションは下記です。 https://www.nuget.org/packages/Markdig.SyntaxHighlighting

使い方は簡単、下記のように変換したいコンテンツを引数で渡すだけ。

var pipeline = new MarkdownPipelineBuilder().UseAdvancedExtensions().UseSyntaxHighlighting().Build();
article.MarkdownText = Markdown.ToHtml(article.MarkdownText, pipeline);

Markdownの書き方

Markdownの書き方は既に色々なところで公開しているので改めてここでは記載しません。 

Qiitaを参照していただくがお勧めです。 https://qiita.com/Qiita/items/c686397e4a0f4f11683d

MarkdownとCSS

MarkdownがHtmlに変換されたあと、さらにカスタマイズをCSSで行っていきます。今回の記事のソースコード見てみると下記のようになっています。ここにCSSを当てていけばカスタマイズしていくことができます。

<p>こんにちはMAYURIです。 今ではドキュメントのスタンダートとなっているMarkdownを表示する方法を解説したいと思います。 ASP.NETでは複数のライブラリーがあるようですが、本日はMarkDigというライブラリーを使ってみます。</p>

<h1 id="markdown">Markdown?</h1>

<p>下記日本マークダウンユーザー会より</p>

<blockquote>
<p>Markdown(マークダウン)は、文章の書き方です。デジタル文書を活用する方法として考案されました。特徴は、</p>
<p>手軽に文章構造を明示できること
簡単で、覚えやすいこと
読み書きに特別なアプリを必要としないこと
それでいて、対応アプリを使えば快適に読み書きできること
などです。Markdownはジョン・グルーバー(John Gruber)によって2004年に開発され、最初は Daring Fireball: Markdown で&gt;公開されました。その後、多くの開発者の手を経ながら発展してきました。</p>
</blockquote>

<p><a href="http://www.markdown.jp/what-is-markdown/#markdown-1">http://www.markdown.jp/what-is-markdown/#markdown-1</a></p>

<p>まさにブログに向いているフォーマット。今回は公開しているCMSサービスでMarkdownを使えるようにしていきます。</p>

<h2 id="markdig">Markdig</h2>

<p>書きやすいMarkdownですが、やはり表記はHTMLにする必要があるため、変換するサービスが必要です。それが本日のトピックMarkDigです。 MarkDigを使うと簡単にMarkdownをHtmlに変換することができます。</p>

<p>MarkdigはこちらのGitを参照ください。利用方法も明記されています。

<a href="https://github.com/xoofx/markdig">https://github.com/xoofx/markdig</a></p>

<p>またはNugetからも利用することができます。

<a href="https://www.nuget.org/packages/Markdig.Signed/">https://www.nuget.org/packages/Markdig.Signed/</a></p>

<p>コード部分をハイライトしたい場合はエクステンションを利用することができます。今回利用しているエクステンションは下記です。
<a href="https://www.nuget.org/packages/Markdig.SyntaxHighlighting">https://www.nuget.org/packages/Markdig.SyntaxHighlighting</a></p>

<p>使い方は簡単、下記のように変換したいコンテンツを引数で渡すだけ。</p>

<div class="lang-csharp editor-colors"><div style="color:Black;background-color:White;"><pre>
<span style="color:Blue;">var</span> pipeline = <span style="color:Blue;">new</span> MarkdownPipelineBuilder().UseAdvancedExtensions().UseSyntaxHighlighting().Build();
article.MarkdownText = Markdown.ToHtml(article.MarkdownText, pipeline);
</pre></div>
</div>

<h1 id="markdown-1">Markdownの書き方</h1>

<p>Markdownの書き方は既に色々なところで公開しているので改めてここでは記載しません。 </p>

<p>Qiitaを参照していただくがお勧めです。
<a href="https://qiita.com/Qiita/items/c686397e4a0f4f11683d">https://qiita.com/Qiita/items/c686397e4a0f4f11683d</a></p>
<h1 id="markdowncss">MarkdownとCSS</h1>

<p>MarkdownがHtmlに変換されたあと、さらにカスタマイズをCSSで行っていきます。</p>
公開日: 2021-05-10