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

ホーム / JavaScript / ソースコードを綺麗に見せるJS「SyntaxHighlighter」の設置手順
  • 2012/11/06
  • ソースコードを綺麗に見せる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購読はこちら

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

    人気記事

    最新のエントリー

    カテゴリ

    ライター募集!