Recent Entries

スポンサーサイト

[スポンサード リンク]


上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

ブログ記事にコードを貼りつける良い方法

[スポンサード リンク]


私のブログは、よくブログパーツとか記事にしているので記事にJavaScriptを直接貼りつけて実行させる事がよくあります
しかし、JavaScriptなどのコード自体を記事にする機会はあまりありません。
好きですがあまり得意ではないもんで…

前回、『最新記事に新着マークをつける』で書いた時にさんざん迷った挙句、<textarea>~</textarea>内にコードを記述しました
Ctrl+Aでエリア内のコードを全選択できるので便利かなと思ったんです。

でも、今回、またコードを書いた際にやっぱ面倒だなと思った事が3つ。

  1. 改行の扱いを「HTMLタグのみ 」にしないと、テキストエリア内の改行が「<br />」と表示されてしまう。
  2. 改行の扱いを「HTMLタグのみ 」にするという事は普通に改行する時にも一々<br />と改行タグを書かなくてはならないという事。(「自動改行」のが断然楽!)
  3. リストタグ(<ol>~</ol>)などのマージンがなくなって詰まって表示されてしまった。

これでは不便です~。
もしかしたらこれからコードを紹介する機会が増えるかもしれないので結論を出しました。
今回は、i d e a * i d e aさんの『ブログにコードを貼り付ける方法で悩むの巻』を参考にさせていただきました。

ブログ記事にコードを貼りつける良い方法

  1. <textarea>~</textarea>はとりあえず封印。(全選択は諦める。)
  2. <pre><code>~</code></pre>が正しいらしいのでこれを使う。
  3. 中のコードの「<」や「>」は実体参照を使う!(蓄々HTML実体参照変換が便利
  4. フォントはCourier Newや、monospaceなどのコードが読みやすい等幅フォントを使う。
    (cssで設定出来ます。font-family:"Courier New",monospace;)
  5. 変なところで改行されると見にくいので、overflowでscroll表示する。
    でも、画面から隠れるのも見づらいかも…
  6. <pre class="code">のようにpre要素にクラスを付けてcssで見てくれなどを処理する手もある。

というわけで、当ブログのコードを書くエリアは<pre><code>~</code></pre>で囲む事になりました
残念ながらCtrl+Aは使えません。
コードをコピーする際は隠れた部分を残さないように注意しましょうね

Comments

Comment Form