改行が変!?自動改行するブログでのSyntaxHighlighterの表示崩れを回避する方法

2014年10月01日

自動改行するブログでのSyntaxHighlighterの表示崩れを回避方法

あ、ありゃ!?
なんだかSyntaxHighlighter内の改行が変だゾ。

こ、これは詰んだ...のか。
(; ・`д・´)



ども、前回の記事から「SyntaxHighlighter」を導入してみたピアノ教室管理人です。


HTMLやCSSなどのコードをブログ上で書き示すとき、SyntaxHighlighterはとても便利でしかもキレイに表示してくれるJavaScriptツールです。


こういうヤツですね。^^
.goArticle{
pointer-events:none;
cursor:default;
text-decoration:none;
color:#000000; /*通常の文字と同じ色を指定*/
}


このブログでは「syntaxhighlighter_3.0.83」を使っていますが、導入の仕方については既にネット上に豊富にありますので、そちらを参考にしてください。


管理人はこちらを参考にさせていただきました。
SyntaxHighlighterでソースを読みやすく掲載する方法 | All About




さてSyntaxHighlighterをこのSeesaaブログに導入する過程で、小一時間ほどハマってしまったことがあったので、その解決策をちょこっと書いておきます。




SyntaxHighlighter内の表示が改行されない怪現象に遭遇!!


SyntaxHighlighter内の表示が改行されない

このSeesaaブログをはじめアメブロやJUGEMなど、いわゆる無料ブログサービスのエディタは、ブロガーがあまりHTMLタグを意識しないでもいいように、さまざまな改良が施されていますよね。


そのひとつが「自動改行」。


ブロガーさんが記事を書きながらエディタ上で改行すると、自動的に改行を意味する<br>、もしくは<br />タグに変換され、実際の記事に反映されるお馴染みの機能です。


Seesaaブログにも「改行HTMLタグ変換」としてこの自動改行の機能がついています。

seesaa-automatically-break01_mini.jpg

ブログ全体一括でも、また記事ごとにでも設定を変えることができます。




このブログでは常に「改行は<br />タグに変換する」に設定したまま記事を書いているんですが、実はこの自動改行がSyntaxHighlighterの表示を変にしてしまうんですよ、これが。

こんな感じに。

SyntaxHighlighter内の表示がまったく改行されない

▲横スクロールバーが出ていることからわかるように、SyntaxHighlighter内の表示がまったく改行されなくなっちゃいました!
ヽ(´Д`;)ノアゥア...




もちろん「改行を<br />タグに変換しない」に設定して、自動改行をOFFにすれば解決するんですが、そうすると今度は自分で<br />タグを打つ必要が出てきてしまいウザいことこの上なし。


で、どうせそこまでやるんだったら<P>タグも打ちたくなってしまうのが人情というもの。


しかしそれでは自動改行のメリットを享受することができませんし、それならWordPressでやるよということになってしまいます。


う〜ん、これは詰んだか。
(´ヘ`;)ウーム…




で、小一時間ほどGoogle先生に相談した結果、解決策を見つけました。




自動改行するブログでのSyntaxHighlighterの表示崩れの回避方法


自動改行するブログでの表示崩れ回避方法

回避方法はとても簡単!

<script type="text/javascript">
SyntaxHighlighter.config.bloggerMode = true;
SyntaxHighlighter.all();
</script>

このコードを</body>タグの前にでも書いておけばOK。

これにて一件落着ぅ〜。
(`・ω・´)シャキーン


どうもSyntaxHighlighterのマニュアルに書いてあるみたいなんですが、管理人、英語が読めませヌ。

翻訳作業もしたくない...。^^;


んで、こちらのブログさんに教えてもらいましたとさ。
さくらのブログやSeesaaブログでSyntaxHighlighterを使う。 | 俺の砂箱




それではまた。
(´∀`*)ノシ バイバイ


【オヌヌメ】
JavaScript逆引きレシピ jQuery対応
実践で即役立つテクニックと開発ノウハウ、つまづきやすい・ハマりやすいポイントを徹底解説した「JavaScript/jQueryを利用するWebプログラマ必携の逆引き集」。amazon

ランキング参加中!応援ポチお願いします。ヾ(*´∀`*)ノ♪

にほんブログ村 デザインブログ Webデザインへ 人気ブログランキングへ
このブログの目次
 
この記事へのコメント
コメントを書く
お名前: [必須入力]

URL(任意):

コメント: [必須入力]

※ブログオーナーが承認したコメントのみ表示されます。
×

この広告は1年以上新しい記事の投稿がないブログに表示されております。