質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

Q&A

解決済

1回答

7889閲覧

mac osx10.9.5 Atom HTML Previewのプレビュー画面で文字化けします。

kibou2

総合スコア7

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

0グッド

0クリップ

投稿2016/07/08 20:28

###前提・実現したいこと
ここに質問したいことを詳細に書いてください
Atomでhtmlファイルを開きAtom HTML Previewで
文字化けせずプレビュー出来ること。

###試したこと 課題に対してアプローチしたことを記載してください エンコーディングの問題かと思いauto-encoding というパッケージを導入しましたが 改善されませんでした。 他、Atom HTML Preview文字化け等でググってみましたが解決策が見つかりませんでした。 ###補足情報(言語/FW/ツール等のバージョンなど) ・markdown preview で日本語でのプレビュー出来ますがレイアウトは ページ通りではありません。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

色々試しましたが、下記の場合のみうまく日本語も表示されるようです。

  • UTF-8のエンコードであること
  • <meta charset="utf-8">等でエンコードが指定されていること

Shift_JISやEUC-JPなど他のエンコードはmetaタグで指定しても、渡される段階でUTF-8の文字以外は壊れてしまうようです。また、metaタグでエンコードを指定していない場合はUTF-8として正常に読み取ってくれず、同じく文字化けしてしまうようです。READMEやIssuesにはありませんでしたが、パッケージ自体の不具合または制限事項と思われます。エンコードをUTF-8にして、metaタグをつけてみて試して見てください。

なお、Markdown Previewはgithubで使われているMarkdownエンジンと同じ仕様で作られているらしく、全てのMarkdown方言には対応していません。Settingsでgithubで表示されるときと同じスタイルまたは普通の選択が選べますので、レイアウトが異なるならそれを試して見てください。

もし、もっと多くのMarkdown方言に対応し、細かくレイアウトを定めたいのであれば、pandocパッケージを試して見てください(別途Pandocを入れておく必要があります)。

投稿2016/07/08 20:58

raccy

総合スコア21733

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

kibou2

2016/07/09 21:53

回答ありがとうございます。 Atom1.8.0ですが設定のコア設定ではファイルエンコードはUTF-8になっています。 ・<meta charset="utf-8">等でエンコードが指定されていること となっていますがこれはどこを開いて設定するのでしょうか?
raccy

2016/07/09 22:17

Previewで表示するHTML中のheadにあるmetaタグのことです。HTML4であれば`<meta http-equiv="...` という形式でもうまくいくかと思います。いずれにしてもブラウザからみてutf-8と認識される状態でないと駄目なようです。
kibou2

2016/07/09 22:29

raccyさん。ありがとうございました。 無事に表示されるようになりました。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問