[HTML]さくらのブログでSyntaxHighlighterを使う場合の留意点

このブログではプログラムソースの表示に「SyntaxHighlighter」を使用しています。
しばらく使っていて色々分かったところもあるので、一度ここで確認をしておこうと思う。

○編集
preタグの中にHTML上影響の与える文字が含まれると、うまく表示されない場合があるので置き換え文字を使用する。
このサイトが便利。

「preタグ・メーカー」
http://www.mapee.jp/tools/pretagmaker/

○投稿
改行HTMLタグ変換
「改行をタグに変換しない 」に設定
URL補完
「補完しない」 に設定

○初期設定
1.SyntaxHighlighterを自分が所有するサーバスペースにアップ

2.HTMLの編集
管理パネル
「デザイン」→「HTML」→「HTMLの追加」

ここで、必要なタグの追加
※headタグ中

<!-- SyntaxHighlighter -->
<link type="text/css" rel="stylesheet" href="http://<自分が所有するサイトのドメイン>/syntaxhighlighter/styles/shCore.css">
<link type="text/css" rel="stylesheet" href="http://<自分が所有するサイトのドメイン>/syntaxhighlighter/styles/shThemeDefault.css">

※bodyの閉じタグの手前

<!-- SyntaxHighlighter -->
<script type="text/javascript" src="http://<自分が所有するサイトのドメイン>/syntaxhighlighter/scripts/shCore.js"></script>
<script type="text/javascript" src="http://<自分が所有するサイトのドメイン>/syntaxhighlighter/scripts/shAutoloader.js"></script>
<script type="text/javascript">
SyntaxHighlighter.autoloader(
'applescript            http://<自分が所有するサイトのドメイン>/syntaxhighlighter/scripts/shBrushAppleScript.js',
'actionscript3 as3      http://<自分が所有するサイトのドメイン>/syntaxhighlighter/scripts/shBrushAS3.js',
'bash shell             http://<自分が所有するサイトのドメイン>/syntaxhighlighter/scripts/shBrushBash.js',
'coldfusion cf          http://<自分が所有するサイトのドメイン>/syntaxhighlighter/scripts/shBrushColdFusion.js',
'cpp c                  http://<自分が所有するサイトのドメイン>/syntaxhighlighter/scripts/shBrushCpp.js',
'c# c-sharp csharp      http://<自分が所有するサイトのドメイン>/syntaxhighlighter/scripts/shBrushCSharp.js',
'css                    http://<自分が所有するサイトのドメイン>/syntaxhighlighter/scripts/shBrushCss.js',
'delphi pascal          http://<自分が所有するサイトのドメイン>/syntaxhighlighter/scripts/shBrushDelphi.js',
'diff patch pas         http://<自分が所有するサイトのドメイン>/syntaxhighlighter/scripts/shBrushDiff.js',
'erl erlang             http://<自分が所有するサイトのドメイン>/syntaxhighlighter/scripts/shBrushErlang.js',
'groovy                 http://<自分が所有するサイトのドメイン>/syntaxhighlighter/scripts/shBrushGroovy.js',
'java                   http://<自分が所有するサイトのドメイン>/syntaxhighlighter/scripts/shBrushJava.js',
'jfx javafx             http://<自分が所有するサイトのドメイン>/syntaxhighlighter/scripts/shBrushJavaFX.js',
'js jscript javascript  http://<自分が所有するサイトのドメイン>/syntaxhighlighter/scripts/shBrushJScript.js',
'perl pl                http://<自分が所有するサイトのドメイン>/syntaxhighlighter/scripts/shBrushPerl.js',
'php                    http://<自分が所有するサイトのドメイン>/syntaxhighlighter/scripts/shBrushPhp.js',
'text plain             http://<自分が所有するサイトのドメイン>/syntaxhighlighter/scripts/shBrushPlain.js',
'py python              http://<自分が所有するサイトのドメイン>/syntaxhighlighter/scripts/shBrushPython.js',
'ruby rails ror rb      http://<自分が所有するサイトのドメイン>/syntaxhighlighter/scripts/shBrushRuby.js',
'sass scss              http://<自分が所有するサイトのドメイン>/syntaxhighlighter/scripts/shBrushSass.js',
'scala                  http://<自分が所有するサイトのドメイン>/syntaxhighlighter/scripts/shBrushScala.js',
'sql                    http://<自分が所有するサイトのドメイン>/syntaxhighlighter/scripts/shBrushSql.js',
'vb vbnet               http://<自分が所有するサイトのドメイン>/syntaxhighlighter/scripts/shBrushVb.js',
'xml xhtml xslt html    http://<自分が所有するサイトのドメイン>/syntaxhighlighter/scripts/shBrushXml.js'
);
SyntaxHighlighter.defaults['toolbar'] = true;
SyntaxHighlighter.config.bloggerMode = true;
SyntaxHighlighter.all();
</script>
※ご注意
掲載している内容についてはご自身の責任で参考にされてください。