~ モバイル版(スマートフォン)の操作 ~
左右にスワイプすると、前後の投稿へ移動します。
← 前の投稿 | 次の投稿 →
日々のコンピュータ情報の集積と整理

Dr.ウーパのコンピュータ備忘録

2014年5月3日土曜日

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/


スポンサーリンク

コメントを投稿

コメント投稿機能について