【2019年版】SyntaxHighlighterでブログにソースコードを表示しよう

2018年11月18日

スポンサーリンク

さて、今回からブログで副収入獲得を目指すための特集です!
本特集では、ブログを私が運営、育成する過程で得た知識のアウトプットを行っていきます。
ブログを作ったけど、何をしようという方の手助けになればと思っています。

【次】
開始15日の弱小ブログが8記事でAmazonアソシエイトの審査に合格した話

第一回目の記事は、ブログでソースコードを綺麗に表示する方法について。
まずは、結果からどうぞ!

int main(void){
	printf("Hellow Blog");
	return 0;
}

では、導入手順をどうぞ!
*本記事は2018/11/18に作成したものです。
(注)今回はライブドアブログで導入することを前提にしています。

スポンサーリンク

SyntaxHighlighterとは?

SyntaxHighlighterとは、、、実際私も詳しくは理解してません(笑)。
ただ、ここで一番重要なのはブログの記事内に、ソースコードを
綺麗に表示してくれるということです。
私が、調べた中では様々な言語に対応しているみたいです。
概要部分で見せたようなソースコードの表示が可能になります。

SyntaxHighlighterを入手しよう

では、実際にSyntaxHighlighterを導入していきましょう。
様々な、サイトで紹介されている方法では、
2018/11/18現在
ダウンロードしたファイルに目的のものがない!

という、問題が発生していました。。。。。
なので今回は、私が行った方法を紹介します。

SyntaxHighlighterダウンロード

まずは、以下サイトでSyntaxHighlighterをダウンロードします。
SyntaxHighlighter

サイトに飛ぶと右のほうに、ダウンロードというボタンがあるので、
そこからダウンロードをしましょう。

syntaxhighlightertみたいな名前のファイルが、zipでダウンロードされるので
解凍して、中にscripts,stylesというファイルがあることを確認しましょう。
ちなみに、私がDLしたときは、以下のディレクトリの中にありました。


syntaxhighlighter->syntaxhighlighter->syntaxhighlighter3

これで、syntaxhighlighterの入手は終了です!

ブログの設定

実際に、ブログの記事にソースコードを導入していきましょう!

syntaxhighlighterを自ブログに設置しよう

最初にsyntaxhighlighterを、自分のブログに組み込む作業です。
まず、ブログ管理画面から以下の手順で設定画面を開きましょう


【ブログ設定】->【画像/ファイル】->【ファイル管理】

次に設定画面内にある、【フォルダを作る】を選択して、
syntaxhighlighterを、導入するファイルを作成しましょう。
今回はtmp01というファイルで作成を行いました。

*この後の作業でこのファイル名を使うところがあるので、
コピペで作業をしたい方は、tmp01という名前にするのを勧めます。

ファイルを作成したら次はtmp01を開いて、scriptsとstylesの2ファイルを作成しましょう。
最後に、作成したscriptsとstylesに、
先ほどダウンロードしたsyntaxhighlighterの、scriptsとstylesの中身をコピーしましょう。
*syntaxhighlighterのscriptsとstylesと自分のブログのscriptsとstylesを同じ構成にしましょう。

結果は以下のような、画面になるかと思います。

ブログの設定をしよう

次にブログの設定をしていきます。
ブログの設定方法は


ブログの設定->カスタムjs 
を開きましょう。

そうすると、以下のような画面になると思います。

次に、head内という項目に以下の内容を張り付けましょう。
*青文字は、絶対に必要な所です。
 赤文字は、自分が使用したい言語に合わせましょう。
javaならshBrushJava.js,C言語ならshBrushCpp.js というように記載しましょう
*自分のブログURLは、自分が運営しているライブドアブログのURLを記載すればOKです。


<script type="text/javascript" src="自分のブログURL/tmp01/scripts/shCore.js"></script>

<script type="text/javascript" src="自分のブログURL/tmp01/scripts/
shBrushJava.js"></script>
<script type="text/javascript" src="自分のブログURL/tmp01/scripts/
shBrushCpp.js
"></script><link type="text/css" rel="stylesheet" href="自分のブログURL/tmp01/styles/shCore.css"><link type="text/css" rel="stylesheet" href="自分のブログURL/tmp01/styles/shThemeDefault.css">


*上記のtmp01は先ほど作成したファイル名になります。

次に、body内に以下の記述をしましょう
<script type="text/javascript">SyntaxHighlighter.all()</script>

お疲れさまでした!
これで、記事にソースコードを記載する準備が整いました!

記事にソースコードを導入しよう

では、最後にソースコードを記載していきましょう!!
方法は、簡単です!
以下のように記載すれば、完成です!


<pre  class="brush:cpp">
ソースコード
</pre>

赤文字の部分を、自分の使いたい言語に変更するれば、
javaでもphpでもどんとこいです!!

お疲れさまでした以上で、今回の内容は終わりです!

参考

livedoor Blogにソースコードを見やすく貼る方法(シンタックスハイライターを使って)

スポンサーリンク