FC2 で、プログラムのソースコードを綺麗に表示する方法と、ただ改行しただけなのに、 が表示されてしまうときの対処方法 #blog #ソースコード #HTML #CSS #テンプレート
プログラムのソースコードは pre TAG で書いてたけど、他のサイトの人たちが綺麗に表示できているので、ググってみた。そいつの名前は、
「 SyntaxHighlighter 」
Javascript で、できている。
スクリプトのダウンロードと設置方法に関しては、色々なサイトがあるけど、
FC2ブログでソースコードを綺麗に表示する方法
が、いい情報。ただし、
「 ④FC2ブログの /body の下に以下を記述する」
とあるけど、
「 /body のすぐ前の方がいい」
です。たぶん、/body の下だと、スクリプトが動かないと思う。
スクリプトのソースの中の「shBrushJScript.js」の様なスクリプトファイルは、この場合だと、JavaScript 用と想像が付く。
ソースを書くところでは、
のように、「←ここ」とかいた html を cpp や python そして java 等と書いておけば、各言語にのっとって、ソースを適切に表示してくれる、はず。
他の言語に対応したいときは、そのスクリプトファイルをブログにアップして(置き場所は画像と同じでOK)、それを、「このサイトの様に」 script タグを追加していく必要がある。
ブログ記事の、コードを表示させるところには、
の様に書く。そうすると、ソースが、行番号とともに表示される。
と言いたいところだけど、上の例では、HTML コードを表示させようとしたんだけど、閉じタグの /textarea の先頭の方が先に処理され、表示されなかった。こういうときは、
これで、どすか？最初の「＜」だけを「＆ｌｔ；」と、エスケープコードで書けばいいのです。そうすると、タグとは見なされないので。
さてと、今さらだけど、これをやっても、ENTERキーで改行したときに、br タグが、勝手に表示されてしまう。その対策は、
「自動改行するブログのSyntaxHighlighterの表示崩れの回避方法」
に書いてある。
ただし、FC2ブログは、私はこれでは解決できなかった。解決策は、ブログの設定の中を、
「投稿設定」⇒「自動改行」⇒ 「HTMLタグ以外は無視」
の様に設定する。
えっと、以上！私、これを調べ上げるのに、日曜日を、ほぼ半分費やしてしまいまた。つらいです・・・
あぁ、こんなに時間をかけても、文章がわかりにくいから、役に立たない情報になってしまうんだろうな。書き直す根性もないし 💦
あと、この直前の記事 「test test test 」 が、このテストをやった残骸です。
「はい！問題発生！」
自動改行の設定を変えたので、１行空けるときは br タグを２個続けて書かないといけない。それとも、段落を、ちゃんと p /p タグで囲むか。それも、つらい 💦
あぁ、くそ、コードを書く [ textarea ] タグの前後は、逆に、行間が空きすぎてる。前後に br タグは不要だ。あぁ、もう、帰りたい 💦
0」が面白い。