ソースコードを綺麗に見せるJS「SyntaxHighlighter」の設置手順 | うぇぶ小屋

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

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

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

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

色々調べて探して見ましたが、一番良さげだったので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)

最後に、使用する際はブログ記事の改行設定を「HTMLタグのみ」にするのを忘れないようにしてください。

参考になれば幸いです。
関連記事

スポンサード リンク

TwitterやFacebookページでは日々うぇぶ小屋が気になった情報(ウェブ制作・運営、ブログの収益化に関する事が多い)をつぶやいていますのでこの機会にぜひ"フォロー"または"いいね"をよろしくお願いします。


Twitterアカウント → @webgoya
Facebookページ → webgoya
RSSフィードを配信しています → RSS購読はこちら

コメント一覧
この記事にコメントを残す
管理者にだけ表示を許可する

人気記事

最新のエントリー

カテゴリ

ライター募集!