テキストエディタの「atom」について

Question

htmlを記述する上でＵＲＬの「http:」を省略することは問題ないはずなのですが、私のエディタ「atom」ではなぜかうまくURLを認識しません。

ちなみに「atom」は初期設定のまま使用しております。

具体的に言うと途中の「&」でなぜか区切られてしまい、本来なら紫色で表示されるはずのＵＲＬ部分が緑色で表示されてしまい、その「＆」以降すべて色の自動変換が機能していない状態になってしまいます。

リンクとしては正常に機能するのですが、エディタがＵＲＬを認識しないせいで、html記述中の色の自動変換が機能しなくて困っています。

なにか良い解決方法はありませんでしょうか。
ご教授よろしくお願い申し上げます。

Answer 1

この動作はlanguage-htmlとlanguage-hyperlinkという二つのデフォルトで入っているパッケージの相互作用によってこのような動作になっています。

まず、language-hyperlinkですが、テキストの部分にURLらしき物があれば自動的にURLであると判断し、別のスタイルを適用できるという物です。これはHTMLだけではなく、他の言語のソースやプレーンなテキストでも動作しており、もし、下記のようにユーザーのStylesheetを設定すれば、共通の見え方にすることもできます。

atom-text-editor::shadow {
  .markup.underline.link.hyperlink {
    text-decoration: underline;
  }
}

さて、HTMLですが、language-htmlはHTMLを解釈して行くのですが、属性値やタグではない地の部分をただのテキストと判断します(地の部分でもscriptタグの中はJavaScriptとしてに解釈するなど例外が一部あります)。テキストですので、もし、そこにURLらしき物があれば、先ほどのlanguage-hyperlinkがURLであると判断します。つまりです、"http://〜"から始まる場合は、URLをURLとして判断していると言うことになります。しかし、そうではない場合、"/〜/〜"見たいな場合は、それが絶対パスURLであるとか、相対パスURLであるかは判断できません。URLではないただのテキストとして判断します。

ここでただのテキストとして判断する場合、さらに文字参照をわかるように区別するという処理があります。文字参照は&〜;という形であるため、単純に&〜;で囲まれた部分を別の色にします。では、&が単独で使われている場合はどうなるのか？language-htmlはブラウザやHTML専用ツールのような厳密なDOMの解釈(この処理はとても複雑で、重い)を行っているわけではないため、;が現れるまで、ずっと文字参照がつづいていると判断します。"http://〜"の場合は、その前にURLであると判断が入ってしまったため、この文字参照かどうかの処理が挟まれていないだけに過ぎません。

ちょっと何を言っているのか…という感じですが、簡単に言いますと、

• AtomでのHTMLのシンタックスハイライトは厳密で正確なHTML解釈を行っているわけではありません。
• ですので、シンタックスハイライトが正しくなくても、HTMLが間違っているというわけではありません。

他言語も対応する関係で、DOMパーサまで搭載するのはなかなか難しかったのだと思います。厳密なHTML解釈が欲しいのであれば、BlueGriffonのようなHTMLに特化したエディタを使った方がいいかもしれません。

---

さて、&の話がありましたが、次のコードを見てください。

<a href="http://localhost/hoge?a=1&b=2">link 1</a>
<a href="http://localhost/hoge?a=1&amp;b=2">link 2</a>

1と2、どちらが正しいのでしょうか？正解はHTMLのバージョンや種類によるです。HTML5より前のHTML4.01等はSGMLの一種です。XHTMLはXMLの一種です。SGMLやXMLでは&はコメントなどを除き文字参照以外で使ってはならず、link 1の書き方は文法エラーになります。XHTMLでは実際にエラーとなるブラウザも多いでしょう。HTML4.01はあまりにもそういう間違いをする人が多かったため、ただの&と解釈してくれるブラウザもありますが、本来、動作は定義されていません(HTML4.01までは間違った場合どうするかという規定はありませんでした)。かつて、HTML4ではこの問題を解決するために;を区切りに使うべきとしていましていました。;区切りはサーバー側では対応している場合がほとんどですが、HTMLを手動で書くユーザー側が全く対応していなかったという実情があります。

HTML5以降では&または&#の後に;が来る前に英数字以外が来た場合は、文字参照ではなくただの&という文字と解釈されます。エラーになるのは&hogehogefugafuga;のような存在しない文字実体参照の書き方の場合のみです。つまり、上のlink 1とlink 2は、HTML5ではどちらも正しく、どちらも同じものに解釈されます。

Atomに戻りますが、language-htmlはHTML4なのかHTML5なのかまでは判断していません。そのため、HTML4にあわせて間違った物と扱うしかないのかも知れません。もし、HTML5を書いており、今後もHTML5しか使わず、全てのHTMLをHTML5として解釈して欲しいのであれば、language-html5-subtlegradientと言う物もあります。このパッケージでは文字参照を構成しない&は&単独と判断してくれます。

Answer 2

過去に同じ質問がありますので、参照頂ければ解決するかと思います。
Atomのカラースキームがおかしくなる(htmlファイルのsrcタグにて)

Comments

[tanakatakashi]

ありがとうございます。この件と全く同じ現象です。
ＵＲＬというのは、アフィリエイトリンクのことなのですが、できればリンクはいじりたくありませんし、この先すべての「＆」を自分で変えていくのはかなり大変な作業です。
ＵＲＬを変えずに解決する方法はありませんでしょうか？

[Y.H.]

Atomの仕様が「&は特殊文字として認識する」なので、置き換えるのを拒否する以上「Atomは使用せず要件にあった別のものを使用する」しかないのでは？ やる気があるならAtomエディタはOpenSourceなので要件にあうように変更する手もあります。

[tanakatakashi]

プロトコルを省略せず、「http:」と記述すれば正常に動作するのですが、それでも「＆を特殊文字として認識」しているのでしょうか？
プロトコルを省略しないことで「＆」がちゃんと認識されていることに疑問を感じています。
別のエディタを使うことも考えてみます。
ありがとうございました。

[Y.H.]

「URIのスキーム(今回はhttp:)が指定されていればURIと判断できるため、＆を特殊文字として扱わない。」というAtomエディタの仕様なのでしょうとしか言いようがないです。

[mukkun]

tanakatakashiさん
htmlファイルで使用されている為、「&」を特殊文字として認識しています。

色々なエディタを試してきましたが、
動作が重い以外、atomは優秀ですよ。(Electronで作成されてるから重たいのかな。)

また、エディタを変更してもVSCode等の高機能エディタでは同様のことが発生するような気がします。

私は確認していませんが、
名前だけ見ると改善されそうです。試してみてはいかがでしょうか。
https://atom.io/packages/atom-special-char-highlighter

[tanakatakashi]

お二方どうもありがとうございました。
いろいろ試してみたのですがどうしても解決しなかったので、アフィリエイトリンクを編集するのは気がひけますが、担当者に連絡をしたうえでプロトコルを自分で追加することにしました。