ブログにソースコードを載せたい

そのままコードを書いたらただのテキスト

 <!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">
     <!DOCTYPE html>〜のようにコードをこの中に書いていく
</script>
<script>
     document.getElementById('pc0').textContent = document.getElementById('ct0').textContent;
</script>

参考

https://teratail.com/questions/15565

<script>タグ内はサニタイズされないので、それを利用する。

 

次回:ブログにコードを貼り付けたい 方法2

https://weekend-v.work/blog/wp/archives/22