SyntaxHighlighterで装飾したソースコードを Blogger のエディタで編集するときの注意事項

以下のSyntaxHighlighterで装飾したソースコード(<pre>タグ内にコードを記載）を Blogger のエディタで編集するとします。

表示

void main(void) 
{
}

HTML

<pre class="brush: js;">
void main(void) 
{
}
</pre>

ここで、Blogger のエディタで main 関数内に処理を追加します。

表示

void main(void) 
{

    printf("HELLO!\n");
}

HTML

<pre class="brush: js;">
void main(void) 
{
</pre>
<pre class="brush: js;">
    printf("HELLO!\n");
}
</pre>

すると、処理を追加した前後でいったん<pre>タグが閉じられ、新たに<pre>タグが開始されています。

従って、SyntaxHighlighterで装飾された結果では、そこで装飾が終了し、すぐに装飾が開始されるような表示になってしまいます。


そのため、SyntaxHighlighterで装飾したソースコードを Blogger のエディタで編集するときには、テキストを追加したら HTML を確認し、不要な</pre><pre>を削除する必要があります。

SyntaxHighlighter の装飾を各言語別に試せる Web サービス運用中です！

装飾用 HTML の作成も行えます！

SyntaxHighlighter用の<pre>タグを作成するWebサービス - <pre> Generator for SyntaxHighlighter
http://drupa.jpn.org/SyntaxHighlighter-pre-Generator/