SublimeTextで編集したEvernoteの見た目をスタイリッシュにして見やすくしよう！

こんにちは、えんぞーです。

結構前に「Evernoteの編集をSublimeTextでやるとすごく便利！」と言った記事を書いたのですが、今回は編集したノートの見た目について。

前の記事書いた時に続けざまに投稿しておけばよかったのですが、すっかり忘れていました。

スタイリッシュにとは言え、やれることが限られているので少しでも見やすくなればいいよね程度です。

基本的にはEvernoteのエディタ部分が使いづらいからSublimeTextで書けたら便利だなって所から始まってます。（しかもマークダウン記法で）

ちょっとしたメモだったりレポート書くにはとても便利なので興味ある人は一度お試し下さいｗ

見た目ってどのくらい弄れるの？

そもそも「sublime-evernote」というSubliteTextのプラグインを使用しているので、このプラグインで出来る範囲という事になります。

Styling · bordaigorl/sublime-evernote Wiki

上記のページに書いてある程度が出来る事ということになります。

実際に私が適応させている状態をサンプルとして出しますと、

左が何もしていない状態で右が設定を付け足し状態です。

流石に何もしていない状態よりは見やすくなっていると思います。

ちなみに上記ページの実際のURLはこちら

SublimeTextで編集したEvernoteの見た目をカスタマイズ

記載している内容はこちら。

# H1の場合

普通のテキストはこの様に表示されます。

決まったフォーマットで書けるのは後で見やすいし書いてる時のモチベーションも変わってきますｗ

**強調表示**は弄れないみたいなのでこのままですね。

## H2の場合

H2は多用しますよねぇ。

### H3の場合

H3位になるとたまに使うレベル。

#### H4の場合

H4まで掘り下げるような事を書かないかなぁ・・・。

##### H5の場合

H5って使ったこと無いかも・・・。

> ここは引用部分です。
>
> 結構使いますよね。
> 
> 見やすいに越したことは無いですし。

---

コードはこんな感じになっています。

```
<?php
	phpinfo();
?>
```

実用部分としてはこんな感じでしょうか。

メモ感覚でサラサラっと書いてEvernoteに反映させるとスタイルが適用されてアップされます。

設定の方法

設定の方法と言うか、前述したWikiにかいてある通りなのですが設定ファイルにスタイルの内容を記述するだけです。

「Evernote」の「Setting - User」に設定を書いちゃいましょう。

下記に私の設定を記述しておきますので参考にして下さい。

色変えたり余白調整したりで自分好みに設定しましょう～。

	"wiki_tables": true,
	"inline_css": {
        "body": "font-family: gotham,ヒラギノ角ゴ ProN W3,Hiragino Kaku Gothic ProN,メイリオ,Meiryo,MS Pゴシック,MS PGothic,helvetica,arial,sans-serif;",
        "pre": "color: #000000; font-family: Ricty,monospace,monospace; font-size: 0.9em; white-space: pre-wrap; word-wrap: break-word; border: 1px solid #A8C6F3; border-radius: 3px; overflow: auto; padding: 6px 10px; margin-bottom: 10px;background: #F0F4FF;",
        "code": "color: black; font-family: Ricty,monospace,monospace; font-size: 0.9em;",
        "inline-code": "color: #000000; font-family: monospace,monospace; padding: 0.1em 0.2em; margin: 0.1em; font-size: 85%; background-color: #F5F5F5; border-radius: 3px; border: 1px solid #cccccc;",
        "h1": "margin-bottom: 1em;margin-top: 1.2em;font-size: 2em;padding: 10px;border-bottom: 1px solid #0696EA;background: #196BBF;color: #FFF;",
        "h2": "font-size: 1.5em;border-bottom: 1px solid #196BBF;padding: 5px;color: #196BBF;",
        "h3": "margin-bottom: 0.5em;margin-top: 0.5;font-size: 1.4em;border-bottom: 1px dashed #567798;padding: 5px;color: #567798;",
        "h4": "margin-bottom: 0.5em;margin-top: 0.5;font-size: 1.3em;border-bottom: 1px dashed #567798;padding: 5px;color: #567798;",
        "h5": "margin-bottom: 0.5em;margin-top: 0.5;font-size: 1.2em;border-bottom: 1px dashed #567798;padding: 5px;color: #567798;",
        "footnotes": "border-top: 1px solid #9AB39B; font-size: 80%;",
        "hr": "margin-bottom: 2em;margin-top: 2em;color:#9AB39B;background-color:#9AB39B;height:1px;border:none;",
        "sup": "color:#6D6D6D;font-size:1ex",
        "blockquote": "border: 1px dashed #D8D8D8;margin-left: 3em;padding: 1em;margin-top: 1.4285em;margin-bottom: 1.4285em;background: #F5F5F5;border-radius: 10px;",
        // ONLY USED IF wiki_tables or gfm_tables are enabled
        "table": "border-collapse: collapse; border-spacing: 0; margin: 1em;",
        "td": "border: 1px solid #DDD; padding: 6px 13px;",
        "th": "border: 1px solid #DDD; padding: 6px 13px;",
        "tr:odd": "border: 1px solid #DDD; padding: 6px 13px;",
        "tr:even": "border: 1px solid #DDD; padding: 6px 13px; background-color: #F8F8F8;"
    },

一応「wiki_tables」の設定は有りにしています。

実際に貼り付けると下の画像のようになるかと思います。

WikiのページにはH1だけが記述されていたんですがH2～H5も設定してみたら出来たのでそのまま使ってます。