ソースコードを綺麗に見せるJS「SyntaxHighlighter」の設置手順

2022/12/04

ソースコードを綺麗に見せるJS「SyntaxHighlighter」の設置手順

ブログをカスタマイズする時、分からないソースコードはその都度ネットで調べるのですが、良く見かけるのが綺麗にハイライトして表示してあるもの。

以前から気になっていて今回このブログでも導入してみたのでその手順を紹介します。

ソースコードとは、コンピュータプログラムを記述するために使用されるテキストファイルです。プログラム言語によって書かれたソースコードは、コンピュータが理解することができる命令を記述しています。それらの命令は、コンピュータに対して特定の処理を行わせることができます。例えば、JavaやPythonなどのプログラミング言語で書かれたソースコードは、アプリケーションやウェブサイトなどを作成するために使用されます。

色々調べて探して見ましたが、一番良さげだったのでsyntaxhighlighterにしました。

javascriptとCSSで実装されているようです。

それではまずは下準備として「SyntaxHighlighter」をダウンロードします。

Download

ダウンロード解凍したファイルの中から

■Stylesフォルダ内
・SyntaxHighlighter.css

■Scriptsフォルダ内
・shCore
・shBrushXml
・shBrushCss
・shBrushJScript
・shBrushPhp

以上6つのファイルをアップロードします。

次に、以下のコードを</head>の上に記述します。
CSSのURL部分はご自身でアップロードしたURLに書き換えてください。

次に、以下のコードを<%topentry_more>の下に記述してください。
こちらも先ほど同様、パスはご自身でアップロードしたものに書き換えてください。

以上で下準備の設定は終わりです。

ブログ記事内で使用する時はのように、textarea内に表示したいソースコードを記入します。

クラス名は表示するソースコードのタイプに変更してください。

Language	Aliases
C++	(cpp, c, c++ )
C#	(c#, c-sharp, csharp)
CSS	(css)
Delphi	(delphi, pascal)
Java	(java)
Java Script	(js, jscript, javascript)
PHP	(php)
Python	(py, python)
Ruby	(rb, ruby, rails, ror)
Sql	(sql)
VB	(vb, vb.net)
XML/HTML	(xml, html, xhtml, xslt)