2013년 12월 17일 화요일

bloggerでSyntaxHighlighterを追加

プログラミングのための文章を書くときコードが入ります。ウェブ上でコードを作成する場合は、行が合わなくて読むのが難しい。

このようなとき、ウェブ上でも、コードがきれいによく出るようにするためのスクリプトがあります。SyntaxHighlighterです。

このスクリプトをインストールすると、コードがすっきりと出るようになります。

このスクリプトをbloggerにインストールする方法を説明します。


まず、設定に入って行き、HTMLの編集]をクリックしてください。
「Ctrl+ F」を押して「<head>」を検索するんです。



その下に次のコードを入れます。 (私はC#を入れてくれました。)




テーマを交換したい方は、下のリンクからお好きなもので変えてください



http://alexgorbatchev.com/SyntaxHighlighter/manual/themes/

もう一つの追加事項ですが、必要のない方は設定していなくてもよい。
コードが長くなるとスクロールバーが生じる部分です。私はこれがちょっと不便です。
だから、スクロールバーをなくし、文章が長くなると、自動改行をしてくれるコードを入れてみましょう。
もう一度「Ctrl+ F」を押して、']]></ b:skin>」を検索すると、下図のようなところが出てきます。






ここはcss設定する部分ですよ。
この上に、次のコードを入れていただければされます。
/*--------SyntaxHighlighterの垂直スクロール削除-----*/
.syntaxhighlighter {
 overflow-y: hidden!important; overflow-x: auto!important; 
}
 
/*--------SyntaxHighlighterで自動改行-----*/
.syntaxhighlighter .line {
        white-space: pre-wrap !important; /* make code wrap */

このようにすれば設置はすべて終わったことなんです。
他のコードの種類を追加したい場合は、以下のリンクからご覧になれます。


http://alexgorbatchev.com/SyntaxHighlighter/manual/brushes/css.html

使用する方法は、文章を作成し、コードを挿入れる時に以下のようにルールを守っていただければされます。

以下のようなコードがあるとき、上記のよう<Pre.....></ Pre>でコードを包み込んであげると

// ボタンが押されたとき
if (Input.GetMouseButtonUp(0) == true)
{
    // パーティクルがある場合
    if (testParticle)
    {
        // パーティクルが再生中の場合は、再生を停止してから消去します
        if (testParticle.isPlaying == true)
        {
            testParticle.Stop();
            testParticle.Clear();   

            //Debug.Log("STOP");
        }
        // 再生中でなければ、再生してくれよ
        else
        {
            testParticle.Play();

            //Debug.Log("PLAY");
        }
    }
}

下記のように出てくるようになるのです。
// ボタンが押されたとき
if (Input.GetMouseButtonUp(0) == true)
{
    // パーティクルがある場合
    if (testParticle)
    {
        // パーティクルが再生中の場合は、再生を停止してから消去します
        if (testParticle.isPlaying == true)
        {
            testParticle.Stop();
            testParticle.Clear();   

            //Debug.Log("STOP");
        }
        // 再生中でなければ、再生してくれよ
        else
        {
            testParticle.Play();

            //Debug.Log("PLAY");
        }
    }
}





댓글 없음:

댓글 쓰기