tmori3y2のブログ

主にWindowsのプログラムなど

初めてのcoffee script: markdown-preview-enhancedの機能改良リクエスト

MPEはVS Codeに移植中

tmori3y2.hatenablog.com

tmori3y2.hatenablog.com

markdown-preview-enhanced (MPE)を紹介したが、VS Codeに移植中らしい。

まだまだ、移植できていない機能も多いが、Preview版も出ている。

marketplace.visualstudio.com

直してほしい不具合や機能があるんだが・・・

実は、いくつか不具合っぽいのを見つけたのと、機能改良要求が何点かあったが、移植で着手できない様子。

それで、思い切って、coffee scriptに入門して、ちょっといじってみた。

JavaScriptは、15年前に仕事でちょっといじったが、coffee scriptは、本当に初めて。と言うか、そもそもJavaScript自体が様変わりしているし・・・

勉強している時間がないので、ソースを見て真似をしたり、google先生に聞いて、しのいだ。

pull requestは出していないが、取り敢えずissueを立てて、forkしたbranchとの差分や確認に使用したファイルのzipを貼り付けている。

importでの行番号指定の実装

github.com

markdownに他のファイルから取り込みたい場合に、全部取り込みたくない場合や、ページの切れ目をコントロールしたくて分割したい場合がある。

そういったときに、範囲を指定して取り込む機能があると便利。

ファイルの行番号を指定してインポート

@import “test.puml” {code_block:true, class:‘lineNo’}

 1   @startuml
 2
 3   class A
 4   class B
 5
 6   A <|- B
 7
 8   @enduml
 9   @startuml
10
11   class C
12
13   B *-- "1" C
14
15   @enduml
16

と出来たのを、

@import “test.puml” {code_block:true, line_begin:9, line_end:15, class:‘lineNo’}

 9   @startuml
10
11   class C
12
13   B *-- "1" C
14
15   @enduml

のように切り出せるようにしてみた。

csvを部分的に切り出してテーブルに変換

@import “test.csv” {code_block:true, class:‘lineNo’}

 1   A, B, C
 2   1, 2, 3
 3
 4   a, b, c
 5   11, 12, 13
 6

のとき、

@import “test.csv

A B C
1 2 3
a b c
11 12 13

と全部表として取り込んでいたのを、

@import “test.csv” {line_begin:4, line_end:5}

a b c
11 12 13

のように切り出せるようにしてみた。

markdownの部分取り込み

@import “test.md” {code_block:true, class:‘lineNo’}

 1   # test
 2
 3   ## test 1
 4
 5   * test 1-1
 6
 7   ## test 2
 8
 9   * test 2-1
10

のとき、

@import “test.md”


test

test 1

  • test 1-1

test 2

  • test 2-1

のように全部markdownとしてインポートしていたのを、

@import “test.md” {line_begin:3, line_end:6}


test 1

  • test 1-1

のように部分的にインポートできるようにしてみた。

行番号を途中の番号から表示するのに苦労した

取り敢えず、Google先生に聞いてみると、Atom Editorは、VS Codeと同じ、Electronベースで、Preview画面もWebページのようにcoffee scriptでDOMを操作したら好きにできるらしい。

Developer toolsで見ると、コードブロックは、<pre>で囲まれている。

・・・と言うか、エディタ全体がDOM構造持ってるね。。。

ちなみに、この記事見てDarkテーマにしてみたよ。

coliss.com

さて、本題に戻る。

例えば、コードブロックのMPE拡張構文で、

```puml {#abc .lineNo }

A <|- B

B *– “1” C

```

と書くと・・・

  • preview画面
<pre class="editor-colors lang-puml lineNo lineno-100" id="abc">
    <div class="line">
        <span class="mpe-syntax--text mpe-syntax--plain mpe-syntax--null-grammar">
            <span>A <|- B</span>
        </span>
    </div>
    <div class="line">
        <span class="mpe-syntax--text mpe-syntax--plain mpe-syntax--null-grammar">
            <span>B *-- "1" C</span>
        </span>
    </div>
</pre>

となる。

  pre.editor-colors.lineNo {
    counter-reset: lineNo;
    .line {
      &::before {
        display: inline-block;
        counter-increment: lineNo;
        content: counter(lineNo);
        text-align: right;
        padding: 0;
        margin-left: -1em;
        margin-right: 1.5em;
      }
    }

    &.lineno-100 {
      .line::before {
          width: 2em;
      }
    }

    &.lineno-1000 {
      .line::before {
          width: 2.5em;
      }
    }

    &.lineno-10000 {
      .line::before {
          width: 3em;
      }
    }

    &.lineno-100000 {
      .line::before {
          width: 3.5em;
      }
    }
  }

となっていたので、以下のようにstyleを上書きすればよさそうなのは分かった。(Nは開始行番号-1)

<pre class="editor-colors lang-puml lineNo lineno-100" id="abc" style="counter-reset: lineNo N;">

問題はやり方。

@import “test.puml” {id:“abc”, code_block:true, class:“lineNo”, line_begin:3}

としたとき、

  • 最初は、オリジナルがidとclassしか扱えないので、無理やり以下のように変換した
    • あとは、previewへの変換部分で、style属性を生成する

```puml {#abc .lineNo .reset_3}

A <|- B

B *– “1” C

```

  • 流石にひどいので、これを以下のように変更した
    • コードを眺めていたら、使用されなくなっていたが、preview画面側の処理にkey=“value"を解釈するコードがあったので、markdownを解釈する側にコードを追加して対応

```puml {#abc .lineNo line_begin=“3”}

A <|- B

B *– “1” C

```

HTML5風にするなら、data-line-begin=“3"の方がいいのかな?

この辺、イマイチわからんので、取り敢えず、commitはまとめずに、fork先のbranchとのcompareのページをissueに貼り付けておいた・・・

importでのPlantUMLのinclude指令サポート

github.com

PlantUMLには、include指令と言うのがある。

まあ、C/C++で言うところの#include。

@import “puml_include.iuml” {code_block:true}

@startuml(id=ID_DETAIL_BASE)

class baseClass {
propertyA
propertyB
}

@enduml
@startuml

baseClass <|-- DerivedA
baseClass <|-- DerivedB

@enduml
@startuml

DerivedA *-- "1" ClassK
DerivedA *-- "1" ClassL
ClassK *-- "1" ClassM
ClassL *-- "1" ClassN

@enduml
@startuml

DerivedB *-- "1" ClassV
DerivedB *-- "1" ClassW
ClassV *-- "1" ClassX
ClassW *-- "1" ClassY

@enduml
@startuml

DerivedA <-> DerivedB
ClassL <-> ClassV
ClassN <-> ClassX

@enduml
@startuml

top to bottom direction
DerivedA *-- "1" ClassK
DerivedA *-- "1" ClassL
ClassK *-- "1" ClassM
ClassL *-- "1" ClassN

@enduml
@startuml

left to right direction
DerivedA *-- "1" ClassK
DerivedA *-- "1" ClassL
ClassK *-- "1" ClassM
ClassL *-- "1" ClassN

@enduml

とかだったら、

@import “puml_include.iuml” {include: [1, 2, 3, 4]}

@startuml
!include "puml_include.iuml!1"
!include "puml_include.iuml!2"
!include "puml_include.iuml!3"
!include "puml_include.iuml!4"
@enduml

f:id:tmori3y2:20170628003005p:plain

とかやって、部分的につなげてみたり、

@import “puml_include.iuml” {direction:“LR”, include: 3}

@startuml
!include "puml_include.iuml!3"
left to right direction
@enduml

f:id:tmori3y2:20170628003035p:plain

とかやって、向きを変えたり、

@import “puml_include.iuml” {direction:“LR”, include: 5}

@startuml
!include "puml_include.iuml!5"
left to right direction
@enduml

f:id:tmori3y2:20170628003058p:plain

とかやって、オリジナルのdirection指定を打ち消したり、したいよね?

ってことで。

あと、dot関係でちょっと困った不具合見つけてしまった・・・

修正は楽だから、pull request投げようかな?