【ブログ】ライブドアブログへの「Syntaxhighlighter」導入メモ（面倒くさがりの人向け）

livedoor_syntax

既に色々な所で解説記事がありますが、
私自身が異様に手こずったので覚書。

あんまり深い部分には触れず、取り敢えず
使ってみたい人向けの記事となっています。

よって、適当です。無駄な部分が多々あります。
ただ、その無駄がわからない人はとりあえず、
下記のとおりにやってみて下さい。

まぁ、コードをブログに貼ろうと思っている人は
なんとなく無駄部分がわかると思います(；´∀｀)。

ざっくりとした手順

・「SyntaxHighliter」をDL。
・ FTPソフトでデータをアップロード
・ブログのHTMLを編集して完了。

１．「syntaxhighlighter」をDL

これがないと始まらないのでDL。もちろん無料。
DLをした圧縮ファイルを解凍しておく。

今回使用するのは「scripts」「styles」の２つのフォルダーのみ。
適当なフォルダを作成し、２つのフォルダを突っ込んでおく。
syntax_160429 (3)

２．FTPクライアントでデータをアップロード

今回はFTPクライアントソフトとして有名な
「FFFTP」を使用してデータをアップロードします。

ライブドアブログの場合、一括アップロードは
FTPクライアントを使わないと出来ません。

クライアントソフトのインストールは省略。
FFFTPでのライブドアのアクセス方法は
下記のライブドア公式を参考にして下さい。
FTPアクセスを使用する。

FFFTPにて自分のブログに接続し、画面右に①で
作成した「sh」フォルダをドラッグアンドドロップすれば
アップロードが開始されます。
syntax_160429 (1)

アップロードが完了したらブログの管理画面
「画像 / ファイル」→タブ「ファイル管理」でアップロードを確認する。
syntax_160429 (1)

３．HTMLを編集する

管理画面から「ブログ設定」→「PC」→「カスタマイズ」の下記４つに追記する。
『トップページ』『個別記事ページ』『カテゴリアーカイブ』『月別アーカイブ』

①</head>の直前に追記

<!-- Syntax -->
<link  type="text/css" rel="stylesheet" href="/sh/styles/shCore.css">
<link  type="text/css" rel="stylesheet" href="/sh/styles/shCoreDefault.css">
<script type="text/javascript" src="/sh/scripts/shCore.js"></script>
<script type="text/javascript" src="/sh/scripts/shAutoloader.js"></script>
<!-- Syntax -->

②</body>の直前に追記

<!-- Syntax -->
<script type="text/javascript">
SyntaxHighlighter.autoloader(
"as3						/sh/scripts/shBrushAS3.js",
"apple						/sh/scripts/shBrushAppleScript.js",
"bash						/sh/scripts/shBrushBash.js",
"c-sharp csharp				/sh/scripts/shBrushCSharp.js",
"cf coldfusion				/sh/scripts/shBrushColdFusion.js",
"cpp c						/sh/scripts/shBrushCpp.js",
"css						/sh/scripts/shBrushCss.js",
"delphi pas pascal			/sh/scripts/shBrushDelphi.js",
"diff						/sh/scripts/shBrushDiff.js",
"erl erlang					/sh/scripts/shBrushErlang.js",
"groovy						/sh/scripts/shBrushGroovy.js",
"js jscript javascript		/sh/scripts/shBrushJScript.js",
"java						/sh/scripts/shBrushJava",
"jfx javafx					/sh/scripts/shBrushJavaFX.js",
"perl pl					/sh/scripts/shBrushPerl.js",
"php						/sh/scripts/shBrushPhp.js",
"plain						/sh/scripts/shBrushPlain.js",
"ps powershell				/sh/scripts/shBrushPowerShell.js",
"python py					/sh/scripts/shBrushPython.js",
"rails ror ruby				/sh/scripts/shBrushRuby.js",
"sass						/sh/scripts/shBrushSass.js",
"scala						/sh/scripts/shBrushScals.js",
"sql						/sh/scripts/shBrushSql.js",
"vb vbnet					/sh/scripts/shBrushVb.js",
"html xml xhtml				/sh/scripts/shBrushXml.js"
);
SyntaxHighlighter.all();
</script>
<!-- Syntax -->

SyntaxHighlighter.autoloader(

"as3 /sh/scripts/shBrushAS3.js",

"apple /sh/scripts/shBrushAppleScript.js",

"bash /sh/scripts/shBrushBash.js",

"c-sharp csharp /sh/scripts/shBrushCSharp.js",

"cf coldfusion /sh/scripts/shBrushColdFusion.js",

"cpp c /sh/scripts/shBrushCpp.js",

"css /sh/scripts/shBrushCss.js",

"delphi pas pascal /sh/scripts/shBrushDelphi.js",

"diff /sh/scripts/shBrushDiff.js",

"erl erlang /sh/scripts/shBrushErlang.js",

"groovy /sh/scripts/shBrushGroovy.js",

"js jscript javascript /sh/scripts/shBrushJScript.js",

"java /sh/scripts/shBrushJava",

"jfx javafx /sh/scripts/shBrushJavaFX.js",

"perl pl /sh/scripts/shBrushPerl.js",

"php /sh/scripts/shBrushPhp.js",

"plain /sh/scripts/shBrushPlain.js",

"ps powershell /sh/scripts/shBrushPowerShell.js",

"python py /sh/scripts/shBrushPython.js",

"rails ror ruby /sh/scripts/shBrushRuby.js",

"sass /sh/scripts/shBrushSass.js",

"scala /sh/scripts/shBrushScals.js",

"sql /sh/scripts/shBrushSql.js",

"vb vbnet /sh/scripts/shBrushVb.js",

"html xml xhtml /sh/scripts/shBrushXml.js"

);

SyntaxHighlighter.all();

</script>

４．使い方

例：HTML

<pre  class="brush: html;">
<a  href="http://example.com">Example</a>

1 2	<pre class="brush: html;"> <a href="http://example.com">Example</a>

例：C言語

<pre  class="brush: cpp;">
void main(void){

unsigned char i = 0;

for(i = 0; i &lt; 10; i++){
printf("i=%d\n", i);
}
}

void main(void){

unsigned char i = 0;

for(i = 0; i < 10; i++){

printf("i=%d\n", i);

}

５．まとめ

前々から色々とやっていて、やっと導入が出来た。
なぜこんなに時間がかったのか、情けない(-_-;)。

今後はプログラム関係の記事もしっかり更新する予定。
てか、本来はそっちがメインでブログを立ち上げたはずなのに
完全に「艦これ」メインのブログになってしまった・・・。

提督の皆様。
夏イベ、頑張りましょう(・∀・)b！

宜しければ、ポチッとお願いします。

スラスラわかるHTML&CSSのきほん

posted with amazlet at 16.07.19

狩野祐東
SBクリエイティブ
売り上げランキング: 13,110

Amazon.co.jpで詳細を見る