Fork me on GitHub

役立ちぬ開発史、それはただのブログ

覚えておくといい、ブログの時代は終わる。いつかその内、きっとたぶん…

Atom Html PrevierでローカルにあるCSSを読み込む方法

| Comments

 この記事は、 Atom Advent Calendar 2014 の20日目の記事です。

 Atom Html Previerでプレビューを見るとローカルにあるCSSを読み込まずに表示されます。HTMLタグを確認する上では特に問題ないですが、サイトを作っていく上ではもの寂しさを感じます。ローカルにあるCSSを読み込む方法を紹介します。

ローカルにあるCSSを読み込む方法

 この記事は、AtomにプラグインのAtom Html Previerをインストールしていることを前提にしています。また、現時点のプラグインのバージョンは、v0.1.3になります。

 ローカルにCSSファイルを読み込ませたHTMLファイルを、Atom Html Previerをインストールしたままの状態でプレビューしても、読み込んではくれません。読み込ませるには、少し設定を変える必要があります。

atomio-site-pic1

 まずctrl+shift+Pまたはcmd+,でSettingsを開きます。左のパッケージリストの中のAtom Html Previewを選択し、ナビゲーションの中の一番右にあるOpen in Atomを選択して、パッケージのソースフォルダを開きます。

atomio-site-pic1

 libの中のatom-html-preview-view.coffeeファイルを開きます。

atomio-site-pic1

この中にある以下のコードを探します。

1
iframe.src = "data:text/html;charset=utf-8,#{encodeURI(text)}"

この部分を、

1
2
iframe.setAttribute("sandbox", "allow-scripts allow-same-origin")
iframe.src = @getPath()

に変更します。
 その後、保存してAtomを再起動し、ctrl+pを押してプレビューを見ると、ローカルにあるCSSを読み込み表示してくれます。

atomio-site-pic1

参考サイト

Doesn't display any linked css

Comments