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

解決済
Highlighted
観光客
6 0 1

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

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

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

よろしくお願いします。

0 件の「いいね!」
Highlighted
遊覧客
20 7 17

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

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

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

{{ page.content | replace: '&', '&' }}

 

Highlighted
遊覧客
31 3 41

▸

▸

▸

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

Highlighted
観光客
6 0 1

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

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

勉強になりました。

0 件の「いいね!」
Highlighted
観光客
6 0 1

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

0 件の「いいね!」
Highlighted
先駆者
154 50 158

成功

横から失礼します。

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

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

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

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

 

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

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

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

 

 

<meta charset="utf-8" /><span>‣</span>

<! -- 上記から不要な記述を消して以下のようにしても表示されるはずです -->

‣

 

 

 

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

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

Highlighted
遊覧客
31 3 41

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

スクリーンショット 2020-11-16 17.06.15.png

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

スクリーンショット 2020-11-16 17.09.01.pngスクリーンショット 2020-11-16 17.09.06.png

Highlighted
観光客
6 0 1

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

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

0 件の「いいね!」