そのままコードを書いたらただのテキスト
<!DOCTYPE html>
<html lang=”ja”>
<head>
<metacharset=”UTF-8″>
<title>blog</title>
</head>
<body>
<h1>Hello</h1>
</body>
</html>
<pre><code>コード</code></pre>で書く
<pre><code>
<!DOCTYPE html>
<html lang=”ja”>
<head>
<metacharset=”UTF-8″>
<title>blog</title>
</head>
<body>
<h1>Hello</h1>
</body>
</html>
</pre></code>
ワードプレスのビジュアル側で書くとサニタイズされるので、そのままテキストとして表示される。
ワードプレスのテキスト側で書くと
Hello
グレーの枠で囲まれた。
これだと、タグが認識されるので、h1で表示される。
しかし、コードが表示されていないので、
コードはサニタイズする必要がある。
結論として、
テキスト側で、<pre><code>を書き、ビジュアル側にコードを貼り付けるのが一番簡単そうだ。
//ここにソースコードを入力
<!DOCTYPE html>
<html lang="ja">
<head>
<metacharset="UTF-8">
<title>blog</title>
</head>
<body>
<h1>Hello</h1>
</body>
</html>
こんな感じか。
- JavaScriptでテキストタイプに変更する
上記を応用して、
<pre><code id="pc0"></code></pre>
<script id="ct0" type="text/plain"></script>
<script>
document.getElementById('pc0').textContent = document.getElementById('ct0').textContent;
</script>
参考
https://teratail.com/questions/15565
<script>タグ内はサニタイズされないので、それを利用する。
次回:ブログにコードを貼り付けたい 方法2