StackEdit の機能を最大限に使い blogger へ投稿

ブログを書く際に StackEdit を使用してるが、今ひとつ使いこなせていない気がしたので、再度機能の見直しをしてみると、有用な部分があったので紹介する。

今回見つけた機能は以下のとおり、
あと、説明上［］を全角にしているが、実際は半角で入力。

• 目次をつくる
• 注釈をつかう
• コードをのせる
• シーケンス図などものせる
• よく分からんこと
• まとめ

目次をつくる

次に、見出しを作る方法行の先頭に [toc] とつけると h1 等のタグを自動的に拾いリンクにしてくれる。
ただし、ページ全体の h1 タグをひらうので、途中にこの指定をしても、そこから以降にはならないので注意。

［toc］

↑こう書くとページの最初の様な目次が作成される。

注釈をつかう

ちょっとした自適感想などは、これまで () を使って表していたが、StackEdit の注釈機能を使うことにより、簡単に作成できる事がわかった。
書き方は、「［＾xxx］」で注釈のリンクをつけ、「［＾xxx］:」で説明を記述をすれば良い。

こんな感じにすれば良い［^footer説明］
［^footer説明］:こんな感じにする。

こんな感じにすれば良い1

コードをのせる

コードを載せたの時のシンタックスハイライトについては、これまでも実現していたが、簡易な方法として highlight.js を使用する方法があったので、これまでの物と合わせて使用するようにした2。
使用にあたっては、blogger 自体に設定が必要とはなるが、それほど難しくはないので試してみる価値はあるかと思う。
凝った表示にしたいのであれば、ここから手をいれるか、別の方法を検討しないといけない。

設定は、blogger のメニューからテンプレート > ブログで使用中の HTML の編集をクリックし、header 部分に以下のコードを追加する。

<link href='//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.0.0/styles/monokai-sublime.min.css' rel='stylesheet'/>
<script src='//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.0.0/highlight.min.js'/>
<script>
    hljs.initHighlightingOnLoad();
</script>

これを設定したら、コードブロック(“`)を使用してプログラムコードを入れると、いい感じにコードが見やすく色づけされる。

```ruby
puts 'The best way to log and share programmers knowledge.'
hoge = Hoge.new
```

↑こうかくと
↓このように表示される

puts 'The best way to log and share programmers knowledge.'
hoge = Hoge.new

シーケンス図などものせる

なんと、StackEdit は、URL やシーケンス図を DSL を使って表現できる Sequence diagrams や about Flow charts 構文もサポートしている。
そして、そのまま blogger へ送る事もできる。
流石に、この手の図は StackEdit 上では表示可能だが、blogger へ転送するとテキストに置き換わるだろうと思っていが、きちんと表示されている。
このブログでは CSS の関係で見づらいが、これはすごいと思う。

使い方は、これまたコードブロックに sequence 指定をして、然るべき書式を使うだけ。

```sequence
WEBサーバ->DBサーバ: データ挿入
Note right of DBサーバ: DataBaseには\nユーザデータが\n格納される
DBサーバ-->WEBサーバ: データ参照
WEBサーバ->>DBサーバ: データ更新
```

↑こうかくと
↓このように表示される

おまけ

これは、以前から使っていたけど、StackEdit を使ってそのまま、Upload したら公開されてしまうのが困る場合、やタグを入れたい場合は、ページの先頭に

---
tags: ["App"]
published: false
---

と記述しておくと、tag の指定と公開設定ができるので、おおまかな部分を StackEdit で書いてアップした後 blogger 側で調整することができる。

よく分からんこと

ここまででも十分なんだけど、実際のブログと見た目が違う点が少し残念。
StackEdit 内で CSS を設定したいがどこで設定したら良いかわからない。

まとめ

StackEdit の見直しをして、欲しかった目次つくる機能などを発見できたのは、すごく良かった。
通常の Markdown は対応しているし、まさかシーケンス図とうの図までそのまま送れるとは思わなかった。
これは blog を書く人は StackEdit を使わないと損するかもしれない。

Written with StackEdit.

---

1. こんな感じにする。 ↩
2. そのままでは、行番号を表示しないから併用するようにした。 ↩