やってみる

アウトプットすべく己を導くためのブログ。その試行錯誤すらたれ流す。

📌 ？
トップ > C# > Raspbian stretch MonoDevelop Eto.Forms Code Markdownパーサ markdig を使ってみた

Raspbian stretch MonoDevelop Eto.Forms Code Markdownパーサ markdig を使ってみた

C#

　テーブルもコードも変換できた！

成果物

対象環境

前回

　前回はテーブルやコードを変換できなかった。

手順

  1. プロジェクト作成
  2. NuGetでMarkdownパーサを追加
  3. デフォルトのMarkdownファイル作成
  4. ソースコード作成
  5. 実行

1. プロジェクト作成

  1. MonoDevelopを起動する
  2. メニュー→ファイル→新しいソリューション
    f:id:ytyaru:20181201194454p:plain
  3. マルチプラットフォーム→アプリ→Eto Application f:id:ytyaru:20181202083840p:plain
  4. 名前などを適当に入力し、Codeを選択する
    f:id:ytyaru:20181202083922p:plain
  5. 場所を入力する
    f:id:ytyaru:20181201194509p:plain
  6. プロジェクトが作成される
    f:id:ytyaru:20181202084143p:plain

2. NuGetでMarkdownパーサを追加

  1. メニュー→プロジェクト→NuGet パッケージの追加
    f:id:ytyaru:20181201194958p:plain
  2. パッケージを追加ダイアログから欲しいパッケージを探す
    f:id:ytyaru:20181201195154p:plain
  3. 検索窓にmarkdigと入力して絞り込む
    f:id:ytyaru:20181205111024p:plain
  4. Markdigを選択する
  5. パッケージを追加ボタンをクリックする

　以下のように拡張もあるらしい。今回はまだ使わない。

  • Markdig
  • Markdig.SyntaxHighLighting
  • Markdig.Signed

Markdig.SyntaxHighLightingなどはインストールできず

Package Markdig.SyntaxHighlighting 1.1.7 is not compatible with netstandard1.6 (.NETStandard,Version=v1.6). Package Markdig.SyntaxHighlighting 1.1.7 supports: portable45-net45+win8+wp8+wpa81 (.NETPortable,Version=v4.5,Profile=Profile259)

　MonoDevelopでは.NETStandard,Version=v1.6.を使っているが、Markdig.SyntaxHighlightingは.NETPortable,Version=v4.5を必要としているってことかな？　Windowsネイティブのライブラリなのか？　だったら使えない……。残念。

3. デフォルトのMarkdownファイル作成

  1. .Desktopでないプロジェクトを右クリック
  2. XMLファイルを追加する
  3. ファイル名はDefault.mdなどにする
  4. ファイル内容は以下など任意にする
<feff># タイトル

## 箇条書き

* 箇条書き
* 箇条書き２

## 箇条書き（順序付き）

1. [Google](https://www.google.co.jp)
1. https://www.yahoo.co.jp
1. [https://www.yahoo.co.jp]

## テーブル

ABC|DEF
---|---
aaa|bbb
ccc|ddd

## ソースコード

\`\`\`python
import pathlib
print("ABC")
\`\`\`

## 引用

> なんか引用。

　Markdown内でソースコード``（バッククォート3つ）を表現できなかったので適当にエスケープ文字としてバックスラッシュ`を埋めといた。\を削除することで正しいコードとなる。

4. ソースコード作成

MainForm.cs

using System;
using System.IO;
using Eto.Forms;
using Eto.Drawing;
using Markdig;

namespace HelloMarkdown
{
    public partial class MainForm : Form
    {
        RichTextArea richTextAreaMd;
        RichTextArea richTextAreaHtml;
        WebView previewer;
        Markdig.MarkdownPipeline pipeline = new MarkdownPipelineBuilder().UseAdvancedExtensions().Build();

        public MainForm()
        {
            Title = "Markdown Previewer";
            ClientSize = new Size(1024, 768);
            Create();
        }
        private void Create()
        {
            richTextAreaMd = new RichTextArea() { Width=320, Height=600 };
            richTextAreaHtml = new RichTextArea() { Width=320, Height=600 };
            previewer = new WebView() { Width=320, Height=600 };

            richTextAreaMd.Focus();
            richTextAreaMd.TextChanged += (object sender, EventArgs e) =>
            {
                richTextAreaHtml.Text = Markdig.Markdown.ToHtml((sender as RichTextArea).Text, pipeline);
                previewer.LoadHtml(richTextAreaHtml.Text);
            };
            richTextAreaMd.Text = new StreamReader(new FileStream("/tmp/work/Projects/HelloMarkdown/HelloMarkdown/HelloMarkdown/DefaultMarkdown.md", FileMode.Open)).ReadToEnd();
            
            Content = new TableLayout
            {
                Padding = 0, // padding around cells
                Spacing = new Size(0, 0), // spacing between each cell
                Rows =
                {
                    new TableRow(richTextAreaMd, richTextAreaHtml, previewer),
                }
            };
        }
    }
}

3. 実行

  1. Ctrl+F5で実行
  2. 怒られた
    f:id:ytyaru:20181202084218p:plain
  3. ファイルパスを辿ってexeファイルを直接叩くと実行できた
    f:id:ytyaru:20181202084343p:plain
    f:id:ytyaru:20181205111448p:plain

　テーブルやソースコードもパースできてる！　やったね！