回答編集履歴

1

エスケープサンプル追加

2017/11/24 16:38

投稿

nnahito
nnahito

スコア2004

test CHANGED
@@ -35,3 +35,69 @@
35
35
  [私のサイト](https://nnahito.com/articles/9)では、正常に動作しているのですが……
36
36
 
37
37
  正常に動作していないスクリーンショットなどございますか?
38
+
39
+
40
+
41
+ # 追記
42
+
43
+ 失礼しました。
44
+
45
+
46
+
47
+ > HTMLのソースコードを表示したい場合はHTMLエスケープされたコードじゃないとだめらしいですが
48
+
49
+ それ以外になんかいい方法ないでしょうか?
50
+
51
+
52
+
53
+ こちらの部分を見落としておりました。
54
+
55
+
56
+
57
+ そうですね、エスケープを行わないとやはり<code>タグ内といえどHTMLと解釈されてしまいます。
58
+
59
+ なので、JavaScriptなどで<code>タグの中身を簡単にエスケープしてしまえばいいかと思います。
60
+
61
+
62
+
63
+ ↓エスケープのサンプル
64
+
65
+
66
+
67
+ ```JavaScript
68
+
69
+ //コードエリア
70
+
71
+ $("code").html(function(){
72
+
73
+ var txt = $(this).html();
74
+
75
+
76
+
77
+ //クォーテーションの置換
78
+
79
+ txt = txt.replace(/["]/g, "&quot;"); //"
80
+
81
+
82
+
83
+ //<>の置換
84
+
85
+ txt = txt.replace(/[<]/g, "&lt;");
86
+
87
+ txt = txt.replace(/[>]/g, "&gt;");
88
+
89
+
90
+
91
+ //(最後に)全ての改行コードを<br>に変更
92
+
93
+ txt = txt.replace(/[\n\r]/g, "<br>");
94
+
95
+ txt = txt.replace("<br>", ""); //最初の行の「<br>」を削除
96
+
97
+
98
+
99
+ $(this).html(txt);
100
+
101
+ });
102
+
103
+ ```