体調不良のため長らくお休みしていました、過去をさかのぼって更新していきます。

『CodeColorer』プログラミングコード等をハイライト表示するプラグイン

[PR] 記事内には広告が含まれています。

WordPressのコードやCSSなどを色分けハイライトできる表示用プラグインはCodeColorer を使用しています。

プラグインの公式サイト
– http://kpumuk.info/projects/wordpress-plugins/codecolorer/

<code></code>

で囲むと、自動的にコードの枠内に表示されます。

表示例:

/*
LAYOUT: Two columns
DESCRIPTION: Two-column fixed layout with one sidebar right of content
*/
#content {
margin: 0 280px 0 20px;
}
#secondary {
clear: right;
}
#footer {
clear: both;
width: 100%;
}

CSSの場合は

<code></code>

表示例:

/*
LAYOUT: Two columns
DESCRIPTION: Two-column fixed layout with one sidebar right of content
*/
#content {
margin: 0 280px 0 20px;
}
#secondary {
clear: right;
}
#footer {
clear: both;
width: 100%;
}

PHPの場合は

<code></code>

で囲むと、


function twentyten_setup() {
// This theme styles the visual editor with editor-style.css to match the theme style.
add_editor_style();

// Post Format support. You can also use the legacy "gallery" or "asides" (note the plural) categories.
add_theme_support( 'post-formats', array( 'aside', 'gallery' ) );

// This theme uses post thumbnails
add_theme_support( 'post-thumbnails' );

}

このようになります。

また、ショートコードをつかって
[cce][cc lang=”lang”]code[/cc][/cce]
このように囲むこともできます。
*lang=”lang” の ””の部分には、言語の名称が入ります。

・・・ちなみに、上記のタグ(<code>)を表示するには
[cc escaped=”true”][/cc] または [cce][/cce]で囲みます。
*便宜上、カッコは全角文字にしています。