GO!GO!言語聴覚士

    耳鼻科領域で働く言語聴覚士のブログ
    MENU

    スポンサーサイト

    上記の広告は1ヶ月以上更新のないブログに表示されています。
    新しい記事を書く事で広告が消せます。

    応援が励みになります!
    ランキングクリックお願いします!

    ブログランキング・にほんブログ村へ

    SHARE

    FC2ブログでSyntaxHighlighterを使ってソースコードをキレイに表示する方法

    0   0

    カスタマイズネタを書いていくときに、どうしてもHTMLやプログラムのソースコードをキレイに表示させたいと思い、SyntaxHighlighterなるものを導入することにしました。
    色々なブログを調べるとSyntaxHighlighterでは、エディタみたいに表示できるのでとてもキレイで見やすいようです。
    さっそく導入方法を記します。


    SyntaxHighlighterをダウンロードする




    まずはSyntaxHighlighterを以下のサイトからダウンロードします。
    http://alexgorbatchev.com/SyntaxHighlighter/

    サイトにアクセスすると、右側に「Download」の表示がありますので選びます。

    20151109-01.jpg

    次の画面では、本文上部にある「Click here to download」から最新のバージョンをダウンロードします。

    20151109-02.jpg


    FC2ブログへアップロード




    次はダウンロードしたファイルを解凍し、FC2ブログへアップロードします。

    20151109-03.png

    アップロードするのは、
    ・[styles]フォルダの[shCore.css]と[shCoreDefault.css]
    ・[scripts]フォルダ内のファイル全て
    です。

    [scripts]フォルダ内のファイルは必要な言語用のものだけアップロードすれば良いらしいですが、どれが必要かわからないので全部アップロードしましたw

    アップロードするときに、どこにアップロードしたかメモを取っておいてください。あとあとアップロード先のアドレスが必要になります。
    http://blog-imgs-30.fc2.com/a/b/c/blog/~みたいなアドレスです)


    テンプレートを編集




    SyntaxHighlighterのアップロードが完了したら、次はブログのテンプレートを編集します。

    まずは ヘッダー部分(<head>~</head>)に以下を挿入します。
    ※ [アップロード先]部分は先ほど確認したアップロード先に置き換えて下さい。









    次にボディ部分の最後(</body>の直前)に以下を挿入します。
    ※こちらも[アップロード先]部分は先ほど確認したアップロード先に置き換えて下さい。












    実際に使ってみよう!




    設定は完了です。いよいよ使ってみましょう!
    <pre class="brush:使用する言語;">ソースコード</pre>のように、<pre>タグで囲んだ部分がエディタのように表示されます。

    ただし、特殊文字は下記のように変換する必要があります。
    "→&quot;
    &→&amp;
    <→&lt;
    >→&gt;
    「ソースコード HTMLタグ変換」などで検索すると自動で変換してくれるツールやサイトが見つかります。是非それらを利用しましょう。

    「使用する言語」に指定するコードは以下のコード表から選んで指定します。
    HTMLの場合は<pre class="brush:html;">ソースコード</pre>となります。

    20130225001531ae6.png

    応援が励みになります!
    ランキングクリックお願いします!

    ブログランキング・にほんブログ村へ
    関連記事

    SHARE

    Leave a reply






    管理者にだけ表示を許可する

    Trackbacks

    trackbackURL:http://gogost.blog22.fc2.com/tb.php/344-2b1d2812
    該当の記事は見つかりませんでした。
    上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。