summon

abrakatabra

はてなブログでコードを楽に載せる方法(見たままモードで簡易的な方法)

はてなブログでプログラムのコードを載せる場合結構面倒だったりする。

はてなブログでプログラムのコードを楽に載せる方法

 はてなブログでプログラムのコード(またはHTMLソース・CSSなど)をきれいに載せるには、はてな記法モードではてな記法を使う方法や、Gistと言う外部サービスを引用する方法がある。

しかし、普段見たままモードを使って記事を書いている人は、はてな記法に変更して書いたり外部サービスを使うのは結構面倒。

と言うことで、見たままモードのまま簡易的にコードを載せる方法。

 

HTML編集で<pre></pre>タグの間にコードを書けばそれっぽくなる。 

つまり、<pre>タグを利用すればコードをそのまま載せることができると言う話。 

 

<pre>

ここにコードを描く
HTML編集でも改行はそのまま反映される


echo "HelloWorld" ;

</pre>

 

↑をHTML編集に書くと↓の表示になる。

 

ここにコードを書く
HTML編集でも
改行はそのまま反映される
自動改行(折り返し)はされない
**********************************************************************************************************************************************************************************
echo "HelloWorld" ;

 

こういう感じでpreタグの内は枠が付いて、枠内は自動改行(折り返し)が無効になる。

これでコードをそのまま載せることができる。

見たままモードだと何かとズレやすいので、プレビューや記事公開後の表示確認を忘れずに。

広告を非表示にする