はてなブログ　ソースコードの表示について

今回初めてソースコードをブログ上で表示しようとして色々サイトをぐぐって調べやり方はわかったが実際には思ったように動いてくれないので困っている。Webブラウザ上でのデバグの仕方を身に着けてないのでどこがおかしいのかわからないでお手上げ状態である。

これまでに得た知識の整理：

１．HTML上の記述方法
　ソースコードをHTMLの中で表示したい場合は、
<pre><code> </code></pre>

で挟んだ中にソースコードを記述すると以下の恩恵が得られるらしい。
・等幅フォントで表現される。➡　なぜか罫線とかはダメでした。
・改行を見た目のまま実現してくれる。
・<pre>タグを使うと、改行やタブ・スペースを入れて整形したテキストをそのまま表示することができます。<pre>は「preformatted text」の略です。

２．はてなブログにおけるソースコードを埋め込むやり方
　3つあるらしいがそのうちの一つであるはてなブログの記述でやってみたが結果が期待どおりにならなかった。
>|java|
String peace = "azatoi";
||<

　具体的にここまででこの記事がHTML的にどのようになっているかこれからチェックします。

３．HTML編集モードがでない・・・
　調べたら最初に編集モードが「はてな記法」になっているとHTMLタブは出ないみたいです。
　よってこの記事はHTMLタブが出ない状態となっています。
　別途もう一回記事を書く前に編集モードを「みたまま」とかにしてからここの本文を再度記述して確認してみたいと思います。

４．はてな記法でソースコードを表示する方法は下記のようにうまくいったようです。
　　ただ行番号がだめみたいですね。➡原因がわかりました。実現方法については別記事にて説明します。