ど〜も〜、 古き良きを愛するフロントエンジニア の中尾こと、 Hawk(と呼ばれたい) です。
実はドヤ顔で記事を書いた OmniMarkupPreviewer なのですが、最初存在を知らず、自称webアプリ屋のインフラ屋さん に「markdown書くのにオススメのエディタない?」と聞いたところ教えてもらいました。

感謝しながら、設定を終えるとその 自称webアプリ屋のインフラ屋さん がボソッと一言。
「エンジニアブログのスタイルでプレビュー表示できればいいですよね。」
(要約:スタイル当てろや!)
と脅され(?)たので、Sublime Textの拡張機能でリアルタイムプレビューでおなじみ OmniMarkupPreviewer をいじってみました!

OmniMarkupPreviewer の導入につきましては下記をごらんください!
やればできる子!!Sublime Textにもう一度恋してみよう! 〜markdown編〜

元ファイルを確認!

デフォルトでは実はgithubのスタイルが当たっています。
まずは、元ファイルを確認しましょう!

下記にアクセスすることで中身が見れるはずです!

Windowsの方
C:\Users\ユーザーの名前\AppData\Roaming\Sublime Text 3\Packages\OmniMarkupPreviewer\public\github.css

macの方
ライブラリ/Application Support/Sublime Text 3/Packages/OmniMarkupPreviewer/public/github.css

ちょっとした変更であるならば、こちらに直書きしてしまってもいいかもしれないですね!
しかし、ながら今回はオリジナルスタイルをご所望のようですので、こちらは使いません!

必要ファイルをコピー!

今回はスタイルをまるっと変更したいので、DefaultではなくUserにコピーを作成し、変更していこうと思います。
そこで必要になるのが、こちら!

templatesフォルダ内

  • engineerblog-export.tpl
  • engineerblog.tpl

この2つのファイルを下記にコピー先ほどと微妙にパスが違うので注意!

Windowsの方
C:\Users\ユーザーの名前\AppData\Roaming\Sublime Text 3\Packages\User\OmniMarkupPreviewer\templates

macの方
ライブラリ/Application Support/Sublime Text 3/Packages/User/OmniMarkupPreviewer/templates

cssファイルを準備しよう!

ここで当てたいスタイルを準備します。
自由にスタイリンしてください!
また、jsやimageも使えますんで、とても自由度が高いです!!

準備したcss等のファイルは下記に保存しましょう。

Windowsの方
C:\Users\ユーザーの名前\AppData\Roaming\Sublime Text 3\Packages\User\OmniMarkupPreviewer\public

macの方
ライブラリ/Application Support/Sublime Text 3/Packages/User/OmniMarkupPreviewer/public

ちなみに自分はpublicフォルダ内にcssやimgなどと多少ディレクトリを作りました!

スタイルを読み込もう!

諸々準備完了しましたら、いよいよスタイルを読み込みましょう。
コピーしたtemplatesフォルダ内のengineerblog.tplを開きましょう!
そして、下記のように変更!

<!-- <link rel="stylesheet" type="text/css" href="/public/github.css"> --><!-- こいつは前のスタイルなので削除! -->
<link rel="stylesheet" type="text/css" href="/public/css/engineerblog.css"> <!-- 新しいスタイルを読み込み -->

そして、Sublime textのPreferences → Package Settings → OmniMarkupPreviewer → Settings -Userを下記に書き換え!

{
    "renderer_options-MarkdownRenderer": {
        "extensions": ["tables", "fenced_code", "codehilite"]
    },
    "html_template_name": "github.tpl",
    "export_options" : {
        "template_name": "github-export",
        "timestamp_format": ""
    }
}

最後に、ブラウザで表示中のプレビューをキャッシュをリクアして再読み込みすればスタイルが当たります!

めんどくさい方に

「記事なげーよ!!俺はサクッとこのブログのスタイル使いてーんだよ!」
と、思ってるツンデレの方は下記を User/OmniMarkupPreviewer にまるっと上書きしてください!

サックっとエンジニアブログのスタイルを当てる

そして、Sublime textのPreferences → Package Settings → OmniMarkupPreviewer → Settings -Userを下記に書き換えてくれれば動きます!

{
    "renderer_options-MarkdownRenderer": {
        "extensions": ["tables", "fenced_code", "codehilite"]
    },
    "html_template_name": "engineerblog.tpl",
    "export_options" : {
        "template_name": "engineerblog-export",
        "timestamp_format": ""
    }
}

ちなみに、会の内容が本番のスタイルと異なりますので、ご注意を!

「フォントが違うじゃないか!」
本番環境ではwebフォントなんです、、すいません。。。。

「コードのスクロールバーが違うじゃないか!」
本番環境ではスクロールバーのプラグインを入れております。使用許可とかめんどくさかったんで、今回は未実装にしました。すいません。。。

「自動更新されるとリストの行数が消えるじゃないか!」
こちらはjsで生成しているのですが、自動更新の際はjsまでリロードがかからないっぽくて、消えてしまいます。再読み込みで表示されます、すいません。。。

最後に

いかがでしょうか?
これで、好きなデザインでmarkdownを書くことができますね!
中身は基本HTML,CSSと変わらないんで色々遊べそうです(笑)

それでは、またどこかでお会いしましょう〜

Shere
  • はてなブログ
  • Twitter
  • Facebook
やればできる子!!Sublime Textにもう一度恋してみよう! 〜OmniMarkupPreviewer改造編〜

Writer

  • Name

    中尾鷹人

  • Position

    神にもっとも近いと言われていると思っている感じを出しつつ、今日も自分なりに頑張って業務をこなそうと思いながら、なかなかやる気の出ないフロントエンジニア

  • Profile

    昔々あるところにえらい神様がおりました。 えらい神様はとても残念なことがあり、洞窟の中に隠れてしまいました。 するとどうゆうことでしょう。世界が暗闇に包まれてしまいました。他の神様たちは相談し、えらい神様に洞窟から出てもらうように説得しました。なんやかんやあって、なんとか洞窟の扉を開けることに成功しました。扉を開けると眩しい光に包まれました。 すると中からえらい神様となぜかえらそうな神様が出てきました。 そのなぜかえらそうな神様がのちにフロントエンジニアとなって活躍するのは別のお話。