Html特殊文字を表示する方法について

現在、「コードの編集」からHTMLを入力しています。

ページ内で▸(右向き小正三角形)を指定したいのですが、保存すると、▸と変換されてしまい、そのままHTMLに出力されてしまいます。

このような特殊文字を表示する方法について、アドバイスをいただけると幸いです。

よろしくお願いします。

エディターの仕様は変えられませんが、表示側で無理やり表示は出来ます。遠くにセキュリティリスクを感じるので、

ご使用は内容を確認の上お願い致します。

ページの場合の書き換え、

{{ page.content | replace: ‘&’, ‘&’ }}

1 Like

どれも使えました。最新のブラウザであれば大丈夫な気がしますが、どうでしょう。

1 Like

アドバイスありがとうございます。

page.liquid側で置換するという方法があったのですね。やってみたら正しく表示されました。

勉強になりました。

Chrome(Mac版)を最新にしてから、エディタに上記コードを入力してみたところ、まだ ▸に変換されてしまいました。エディタの仕様になりますかね?

横から失礼します。

入力したことがなかったので試しまして、私の環境では以下のような動作を確認しました。

  • MacのChromeで確認
  • 入力欄で「<>」ボタンを押し、「▴ 」を入力し、もう一度「<>」ボタンを押し、さらにもう一度「<>」ボタンを押す
  • 意図通りHTMLエディタで「右向き黒三角」が表示される
  • この状態で保存すると「右向き黒三角」としてページに表示される

少々わかりにくいですがHTMLエディタで「▴ 」を入力した段階で保存すると「▸」に変換されます。

また、「<>」ボタンを押してビジュアルエディタ(HTMLエディタではない方)にした段階で保存しても「▸」に変換されます。

ここまでを踏まえまして、HTMLエディタ上で「▴ 」ではなく「▸」になっていればよいと考え以下を試しましたら目的の動作となることを確認しました。あくまで私の環境ではですが。

  • 参照ではなくそのまま ▸ をコピーしてペーストする

ペースト時に以下のようになる場合があるかもしれませんが、不要な部分を消しても問題なく表示されるずです。

‣

‣

この方法も少々微妙に思いますが、どうしても「‣」を使いたいという場合は検討できるかもしれません。

なお数値文字参照の「▸」と「▸」は私の環境でも意図した動作になっていましたので、個人的には文字実体参照の「▴」ではなく「▸」を使う方がよいかなと思いました。

1 Like

コードを編集」と書かれてあったのでテーマの話かと思っていましたが、ページの「エディタ」の話だったのですね。
(コードのほうではどれも使えていました)

確かに、ビジュアルエディタとHTMLエディタの切り替えは、コードが変換されてしまうので要注意ですね。

2 Likes

アドバイスありがとうございます。

ご共有いただいた方法で試してみたところ、入力することができました。