さあ、未来へ旅立とう

日々のこと、チーム紹介

  • 13 Jun. 2014

    [WordPress]ソースコードを表示するプラグイン、シンタックス・ハイライター

    CATEGORYBlog TAG

    こんにちわ、お菓子が美味しいです。須藤です。

    WordPressで記事を投稿するときに、ソースコードを載せたい場合に
    使うプラグインを紹介します。

    WordPress管理画面 > プラグイン > 新規追加 >「SyntaxHighlighter Evolved」で検索し、インストール。

    プラグイン > SyntaxHighlighter

    管理画面からデフォルトの設定やテーマ(色)を変えたりすることができます。
    スクリーンショット 2014-05-27 17.18.57

    テーマは

    Defult
    スクリーンショット 2014-05-27 17.24.39

    Django
    スクリーンショット 2014-05-27 17.24.52

    Eclipse
    スクリーンショット 2014-05-27 17.25.00

    Emacs
    スクリーンショット 2014-05-27 17.25.22

    Fade to Grey
    スクリーンショット 2014-05-27 17.25.49

    Midnight
    スクリーンショット 2014-05-27 17.25.58

    RDark
    スクリーンショット 2014-05-27 17.26.11

    から選ぶ事が出来ます。

    投稿画面からソースコードを載せたいときの基本は

    [html]
    ここにソースコードを記述
    [/html]
    ※[]は半角

    使いそうなオプションを一部紹介!

    リンクを無効にする
    [html autolinks=”false”]
    ※”は半角

    
    <meta charset="UTF-8" />
    title
    <link href="css/reset.css" rel="stylesheet" type="text/css" />
    <!--[if lt IE 9]>
    <script src="https://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->
    
    

    行を非表示にする [html gutter=”false”]

    <meta charset="UTF-8" />サイトのタイトル<meta charset="UTF-8" />title
    <link href="css/reset.css" rel="stylesheet" type="text/css" />
    <!--[if lt IE 9]>
    <script src="https://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->
    
    

    開始行:firsrlineとハイライト(強調):highlightの行を指定する
    [html firstline=”3” highlight=”5, 6, 7”]
    ハイライト(強調)は複数行指定することが出来ます。

    
    <meta charset="UTF-8" />
    
    <meta charset="UTF-8" />
    title
    <link href="css/reset.css" rel="stylesheet" type="text/css" />
    <!--[if lt IE 9]>
    <script src="https://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->
    
    

    折り畳む [html html collapse=”true”]

    <meta charset="UTF-8" /><meta charset="UTF-8" />title
    <link href="css/reset.css" rel="stylesheet" type="text/css" />
    <!--[if lt IE 9]>
    <script src="https://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->
    
    

    [html]ではなく[php]に変えればphpとして表示出来ます。
    他にもjavascriptなら[js]、action scriptなら[as3」等様々な言語を記述する事が出来ます。
    手軽にソースコードをサイトに載せることが出来るので、おすすめです。
    他にも設定出来ることがありますので詳しくはプラグインの公式サイトをご覧ください。

    キャベツ太郎!じゃがりこ!

    大和市のポテトフライダー、フライドポテトを揚げ続けて120年、変わらぬ味と進化し続ける味を提供しております!休みの日にはポテトダイナマイトを製作し、世界中にバラまいている!