初めてのcoffee script: markdown-preview-enhancedの機能改良リクエスト
MPEはVS Codeに移植中
markdown-preview-enhanced (MPE)を紹介したが、VS Codeに移植中らしい。
まだまだ、移植できていない機能も多いが、Preview版も出ている。
直してほしい不具合や機能があるんだが・・・
実は、いくつか不具合っぽいのを見つけたのと、機能改良要求が何点かあったが、移植で着手できない様子。
それで、思い切って、coffee scriptに入門して、ちょっといじってみた。
JavaScriptは、15年前に仕事でちょっといじったが、coffee scriptは、本当に初めて。と言うか、そもそもJavaScript自体が様変わりしているし・・・
勉強している時間がないので、ソースを見て真似をしたり、google先生に聞いて、しのいだ。
pull requestは出していないが、取り敢えずissueを立てて、forkしたbranchとの差分や確認に使用したファイルのzipを貼り付けている。
importでの行番号指定の実装
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テーマにしてみたよ。
さて、本題に戻る。
例えば、コードブロックの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指令サポート
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
とかやって、部分的につなげてみたり、
@import “puml_include.iuml” {direction:“LR”, include: 3}
@startuml !include "puml_include.iuml!3" left to right direction @enduml
とかやって、向きを変えたり、
@import “puml_include.iuml” {direction:“LR”, include: 5}
@startuml !include "puml_include.iuml!5" left to right direction @enduml
とかやって、オリジナルのdirection指定を打ち消したり、したいよね?
ってことで。
あと、dot関係でちょっと困った不具合見つけてしまった・・・
修正は楽だから、pull request投げようかな?
こちらの記事もどうぞ。