やってみる

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

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

 一旦XAML、MVVMは諦めた。C#オンリー、イベント駆動で行く。すると超順調に書けてコードも短くわかりやすい。

成果物

対象環境

前回

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. 検索窓にmarkdownと入力して絞り込む
    f:id:ytyaru:20181205092959p:plain
  4. パッケージを追加ボタンをクリックする

 2018-12-05時点ではMarkdownというパッケージが一番目に出てくる。Stack Flowのサイトにて作られたものらしい。ググると大抵こいつがC#Markdownパーサとして出てくる有名所。

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

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

## 箇条書き

* 箇条書き
* 箇条書き2

## 箇条書き(順序付き)

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 HeyRed.MarkdownSharp;
namespace HelloMarkdown
{
    public partial class MainForm : Form
    {
        RichTextArea richTextAreaMd;
        RichTextArea richTextAreaHtml;
        WebView previewer;
        HeyRed.MarkdownSharp.Markdown mdParser = new Markdown();
        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 = mdParser.Transform((sender as RichTextArea).Text);
                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),
                }
            };
        }
    }
}
  • Markdownパーサの名前空間HeyRed.MarkdownSharpがわからなかったので、1文字ずつキーを打ってインテリセンスを出し、SystemやEto以外の見慣れないものを探し出した。一発で名前空間を調べる方法はないものか

3. 実行

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

 テーブルやソースコードが全然パースできていない……。これらは大抵、Markdown拡張機能となっている。が、それっぽいのは見つけられなかった。自力で実装するしかないのか? 大変すぎるぞ……。別のパーサを探すか。