スポンサーリンク

atom プレビュー 表示されない場合 の 解決方法 atom-html-preview 日本語表示でも軽くする方法

スポンサーリンク
Windows,Android,iOS,ガジェット
スポンサーリンク

この記事は、2017年12月12日12:50に更新しました。

スポンサーリンク

atom プレビュー 表示されない場合 の 解決方法 atom-html-preview 日本語表示でも軽くする方法

私自身、atomをプレビューで使おうとして、ググっても解決しなかったので、記事にしました。

やっと解決しましたので、プログラミング初心者むけに、記事にします。

この記事は、atomで書いたものです。

こんな感じです。

f:id:mikazuki1:20171212000945j:plain

目次

  1. この記事の目的
    1. プレビュー表示
       

    2. atomを軽くする
       

    3. 記事は日本語、atomは英語
       
  2. 方法
     

    1. atomの再インストール
    2. atom-html-previewのインストール
    3. cssを設置する
       
  3. 備考
     

    1. 目がつかれた
    2. ググっても見つからない

この記事の目的

  1. プレビュー表示
  2. atomでプレビュー表示をすることです。

    はてなブログで、

    見たままの画面の切り替えが重くなってきたため。

  3. atomを軽くする
  4. atomにいろいろインストールすると重くなります。

  5. 記事は日本語、atomは英語
  6. 記事は日本語にしたいけれど、

    atomの各種機能表示は英語でも構わないという方向け。

方法

  1. atomの再インストール

    既に一度でもatomをインストールして、

    日本語表示に失敗してそのままの方は、

    atomのアンインストールを、次の方法でして下さい。

    1. Piriform CCleanerのToolsでアンインストールする。
    2. CCleanerのRegistryで

      Scan for IssuesとFix selected Issues…をして、

      レジストリをきれいにする。

    3. まだ、関連フォルダが残っているので、

      Everythingで、atomで検索して、

      関連フォルダを全部消す。

      これをしないまま、atomの再インストールをしても
       

      無意味。悪影響を及ぼす。

    4.  

    5. atomの関連フォルダを全部消去したら、

      windowsを再起動する。

    6. atomの本体をgithubから再度ダウンロードして、

      インストールする。

  2. atom-html-previewのインストール
    1. atomの日本語化は、ここでは、しない。
    2. atom-html-preview だけをダウンロードして、
      インストールする。

  3. cssを設置する
    1. githubからTyporaをダウンロードして、インストールする。
    2. TyporaのC:\Users\ユーザー名\AppData\Roaming\Typora\themes\github.css

      に、github.cssがあるので、これを利用する。

    3. C:\Users\ユーザー名\Documents\に適当な名前でフォルダを作る。

      ここでは、フォルダ名をカンタンに、1とする。

    4. この1のフォルダに、先程のgithub.cssをコピペする。
    5. この1のフォルダに、適当な名前で、htmlのファイルを作る。

      ここでは、ファイル名をカンタンに、1とする。

    6. htmlファイルの作り方は、windowsならメモ帳で

      中身が空のテキストファイルを作って保存して、

      拡張子を.txtから.htmlに変えるだけ。

    7. github.cssは、このままだと、日本語が表示されない、文字化けする。

      よって、このcssをwindowsならメモ帳で開き、最後に、次の文字列を追加して保存する。

      body {
      font-family: “Open Sans”,”Clear Sans”,”Helvetica Neue”,Helvetica,Arial,sans-serif,”Hiragino Kaku Gothic ProN”,”MS PGothic”;
      }

    8. ここまでできたら、

      atomのメニューバー一番左にある、Fileから、

      Open Folder… Ctrl+Shift+Oで、
       

      このC:\Users\ユーザー名\Documents\1のフォルダを開く。

    9. 1.htmlをクリックして開き、適当な文字列を入力する。
    10. ctrl+shift+hを同時に押して、atom-html-previewを開く。
    11. すると、右側に、白い画面で、プレビューが出る。おめでとうございます。
    12. パソコンの環境にもよるが、ここまで間違えていなければ、きっと出るはず。
    13.  

備考

  1. 目がつかれた。まるまる1日、LCDと、にらめっっこ。

  2. ググっても解決方法が、見つからない。

  3. atomで検索すると、プレビュー表示されない、

    とサジェストされるので、

    だれかが、記事にしていてもおかしくないのに。

  4. atomの使い方、始め方の記事はたくさんある。
  5. しかし、このプレビュー表示されない問題を解決する記事は

    残念ながら、なかった。

  6. ピンチがチャンス。自分なりの解決方法を記事にすることで

    誰かのお役に立つことができれば、本望です。

これからも、追記していきます。

私の勉強も兼ねて。

では、また。

コメント