SyntaxHighlighter Evolved – ソースコードをきれいに表示する

記事の中で、プログラムコードを書く時に見栄えを良くしてくれるプラグイン。
「html」はもちろん、「Java」「PHP」「CSS」なども扱える。
扱えるプログラムコード一覧はこちらで確認できる。
作者の Viper007Bond さん、 automattic さんにスペシャルサンクス。 ■ ダウンロード
http://wordpress.org/extend/plugins/syntaxhighlighter/

■ 有効化すると、ダッシュボード左下に「SyntaxHighlighter」が出現
ダッシュボードの「SyntaxHighlighter」

■ SyntaxHighlighterの設定画面
SyntaxHighlighterの設定画面

設定画面下部で現在の設定をプレビューできる。
また、「ショートコードパラメータ」、「引数指定の例」も記載されている。
親切で分かりやすい!!
SyntaxHighlighter 設定画面その2


■ 試してみる

  1. まずは、普通に・・・。
    [php]
    <?php
    $foo = 100; // $foo は整数です
    $bar = (boolean) $foo; // $bar はbooleanです
    echo '$foo = '.$foo."<br />\n";
    echo '$bar = '.$bar."<br />\n";
    ?>
    [/php]

    こんな感じに表示される。
    <?php
    $foo = 100;   // $foo は整数です
    $bar = (boolean) $foo;   // $bar はbooleanです
    echo '$foo = '.$foo."\n";
    echo '$bar = '.$bar."\n";
    ?>
    
  2. 開始行を「11」、12~15行目、19行目、22行目をハイライトする。
    [css firstline="11" highlight="12-15,19,22"]
    div#box{
    width:120px;
    padding:10px 0px;
    font-size:0.9em;
    background-color:lightblue;
    }
    ul{
    list-style:disc;
    background-color:lightpink;
    }
    li{
    background-color:lightyellow;
    }
    [/css]

    こんな感じ
    div#box{
      width:120px;
      padding:10px 0px;
      font-size:0.9em;
      background-color:lightblue;
    }
    ul{
     list-style:disc;
      background-color:lightpink;
    }
    li{
      background-color:lightyellow;
    }
    
  3. コードボックスを閉じて表示、開くにはクリックする。
    行番号を非表示。
    [vb collapse="true" gutter="false"]
    Sub ADO接続1()
    Dim myCon As ADODB.Connection, FileName As String
    'New キーワードを使用して新規Connectionオブジェクトを生成
    Set myCon = New ADODB.Connection
    '接続先のデータベース
    FileName = ThisWorkbook.Path & "\mdb\2-sampleDB.mdb"
    '接続
    myCon.Open _
    "Provider=Microsoft.Jet.OLEDB.4.0;Data Source=" & FileName
    MsgBox "接続完了!"
    '接続を解除し、オブジェクトをクリア
    myCon.Close: Set myCon = Nothing
    End Sub
    [/vb]

    こんな感じ
    Sub ADO接続1()
    Dim myCon As ADODB.Connection, FileName As String
    'New キーワードを使用して新規Connectionオブジェクトを生成
    Set myCon = New ADODB.Connection
    '接続先のデータベース
    FileName = ThisWorkbook.Path & "\mdb\2-sampleDB.mdb"
    '接続
    myCon.Open _
      "Provider=Microsoft.Jet.OLEDB.4.0;Data Source=" & FileName
    MsgBox "接続完了!"
    '接続を解除し、オブジェクトをクリア
    myCon.Close: Set myCon = Nothing
    End Sub
    
  4. 自動リンクを有効、ツールバー表示、折り返しを有効(v2 のみ)・・・いずれも規定値。
    [html]
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="en-US"><head profile="http://gmpg.org/xfn/11">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <!--
    <meta property="fb:page_id" content="6427302910" />
    -->
    <title>WordPress › SyntaxHighlighter Evolved « WordPress Plugins</title>
    <style type="text/css">
    @import url("http://s.wordpress.org/style/wp4.css?12");
    </style>
    <link media="only screen and (max-device-width: 480px)" href="http://s.wordpress.org/style/iphone.css" type="text/css" rel="stylesheet" />
    <link rel="shortcut icon" href="http://s.wordpress.org/favicon.ico?3" type="image/x-icon" />
    <script type="text/javascript">
    var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
    document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
    </script>
    <script type="text/javascript">
    var pageTracker = _gat._getTracker("UA-52447-1");
    pageTracker._initData();
    pageTracker._trackPageview();
    </script>
    <!--[if lt IE 8]>
    <style type="text/css">
    @import url("http://s.wordpress.org/style/ie.css");
    </style>
    [/html]

    こんな感じ
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="en-US"><head profile="http://gmpg.org/xfn/11">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <!--
    <meta property="fb:page_id" content="6427302910" />
    -->
    <title>WordPress &#8250; SyntaxHighlighter Evolved &laquo; WordPress Plugins</title>
    <style type="text/css">
    @import url("http://s.wordpress.org/style/wp4.css?12");
    </style>
    <link media="only screen and (max-device-width: 480px)" href="http://s.wordpress.org/style/iphone.css" type="text/css" rel="stylesheet" />
    <link rel="shortcut icon" href="http://s.wordpress.org/favicon.ico?3" type="image/x-icon" /> 
    <script type="text/javascript">
    var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
    document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
    </script>
    <script type="text/javascript">
    var pageTracker = _gat._getTracker("UA-52447-1");
    pageTracker._initData();
    pageTracker._trackPageview();
    </script>
    <!--[if lt IE 8]>
    <style type="text/css">
    @import url("http://s.wordpress.org/style/ie.css");
    </style>
    
  5. 自動リンクを無効、ツールバー非表示、折り返しを無効(v2 のみ)。
    引数の書き方を変えてみる。
    [html
    autolinks="false"
    wraplines="false"
    toolbar="false"
    ]
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="en-US"><head profile="http://gmpg.org/xfn/11">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <!--
    <meta property="fb:page_id" content="6427302910" />
    -->
    <title>WordPress › SyntaxHighlighter Evolved « WordPress Plugins</title>
    <style type="text/css">
    @import url("http://s.wordpress.org/style/wp4.css?12");
    </style>
    <link media="only screen and (max-device-width: 480px)" href="http://s.wordpress.org/style/iphone.css" type="text/css" rel="stylesheet" />
    <link rel="shortcut icon" href="http://s.wordpress.org/favicon.ico?3" type="image/x-icon" />
    <script type="text/javascript">
    var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
    document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
    </script>
    <script type="text/javascript">
    var pageTracker = _gat._getTracker("UA-52447-1");
    pageTracker._initData();
    pageTracker._trackPageview();
    </script>
    <!--[if lt IE 8]>
    <style type="text/css">
    @import url("http://s.wordpress.org/style/ie.css");
    </style>
    [/html]

    こんな感じ
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="en-US"><head profile="http://gmpg.org/xfn/11">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <!--
    <meta property="fb:page_id" content="6427302910" />
    -->
    <title>WordPress &#8250; SyntaxHighlighter Evolved &laquo; WordPress Plugins</title>
    <style type="text/css">
    @import url("http://s.wordpress.org/style/wp4.css?12");
    </style>
    <link media="only screen and (max-device-width: 480px)" href="http://s.wordpress.org/style/iphone.css" type="text/css" rel="stylesheet" />
    <link rel="shortcut icon" href="http://s.wordpress.org/favicon.ico?3" type="image/x-icon" /> 
    <script type="text/javascript">
    var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
    document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
    </script>
    <script type="text/javascript">
    var pageTracker = _gat._getTracker("UA-52447-1");
    pageTracker._initData();
    pageTracker._trackPageview();
    </script>
    <!--[if lt IE 8]>
    <style type="text/css">
    @import url("http://s.wordpress.org/style/ie.css");
    </style>
    

This entry was posted in WordPress and tagged , , . Bookmark the permalink.

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です