やってみる

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

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

Raspbian stretch MonoDevelop Eto.Forms Code Markdown パーサ markdig の拡張 Markdig.SyntaxHighlighting を使ってみた

C#

　C#, C++, C, Java, JavaScript, Markdownはハイライトできたが、Python, Bashはできないことを確認した。

成果物

　C#, C++, C, Java, JavaScript, Markdownはできてるが、Python, Bashはできないことを確認した。

f:id:ytyaru:20181205160808p:plain f:id:ytyaru:20181205160755p:plain

対象環境

前回

手順

  1. プロジェクト作成
  2. NuGetでMarkdig.SyntaxHighlightingを追加
  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.SyntaxHighlightingを選択する
    f:id:ytyaru:20181205132846p:plain
  5. パッケージを追加ボタンをクリックする

　以下のエラーで失敗する。

/tmp/work/HelloMarkdown/HelloMarkdown/HelloMarkdown/MainForm.cs(75,75): Error CS0012: The type 'Object' is defined in an assembly that is not referenced. You must add a reference to assembly 'mscorlib, Version=2.0.5.0, Culture=neutral, PublicKeyToken=7cec85d7bea7798e, Retargetable=Yes'. (CS0012) (HelloMarkdown)

　こちらによるとMicrosoft.NETCore.Portable.Compatibilityパッケージを導入すれば解決するっぽい。

f:id:ytyaru:20181205133128p:plain
f:id:ytyaru:20181205134040p:plain

　再びMarkdig.SyntaxHighlightingの導入を試みるも、同様のエラー。もしかして入手したのは異なるコンパイラでビルドしたバイナリだからか？

成功編

　GitHubからソースコードを持ってきてコンパイルする作戦。

ダウンロード

  1. ターミナルを起動する
  2. git clone https://github.com/RichardSlater/Markdig.SyntaxHighlightingを実行する

ビルド

  1. ./Markdig.SyntaxHighlighting/src/Markdig.SyntaxHighlighting.slnをダブルクリックする（MonoDevelopで開く）
  2. Releaseですべてビルドする

　DLLが作成される。

  • ./Markdig.SyntaxHighlighting/src/Markdig.SyntaxHighlighting/bin/Release/
    • ColorCode.dll
    • Markdig.dll
    • Markdig.SyntaxHighlighting.dll
    • Markdig.SyntaxHighlighting.pdb
    • Markdig.xml

参照に追加

  1. Markdig.SyntaxHighlightingを使いたいプロジェクトを作成する
  2. プロジェクトの依存関係を右クリックする
  3. 参照の編集をクリックする
    f:id:ytyaru:20181205133640p:plain
  4. .NETアセンブリタブをクリックする
  5. 参照ボタンをクリックする f:id:ytyaru:20181205133657p:plain
  6. 参照に先程のビルドで作成されたDLLを追加する
    f:id:ytyaru:20181205133723p:plain
    f:id:ytyaru:20181205133733p:plain
    f:id:ytyaru:20181205133745p:plain

　実行すると以下のように怒られる。

/tmp/work/HelloMarkdown/HelloMarkdown/HelloMarkdown/MainForm.cs(75,75): Error CS0012: The type 'Object' is defined in an assembly that is not referenced. You must add a reference to assembly 'mscorlib, Version=2.0.5.0, Culture=neutral, PublicKeyToken=7cec85d7bea7798e, Retargetable=Yes'. (CS0012) (HelloMarkdown)

　先述の失敗編にある通り、Microsoft.NETCore.Portable.Compatibilityパッケージを導入すれば解決する。

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

  1. .Desktopでないプロジェクトを右クリック
  2. XMLファイルを追加する
  3. ファイル名はDefault.mdなどにする
  4. 画面右プロパティをクリックする
  5. ビルドの出力ディレクトリにコピーをクリックし常にコピーまたは新しい場合はコピーするにする
    f:id:ytyaru:20181205134308p:plain
  6. ファイル内容は以下など任意にする
<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;
using ColorCode;
using Markdig.SyntaxHighlighting;

namespace HelloMarkdown
{
    public partial class MainForm : Form
    {
        RichTextArea richTextAreaMd;
        RichTextArea richTextAreaHtml;
        WebView previewer;
        Markdig.MarkdownPipeline pipeline;
        public MainForm()
        {
            Title = "Markdown Previewer";
            ClientSize = new Size(1024, 768);
            Create();
        }
        private void Create()
        {
            this.pipeline = new MarkdownPipelineBuilder()
                .UseAdvancedExtensions()
                .UseSyntaxHighlighting()
                .Build();

            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();
            //richTextAreaMd.Text = new StreamReader(new FileStream("./DefaultMarkdown.md", FileMode.Open)).ReadToEnd();
            richTextAreaMd.Text = new StreamReader(new FileStream(System.IO.Path.Combine(System.AppContext.BaseDirectory, "DefaultMarkdown.md"), FileMode.Open)).ReadToEnd();
            Content = new TableLayout
            {
                Padding = 0,
                Spacing = new Size(0, 0),
                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:20181205134228p:plain

　ソースコード部分のHTMLを抜き出してみると以下。

<div class="lang-python editor-colors">import pathlib
print("ABC")
</div>

　あれ、<code>消えた……。<pre><code>にして欲しいんだけど……。<div>は無いわー。マークされている部分がひとつもない。CSSもない。これ本当に使えるのか？
　HTMLを見る限り、言語名は認識したようなので使えると思うが……。

追記

　C#, C++, C, Java, JavaScript, Markdownはできてるが、Python, Bashはできないことを確認した。

f:id:ytyaru:20181205151214p:plain
f:id:ytyaru:20181205151222p:plain