雑が喰おう

OmniMarkupPreviewerで複数のスタイルを使う方法

SublimeTextOmniMarkupPreviewerで使用されている CSSが気に入らないので、ちょこっと修正してみました。

そしたら、やはり出てきた新しい欲望……。

それは、目的別にCSSを使い分けたいというもの。

たとえば、議事録用メモやブログ執筆用など目的別に分けたいのです。

MarkDown専用のエディッターにはそういうものもあるみたいです。
しかし、OmniMarkupPreviewerはSublimeTextでMarkDown記法のプレビューを表示したり、htmlにエクスポートするプラグインでしかない。

OmniMarkupPreviewerのプレビューやエクスポート用のテンプレートを複数用意し使い分けることなど想定して作成されていないのではないでしょうか?

試してみた1

Sublime Text 2PackagesOmniMarkupPreviewerにある
OmniMarkupPreviewer.sublime-commands
"command": "omni_markup_preview2"と追加してみましたが、コマンドは増えていませんでした。

試してみた2

次に試したのが Sublime Text 2PackagesOmniMarkupPreviewerフォルダをコピーしてリネームしました。
SublimeTextを再起動させると、起動しなくなりました\(^o^)/
しかたがないので、コピーしたSublime Text 2PackagesOmniMarkupPreviewerは削除です。

試してみた3

次に思いついたのが、最初にやった"command": "omni_markup_preview2"を追加するだけでなく、テンプレートも追加。
OmniMarkupPreviewer.sublime-settingsにも追加し、Default (Windows).sublime-keymapにも追加してみましたが、コマンドは増えませんでした。 記述方法に問題があったかもしれませんが、どうにもこうにもできないっぽいです。

JavascriptでCSSを切り替える

他に方法はないものかと思案に試案を重ねていたのですが、入浴中に気づきました。

別にSublimeTextでやろうとしなくても、JavascriptでCSSを切り替えるテクニックをしようすればいいんじゃね?

ということで、試してみます。

Style Sheet Switcherを使う

今回使用するのは、Style Sheet Switcherです。

Dynamic Drive DHTML Scripts- Style Sheet Switcher (v1.1)

ラジオボタンやプルダウンメニューがはじめから用意されているので、現在どのスタイルを使用しているのか分かりやすくていいかなぁと思います。

それでは、順番に使えるように設定していきます。

styleswitch.js のダウンロードと保存

まずは、styleswitch.jsをダウンロードし、 PackagesOmniMarkupPreviewerpublicに保存します。

テンプレートファイルの修正

PackagesOmniMarkupPreviewertemplatesにあるgithub.tpl別名保存したファイルを修正します。

github.tplはブラウザプレビュー時にhtmlを出力するテンプレートファイルです。
修正前にバックアップをとっておくことを忘れずに!
といいますか、別名保存して、そちらを修正するようにしてください。

github.tplを開いてもらったらわかりますが、こう書かれてあるからです。

Do NOT Modify this template, create a new one for customization
It will get overwritten upon update

英語は中学1年生の時点で見失ってしまったので、Google先生に尋ねますと

しないこのテンプレートを変更、カスタマイズは更新時に上書きを得るために新しいものを作成します。

脳内補正をいたしましたら、つまりこういうことでしょう。

このテンプレートファイルは修正しないでね。
カスタマイズしても、プラグインの更新時に上書きされるから消えるよ。
それが嫌なら、新しいテンプレートを用意してね。

たぶん、間違ってないと思います。
ですから、かならず別名保存したファイルに修正を加えるようにしてください。

head

headに追加するコードは下記です

[html] <link rel="stylesheet" href="/public/github.min.css"> <link rel="alternate stylesheet" title="simple" href="/public/github.simple.css"> <link rel="alternate stylesheet" title="blog" href="/public/blog.css"> <script src="/public/styleswitch.js"></script> [/html]

この時、以下の2点に注意

  • デフォルトで使用するCSSを一番上に設置する
  • 代替CSSにはrel属性とtitle属性を指定すること

body

bodyにCSS切り替え用のメニューを設置します。

切り替えメニューは、ラジオボタン、選択メニュー、通常リンクの3種類が用意されています。

ラジオボタン [html]

<form id="switchform"> <input type="radio" name="choice" value="none" onClick="chooseStyle(this.value, 60)">Default<br /> <input type="radio" name="choice" value="simple" onClick="chooseStyle(this.value, 60)">simple<br /> <input type="radio" name="choice" value="blog" onClick="chooseStyle(this.value, 60)">blog </form>

[/html]

選択メニュー [html]

<form id="switchform"> <select name="switchcontrol" size="1" onChange="chooseStyle(this.options[this.selectedIndex].value, 60)"> <option value="none" selected="selected">Default</option> <option value="simple">simple</option> <option value="blog">blog</option> </select> </form>

[/html]

通常リンク [html] <a href="javascript:chooseStyle(‘none’, 60)" checked="checked">Default</a> <a href="javascript:chooseStyle(‘simple’, 60)">simple</a> <a href="javascript:chooseStyle(‘blog’, 60)">blog</a> [/html]

選択したCSSを覚えておくとか、ランダムにするとかそういうオプションも用意されているようですが、今回は取り上げません。
気になる方は、配布元でご確認ください。

自作テンプレートを使用可能にする

修正した自作テンプレートをOmniMarkupPreviewerで使用できるようにします。

Sublime Text 2PackagesOmniMarkupPreviewerにあるOmniMarkupPreviewer.sublime-settings
または
SublimeTextメニューから Preferences → Package Setting → OmniMarkupPreviewer → Setting - Default から
設定ファイルを開きます。

[txt] sublime-settings // User public static files should be placed into // ${packages}/User/OmniMarkupPreviewer/public/ // User templates should be placed into: // ${packages}/User/OmniMarkupPreviewer/templates/ // Requires browser reload “html_template_name”: “github”, [/txt]

ここの一番下にあるgithubというところを別名保存したテンプレート名に変更します。

まとめ

以上の作業が終了したら、OmniMarkupPreviewerでブラウザプレビューを実行すれば、CSSを切り替えることができるようになっているはずです。

同じように、SublimeTextでMarkDownをOmniMarkupPreviewerでプレビュー見てるけど、CSSを複数切り替えたいと思っている方は、一度設定してしまえばあとは手間いらずですので、おすすめします。

スポンサード リンク

スポンサード リンク

»関連してそうな記事