Title: WP Colored Coding
Author: David
Published: <strong>2012年8月14日</strong>
Last modified: 2014年9月5日

---

プラグインを検索

このプラグインは **WordPress の最新3回のメジャーリリースに対してテストされていま
せん**。もうメンテナンスやサポートがされていないかもしれず、最新バージョンの WordPress
で使用した場合は互換性の問題が発生する可能性があります。

![](https://s.w.org/plugins/geopattern-icon/wp-colored-coding.svg)

# WP Colored Coding

 作者: [David](https://profiles.wordpress.org/dnaber-de/)

[ダウンロード](https://downloads.wordpress.org/plugin/wp-colored-coding.2014.08.19.zip)

 * [詳細](https://ja.wordpress.org/plugins/wp-colored-coding/#description)
 * [レビュー](https://ja.wordpress.org/plugins/wp-colored-coding/#reviews)
 *  [インストール](https://ja.wordpress.org/plugins/wp-colored-coding/#installation)
 * [開発](https://ja.wordpress.org/plugins/wp-colored-coding/#developers)

 [サポート](https://wordpress.org/support/plugin/wp-colored-coding/)

## 説明

Brings the cool Javascript syntax highlighter [Rainbow.js](https://github.com/ccampbell/rainbow)
to your WordPress-Blog and allows you to manage code snippets independend from the
text editor.

**IMPORTANT! – This plugin is no longer testet with PHP 5.2!**

#### Quick Start

 1. Download the plugin from this page
 2. Follow the instructions on the [WordPress Codex](https://codex.wordpress.org/Managing_Plugins#Manual_Plugin_Installation)
    to install the plugin.
     By default, the plugin is ready for use after activation.
    Some options can be changed on Settings  Writing.

For a detailed usage manual refer to the [Usage section](https://wordpress.org/extend/plugins/wp-colored-coding/other_notes/#usage),
or – better than a thousand words – to the [screenshots](https://wordpress.org/extend/plugins/wp-colored-coding/screenshots/).

If you want to change the behaviour of the plugin see the [API-Documentation](https://wordpress.org/extend/plugins/wp-colored-coding/other_notes/#API)

### Settings

By default, the plugin is ready for use after activation. Some options can be changed
on Settings  Writing.

#### Raw output

This option enables an additional checkbox for each codeblock of a post which allows
you to disable the `esc_attr()` filter for that code snippet. That means, every 
HTML and Javascript inside this textarea will be parsed by the browser as those.
So be carefull with this option.

### Usage

#### Codeblocks

A single Codeblock is identified (in the posts context) by its name. If you don’t
want to specify a name for each block, leave it empty, it will be generated automatically.

The language field is also optional. To use syntax highlighting, write in a rainbow
supported language. (It will give you suggestions.) Currently these are
 * C * Coffeescript*
C# * CSS * Go * HTML * Java * JavaScript * Lua * PHP * Python * R * Ruby * Shell*
Smalltalk

Each codeblock can be placed anywhere in the text by using the shortcode `[cc name
="{name}"]`. You can use the TinyMCE button »CC« for that.

#### Shortcode (in-text code)

For just a few lines of code you may want to use the shortcode like this:

    ```
    [cc lang="javascript"]
    var str = 'Hello World';
    alert( str );
    [/cc]
    ```

### Contribution & Bug-Report

For bug reports or ideas for new features, please use the [issue tracker on gitub](https://github.com/dnaber-de/WP-Colored-Coding/issues).

### API

The following filters are provided:

 * `wp_cc_rainbow_themes`
 * `wp_cc_rainbow_scripts`
 * `wp_cc_rainbow_languages`

Adding a new Theme is quite easy. Just expend the themes-array by a key like this

    ```
    /**
     * @param array $themes
     * @return array
     */
    function my_new_rainbow_theme( $themes ) {
        $themes[ 'my_theme' ] = array(
            'src'  => //the absolute URI to the stylesheet
            'name' => 'My Theme'
        );

        return $themes;
    }
    add_filter( 'wp_cc_rainbow_themes', 'my_new_rainbow_theme' );
    ```

To add a supported language use

    ```
    /**
     * @param array $scripts
     * @return array
     */
    function my_new_rainbow_script( $scripts ) {
        $scripts[ 'my_new_lang' ] = array(
            'src'       => //the absolute URI to the script
            'depth'     => array( 'rainbow' ),
            'lang'      => 'my_new_lang',
            'in_footer' => TRUE # this must be equal with the script it depends on
        );

        # to override the built-in rainbow version use the key 'rainbow'

        return $scripts;
    }
    add_filter( 'wp_cc_rainbow_scripts', 'my_new_rainbow_script' );

    /**
     * @param array $langs
     * @return array
     */
    function my_new_lang( $langs ) {

        $langs[ 'my_new_lang' ] = 'My new lang';

        return $langs;
    }
    add_filter( 'wp_cc_rainbow_languages', 'my_new_lang' );
    ```

#### Deactivation/Uninstallation

If you deactivate the plugin all settings and codes will be preserved. On uninstallation(
delete), all settings and codes will be deleted finally. If this is triggered from
the network-admin page, all blogs will be cleaned up.

### Acknowledgement

 * Thanks to [sparanoid](https://github.com/sparanoid) for chinese translation
 * Thanks to [@volleyballfisch](https://twitter.com/Volleyballfisch) for spanish
   translation
 * Thanks to [yonjah](https://github.com/yonjah) for JS Bugfixing

## スクリーンショット

[⌊The Meta-Box on post edit screen to manage your code snippeds.⌉⌊The Meta-Box on
post edit screen to manage your code snippeds.⌉[

The Meta-Box on post edit screen to manage your code snippeds.

[⌊TinyMCE popup to build and insert shortcode into the text editor.⌉⌊TinyMCE popup
to build and insert shortcode into the text editor.⌉[

TinyMCE popup to build and insert shortcode into the text editor.

[⌊WP Colored Coding settings section.⌉⌊WP Colored Coding settings section.⌉[

WP Colored Coding settings section.

## インストール

Just [download](https://github.com/dnaber-de/WP-Colored-Coding/releases) the latest
tag and follow the instructions on the [WordPress Codex](https://codex.wordpress.org/Managing_Plugins#Manual_Plugin_Installation).
Otherwise you can use the plugin installer in your WordPress backend.

## FAQ

  Are there any frequently asked questions?

None so far. If you have any questions feel free to [contact](http://dnaber.de/kontakt)
me (english, german) or use the [support forum](https://wordpress.org/support/plugin/wp-colored-coding)
on wordpress.org.

## 評価

このプラグインにはレビューがありません。

## 貢献者と開発者

WP Colored Coding はオープンソースソフトウェアです。以下の人々がこのプラグインに
貢献しています。

貢献者

 *   [ David ](https://profiles.wordpress.org/dnaber-de/)

[“WP Colored Coding” をあなたの言語に翻訳しましょう。](https://translate.wordpress.org/projects/wp-plugins/wp-colored-coding)

### 開発に興味がありますか ?

[コードを閲覧](https://plugins.trac.wordpress.org/browser/wp-colored-coding/)する
か、[SVN リポジトリ](https://plugins.svn.wordpress.org/wp-colored-coding/)をチェック
するか、[開発ログ](https://plugins.trac.wordpress.org/log/wp-colored-coding/)を 
[RSS](https://plugins.trac.wordpress.org/log/wp-colored-coding/?limit=100&mode=stop_on_copy&format=rss)
で購読してみてください。

## 変更履歴

#### 2014.08.19

 * Adaption to TinyMCE version 4.*
 * Update Rainbow.js to version 1.2
 * Some security enhancements
 * Bugfixes
 * Changed version number format

#### 1.2.0

 * fixed a bug of the unfiltered output option
 * better readme.txt for wordpress.org

#### 1.1.0

 * spanish language files
 * rainbow support for Go, R, Coffeescript, Java, Smalltalk

#### 1.0.1

 * bugfix
 * Theme Technicolor updated

#### 1.0.0

 * initial release

## メタ

 *  バージョン **2014.08.19**
 *  最終更新日 **12年前**
 *  有効インストール数 **10+**
 *  WordPress バージョン ** 3.9.2またはそれ以降 **
 *  検証済み最新バージョン: **4.0.38**
 *  言語
 * [English (US)](https://wordpress.org/plugins/wp-colored-coding/)
 * タグ
 * [syntax highlighting](https://ja.wordpress.org/plugins/tags/syntax-highlighting/)
 *  [詳細を表示](https://ja.wordpress.org/plugins/wp-colored-coding/advanced/)

## 評価

レビューはまだ送信されていません。

[Your review](https://wordpress.org/support/plugin/wp-colored-coding/reviews/#new-post)

[すべてのレビューを見る](https://wordpress.org/support/plugin/wp-colored-coding/reviews/)

## 貢献者

 *   [ David ](https://profiles.wordpress.org/dnaber-de/)

## サポート

意見や質問がありますか ?

 [サポートフォーラムを表示](https://wordpress.org/support/plugin/wp-colored-coding/)