WP Manifestindependent plugin directory
manifest / editor / takinoko-code-studio

Takinoko Code Studio

WordPress code blocks with syntax highlighting, copy, line numbers and SyntaxHighlighter compatibility.

by Takinoko · github.com/reoshiozawa/takinoko-code-studio

★ 0stars
0forks

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.zip

Takinoko Code Studio 1.0.1

ウェブソフト公開所のためのWordPressコード表示プラグイン。記事本文・URL・SEO設定を書き換えず、表示と編集ブロックを追加します。

コード表示

導入

  1. WordPress管理画面 → プラグイン → 新規追加 → プラグインのアップロード。
  2. Releasesの添付ファイル takinoko-code-studio.zipをダウンロードし、インストール・有効化。
  3. JavaScript・Python・HTMLの記事を開き、表示・コピーを確認。
  4. 従来のSyntaxHighlighterを無効化。削除は不要です。
  5. 古い記事を編集し、コードブロックに「無効なコンテンツ」警告が出ないことを確認。キャッシュを利用している場合は削除してください。

公開版はローカル環境で検証しています。利用する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に含めません。