既に色々な所で解説記事がありますが、
私自身が異様に手こずったので覚書。
あんまり深い部分には触れず、取り敢えず
使ってみたい人向けの記事となっています。
よって、適当です。無駄な部分が多々あります。
ただ、その無駄がわからない人はとりあえず、
下記のとおりにやってみて下さい。
まぁ、コードをブログに貼ろうと思っている人は
なんとなく無駄部分がわかると思います(;´∀`)。
ざっくりとした手順
・「SyntaxHighliter」をDL。
・ FTPソフトでデータをアップロード
・ブログのHTMLを編集して完了。
1.「syntaxhighlighter」をDL
これがないと始まらないのでDL。もちろん無料。
DLをした圧縮ファイルを解凍しておく。
今回使用するのは「scripts」「styles」の2つのフォルダーのみ。
適当なフォルダを作成し、2つのフォルダを突っ込んでおく。
2.FTPクライアントでデータをアップロード
今回はFTPクライアントソフトとして有名な
「FFFTP」を使用してデータをアップロードします。
ライブドアブログの場合、一括アップロードは
FTPクライアントを使わないと出来ません。
クライアントソフトのインストールは省略。
FFFTPでのライブドアのアクセス方法は
下記のライブドア公式を参考にして下さい。
FTPアクセスを使用する。
FFFTPにて自分のブログに接続し、画面右に①で
作成した「sh」フォルダをドラッグアンドドロップすれば
アップロードが開始されます。
アップロードが完了したらブログの管理画面
「画像 / ファイル」→タブ「ファイル管理」でアップロードを確認する。
3.HTMLを編集する
管理画面から「ブログ設定」→「PC」→「カスタマイズ」の下記4つに追記する。
『トップページ』『個別記事ページ』『カテゴリアーカイブ』『月別アーカイブ』
①</head>の直前に追記
1 2 3 4 5 6 |
<!-- 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>の直前に追記
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 |
<!-- 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 --> |
4.使い方
例:HTML
1 2 |
<pre class="brush: html;"> <a href="http://example.com">Example</a> |
例:C言語
1 2 3 4 5 6 7 8 9 |
<pre class="brush: cpp;"> void main(void){ unsigned char i = 0; for(i = 0; i < 10; i++){ printf("i=%d\n", i); } } |
5.まとめ
前々から色々とやっていて、やっと導入が出来た。
なぜこんなに時間がかったのか、情けない(-_-;)。
今後はプログラム関係の記事もしっかり更新する予定。
てか、本来はそっちがメインでブログを立ち上げたはずなのに
完全に「艦これ」メインのブログになってしまった・・・。
提督の皆様。
夏イベ、頑張りましょう(・∀・)b!
SBクリエイティブ
売り上げランキング: 13,110