Takinoko Code Studio
WordPress code blocks with syntax highlighting, copy, line numbers and SyntaxHighlighter compatibility.
Install
No release zip yet. The repository archive installs, but the folder name will carry the branch suffix and updates will not flow:
wp plugin install https://github.com/reoshiozawa/takinoko-code-studio/archive/refs/heads/main.zipTakinoko Code Studio 1.0.1
ウェブソフト公開所のためのWordPressコード表示プラグイン。記事本文・URL・SEO設定を書き換えず、表示と編集ブロックを追加します。

導入
- WordPress管理画面 → プラグイン → 新規追加 → プラグインのアップロード。
- Releasesの添付ファイル
takinoko-code-studio.zipをダウンロードし、インストール・有効化。 - JavaScript・Python・HTMLの記事を開き、表示・コピーを確認。
- 従来のSyntaxHighlighterを無効化。削除は不要です。
- 古い記事を編集し、コードブロックに「無効なコンテンツ」警告が出ないことを確認。キャッシュを利用している場合は削除してください。
公開版はローカル環境で検証しています。利用するWordPress環境でも導入後に表示と編集を確認してください。
機能
- サイトのグリーン・クリーム・ライムに合わせた表示。外部フォント不要。
- 言語の色分け。古い
plain指定は自動判定へ移行し、確信の低いサンプルは色分けなしで表示。 - インデント・改行を維持してコピー。行番号・ボタン文言はコピーに含めません。
- 横スクロール/折り返し切り替え。折り返し中は紛らわしい行番号を隠します。
- キーボード操作、コピー結果の読み上げ、スマートフォン、印刷に対応。
- SyntaxHighlighterの既存ブロック1,030個と、標準コードブロックを互換表示。通常の「整形済みテキスト」は変更しません。
- 長大なコード(120,000文字超)は色分け処理を省略して表示します。
- ソースは実行しません。JavaScriptが無効でもコード本文は表示されます。
記事への追加
ブロックの追加から「Takinoko コード」を選び、コードを貼り付けます。右側の設定で言語・任意のファイル名・開始行番号・折り返しを選択できます。自動判定が不適切な場合は言語を明示してください。
ショートコードも使えます。
[tkcode language="javascript" filename="hello.js"]
const message = "動いた!";
console.log(message);
[/tkcode]
旧[code]・[sourcecode]・[source]・[javascript]・[python]などの形式を読み取れます。旧プラグインのメタデータでHTMLエンコード済みと記録された従来記事は、その記録に従って復元します。新規コードは専用ブロックかtkcodeを推奨します。旧プラグイン特有の強調行・自動リンク・折り畳み設定は再現しません。
検証
公開REST APIで取得した85記事・1,032個のpre表示について、変換後もコード文字列が同一であることを確認しました。PHPテストではWordPressの実際のショートコード・整形関数を使用しています(その他のAPIはテスト用スタブ)。WordPressの実際のブロックシリアライザーで、新旧の保存形式とHTML・エンティティ・URL・日本語を含む5ケースを検証しました。ローカルのHeadless Chromiumでは、コピー内容、折り返しの状態、320px/390pxの幅、エラーの有無を確認しています。これらは本番管理画面での動作確認の代替ではありません。
構成とライセンス
枠・CSS・コピー・編集ブロック・互換処理は専用実装です。構文解析にはhighlight.js 11.12.0を同梱しています。ブラウザからCDNへ通信せず、WordPressサーバーから配信します。Rust/VB.NET追加言語も同梱。サードパーティ部分のライセンスはassets/vendor/LICENSE(BSD-3-Clause)を参照してください。プラグイン本体はGPL-2.0-or-laterです。
元に戻す
Takinoko Code Studioを無効化し、SyntaxHighlighterを再有効化すれば、従来の記事は旧表示に戻ります。新規のTakinokoブロックも保存済みpre本文が残るため、コード内容は失われません。新規のtkcodeショートコード表示には本プラグインが必要です。
開発・テスト
PHP 7.4以上(CIは8.3)、Node.js 24で検証します。
php -l takinoko-code-studio.php
php tests/verify.php
cd tests
npm ci --no-audit --no-fund
npm test
PHPのテスト用WordPressファイルはWordPress公式のGPLソースです。wp-formatting.phpとwp-kses.phpは6.8、wp-shortcodes.phpは2026年10月4日時点の公式masterから取得しています。実サイトの記事データは同梱しません。任意の公開REST API取得データを検証するときだけ、TKCS_POST_FIXTURESでJSONファイルを指定できます。
配布ZIPは python3 tools/build-release.py で生成できます。テスト・開発資料はZIPに含めません。