Extension:CodeMirror/ja
CodeMirror 拡張機能は、CodeMirror ライブラリを使用して、ウィキテキストを含む様々なプログラミング言語とマークアップ言語の構文の強調表示に対応したスタンドアローンなエディターを提供します。 WikiEditor、2017年版ウィキテキストエディター、Proofread Pageなどの他のエディターでも使用できます。 使い方と機能の一覧については、Help:Extension:CodeMirror（コードミラー） をご覧ください。
2024から2025年にかけて、この拡張機能は新しいメジャーバージョンの CodeMirror 6 にアップグレードされ、多くの新機能が追加されました。
使用法
この種の拡張機能すべてを一覧するには、Help:Extension:CodeMirror（コードミラー）を参照してください。
JavaScript の文書については、docs.wikimedia.org/CodeMirror. を参照してください。
インストール
- ダウンロードして、ファイルを
extensions/フォルダー内のCodeMirrorという名前のディレクトリ内に配置します。
開発者とコード寄稿者は、上記の代わりに以下を使用してGitからインストールします:cd extensions/ git clone https://gerrit.wikimedia.org/r/mediawiki/extensions/CodeMirror
- 以下のコードを LocalSettings.php ファイルの末尾に追加します:
wfLoadExtension( 'CodeMirror' );
- Configure as required.
完了 – ウィキの「Special:Version」に移動して、拡張機能が正しくインストールされたことを確認します。
設定
すべての利用者に対して既定で CodeMirror を有効にするには、LocalSettings.php に次のコードを追加します:
# Enables use of CodeMirror by default but still allow users to disable it
$wgDefaultUserOptions[ 'usecodemirror' ] = true;
- $wgCodeMirrorV6
- CodeMirror 6 への移行を制御するための一時的な機能フラグ(T259059)。
- $wgCodeMirrorEnabledModes
- Extension:CodeEditor との競合を制御するための一時的な機能フラグ。
- $wgCodeMirrorConflictingGadgets
- 有効にすると CodeMirror が読み込まれなくなるガジェット名の配列。既定値は wikEd です。
- $wgCodeMirrorDefaultPreferences
- すべての利用者に対して既定で有効にする機能を制御します。
trueかfalseを用いて機能自体を有効または無効化するか、名前空間ID(整数)またはコンテンツモデル(文字列)を含む配列を指定します。 例えば、JavaScript ページまたはテンプレートのみに自動補完を限定するには、次のように指定します:$wgCodeMirrorDefaultPreferences[ 'autocomplete' ] = [ CONTENT_MODEL_JAVASCRIPT, NS_TEMPLATE ];
| 機能 | 2017年版エディター との互換性 | 既定値 |
|---|---|---|
activeLine |  | false |
bidiIsolation | | false |
bracketMatching | | true |
lineNumbering | | true |
lineWrapping | [1] | true |
specialChars | | true |
codeFolding | | true |
autocomplete | | true |
openLinks | | true |
whitespace | | false |
lint | | |
CodeMirror 5 との違い
新しい機能
- WikiEditor は不要になりました。
- CodeEditor の代替として、Scribunto、JavaScript、CSS、JSON をサポート。
- 大幅なパフォーマンスの改善。
- 双方向分離(T358804)による右書き(RTL)のサポート(T170001)。
- コードの折りたたみ(T30684)。
- 自動補完(T95100)。
- 修飾キー+クリックでリンクを直接開く(T303392)。
- 検索パネルの改善(T371436)。
- CodeMirror の環境設定(T359498)。
- 読み取り専用ページでの構文の強調表示(T301615)。
- Special:ExpandTemplates での構文の強調表示。
- 拡張機能、ガジェット、利用者スクリプトと連携するための強力な JavaScript API。
廃止およびその他の変更点
- ResourceLoader モジュールが変更されます。移行ガイドをご覧ください。
ext.CodeMirror.switchフックは非推奨となりました。代わりにext.CodeMirror.toggleを使用してください。- CSS クラス
.cm-mw-mnemonicの名前は.cm-mw-html-entityに変更されました。 .cm-mw-template-name-mnemonicクラスは除去されました。代わりに.cm-mw-template-ground.cm-html-entityを使用してください。- CSS クラス
.cm-mw-apostrophes-boldおよび.cm-mw-apostrophes-italicは除去されました。代わりに .cm-mw-apostrophes を使用してください。 <nowiki>、<pre>、または関連付けられた TagMode のないタグの行単位のスタイル設定が除去されました(T351686)。- ウィキテキスト内の混合言語はまだサポートされていません(T357480)。
- ブラウザー固有の検索機能(Ctrl+F)は、CodeMirror の検索機能に置き換えられます。これはパフォーマンスを維持するために必要です(T303664)。
移行ガイド
| MediaWiki バージョン: | ≧ 1.44 |
このガイドは MediaWiki 1.44 以降に適用されます。MediaWiki 1.45 のリリースまでにすべての移行完了を目標にしてください(リリースタイムライン)。
MediaWiki の設定
$wgCodeMirrorLineNumberingNamespacesは非推奨となりました。代わりに$wgCodeMirrorDefaultPreferencesを設定してください。
ResourceLoader モジュール
新しい .v6 モジュールを使用しているか確認してください。
CodeMirror 6 は WikiEditor に依存しなくなったため、CodeMirror 5 の対応するモジュールと比べて、名称と動作が一部変更されています:
一部のモジュール名は簡潔にするために先頭の ext.CodeMirror を省略しています。使用する際は「…」部分を置き換えてください。
| 旧モジュール | 新モジュール(MW 1.43) | 新モジュール(MW 1.45以降) | 説明 |
|---|---|---|---|
ext.CodeMirror |
….v6.WikiEditor.init |
….init |
CodeMirror integration for WikiEditor on #wpTextbox1 (the normal editing textarea). |
| N/A | ….v6.WikiEditor |
….WikiEditor |
Exports the CodeMirrorWikiEditor class |
| N/A | ….v6.init |
….init |
CodeMirror for #wpTextbox1 and other supported pages. |
….lib |
….v6.lib |
….lib |
Exports CodeMirror internals. |
….addons |
N/A | N/A | This packaged the bracket matching feature in CodeMirror 5. Bracket matching is default behaviour in CodeMirror 6. |
….mode.mediawiki |
….v6.mode.mediawiki |
….mode.mediawiki |
The MediaWiki language mode. |
| N/A | ext.CodeMirror.v6 |
ext.CodeMirror |
Exports the CodeMirror class. |
….visualEditor |
….visualEditor.init |
….init |
Integration with the 2017年版ウィキテキストエディター. |
….lib.mode.php |
N/A | N/A | CodeMirror 6 will not provide these modules. They are rarely used and have no corresponding content model in MediaWiki. If you want support for these languages, you'll need to install the packages and bundle the code yourself. |
….lib.mode.clike | |||
….lib.mode.htmlmixed | |||
….lib.mode.xml | |||
….lib.mode.javascript |
TBD | ….lib.mode.javascript |
これらの言語は CodeMirror 6 でサポートされる予定です。 |
….lib.mode.css |
….lib.mode.css | ||
| N/A | ….lib.mode.lua | ||
| N/A | ….lib.mode.json | ||
| N/A | ….lib.mode.vue |
MediaWiki 1.45 のリリースをもって、旧モジュールは新モジュールに置き換えられ、.v6 モジュールはしばらくの間完全に除去されずにエイリアスとして残ります。
ガジェットと利用者スクリプト
The CodeMirror global has been removed entirely.
For example, CodeMirror.fromTextArea( myTextarea ) will no longer work.
Instead, first load the desired ResourceLoader modules, instantiate a CodeMirror object, and call the initialize() method.
If your script relies on the ext.CodeMirror.switch hook to change the way it interacts with the editor, you'll need to use ext.CodeMirror.toggle instead, or alternatively listen to an event.
See the JavaScript integration section for more information.
CSS
.CodeMirror 要素は廃止されました。CodeMirror の DOM 全体を扱う場合は .cm-editor を、(検索パネルなどを含まない)内部コンテンツを扱う場合は .cm-content を使用してください。
その他の CSS クラスに関しては、廃止およびその他の変更点を参照してください。
連携
MediaWiki 拡張機能
CodeEditor の代わりに CodeMirror を使用
| MediaWiki バージョン: | ≧ 1.44 |
MediaWiki 1.44 以降、CodeMirror はLua、JavaScript、CSS、JSON言語の構文強調表示をサポートしています。これは、Extension:CodeEditor の代わりとして使用できます。
ただし、CodeEditor と連携しているすべての拡張機能が CodeMirror をサポートするように更新されているわけではありません。以下の拡張機能を使用している場合は、引き続き CodeEditor をウィキにインストールしておくことをお勧めします。
- Extension:VisualEditor - CodeEditor モジュールを使用して、VisualEditor と連携している他の拡張機能の構文強調表示を強化します(T400014):
- Extension:AbuseFilter - 不正利用フィルターの構文強調表示は CodeEditor に依存します(T399673)。
- Extension:WikiLambda -
ext.wikilambda.appモジュールは CodeEditor に依存します(T400015)。
Registering a new tag for MediaWiki
If you simply want CodeMirror to recognize a tag that is added by an extension, you can do so using the CodeMirrorTagModes extension attribute. For example, to register the tag <foo> as something containing wikitext, you would add the following to extension.json:
{
"attributes": {
"CodeMirror": {
"TagModes": [
"foo": "mediawiki"
]
}
}
}
CodeMirror will then highlight the content inside <foo>...</foo> as wikitext.
Registering a tag so that CodeMirror treats the contents as something other than wikitext is currently not supported (T357480). If a tag is not registered, CodeMirror will highlight the contents as non-wikitext in the same way it highlights the contents of a <nowiki>...</nowiki> tag.
PHP hook
| MediaWiki バージョン: | ≧ 1.44 |
Since MediaWiki 1.44, the preferred means to integrate with CodeMirror in PHP is implementing the CodeMirrorGetModeHook interface:
class CodeMirrorHooks implements CodeMirrorGetModeHook {
public function onCodeMirrorGetMode(Title $title, ?string &$mode, string $model ): bool {
// Logic to determine if CodeMirror should be used
if ( $title->hasContentModel( 'JsonLikeContentModel' ) ) {
$mode = 'json';
return false;
}
return true;
}
}
Register the hook in extension.json:
"Hooks": {
"CodeMirrorGetMode": "codemirror"
},
"HookHandlers": {
"codemirror": {
"class": "MediaWiki\\Extension\\MyExtension\\CodeMirrorHooks"
}
}
PluginModules
CodeMirrorPluginModules is an extension attribute that allows side-loading a module with CodeMirror.
This unconditionally loads the module whenever the ext.CodeMirror.v6 module is loaded.
extension.json:
{
"attributes": {
"CodeMirror": {
"PluginModules": [
"ext.MyExtension.CodeMirror"
]
}
}
}
JavaScript
The CodeMirror editor is not an actual textarea, but a contenteditable. Usually developers need to ensure their code works with both given that CodeMirror can be toggled off.
For detecting changes to the document, using an event or a hook is likely the simplest. For reading and making changes, jQuery.textSelection may be convenient.
For more complex integrations or those who need better preformance, you can add your own extension to a new or an existing CodeMirror instance.
Using jQuery.textSelection
If you simply want to fetch or make changes to the document text, jQuery.textSelection is the easiest and most reliable means to do so. Usage of jQuery.textSelection on the textarea is bubbled up to CodeMirror, so you don't need to have any knowledge of whether CodeMirror is enabled:
const $textarea = $( '#wpTextbox1' )
const content = $textarea.textSelection( 'getContents' );
// Append "Foobar" to the content.
$textarea.textSelection( 'setContents', content + '\nFoobar' );
jQuery's .val() on #wpTextbox1 can be used,[2] but this isn't recommended and may not work in all editors, such as the 2017年版ウィキテキストエディター.
Using ResourceLoader
The CodeMirror extension provides a number of ResourceLoader modules for use by user scripts, gadgets, and extensions. To make use of CodeMirror, you'll need at minimum the ext.CodeMirror.v6 module, along with the desired language. For MediaWiki wikitext, you'd use ext.CodeMirror.v6.mode.mediawiki.
Here is an example of how to apply wikitext syntax highlighting to any arbitrary textarea, using the default set of features:
const require = await mw.loader.using( [ 'ext.CodeMirror.v6', 'ext.CodeMirror.v6.mode.mediawiki' ] );
const CodeMirror = require( 'ext.CodeMirror.v6' );
const mediawikiLang = require( 'ext.CodeMirror.v6.mode.mediawiki' );
const cm = new CodeMirror( myTextarea, mediawikiLang() );
cm.initialize();
If you also want WikiEditor:
const require = await mw.loader.using( [
'ext.wikiEditor',
'ext.CodeMirror.v6.WikiEditor',
'ext.CodeMirror.v6.mode.mediawiki'
] );
const textarea = document.getElementById( 'wpTextbox1' );
mw.addWikiEditor( $( textarea ) );
const CodeMirrorWikiEditor = require( 'ext.CodeMirror.v6.WikiEditor' );
const mediawikiLang = require( 'ext.CodeMirror.v6.mode.mediawiki' );
const cmWe = new CodeMirrorWikiEditor( textarea, mediawikiLang() );
cmWe.initialize();
| モジュール | 説明 |
|---|---|
ext.CodeMirror.v6.lib |
The core CodeMirror library. You shouldn't need to require this directly unless you need access to the upstream CodeMirror API. |
ext.CodeMirror.v6 |
The basic CodeMirror integration for MediaWiki editors. This module exports the CodeMirror class. |
ext.CodeMirror.v6.mode.mediawiki |
The MediaWiki language mode. Use this in conjunction with the ext.CodeMirror.v6 module. |
ext.CodeMirror.v6.init(内部) |
The main entrypoint for action=edit requests. Not intended for external use. |
ext.CodeMirror.v6.WikiEditor |
CodeMirror integration for WikiEditor. This module exports the CodeMirrorWikiEditor class. |
ext.CodeMirror.visualEditor.init |
CodeMirror integration with the 2017年版ウィキテキストエディター, and only for wikitext. |
Using hooks
You can also integrate with CodeMirror by using frontend hooks. These allow you to run code just before or after CodeMirror has loaded, or react to changes to the document.
| Hook | 説明 |
|---|---|
ext.CodeMirror.initialize |
Called just before CodeMirror is initialized. This can be used to manipulate the DOM to suit CodeMirror (i.e. if you manipulate WikiEditor's DOM, you may need this).
パラメーター
|
ext.CodeMirror.ready |
Called just after CodeMirror is initialized.
パラメータ
|
ext.CodeMirror.toggle |
Called when CodeMirror is toggled on or off.
Parameters
|
ext.CodeMirror.destroy |
Called just after CodeMirror is destroyed and the original textarea is restored.
パラメーター
|
ext.CodeMirror.input |
Called when document changes are made in CodeMirror. Note that the textarea may not be updated yet.
パラメーター
|
ext.CodeMirror.preferences.ready |
Fired just before CodeMirrorPreferences has been instantiated.
パラメーター
|
ext.CodeMirror.preferences.apply |
Fired when a CodeMirror preference is enabled or initially applied.
Parameters
|
ext.CodeMirror.preferences.change |
Fired when a CodeMirror preference is enabled or disabled by the user.
パラメーター
|
ext.CodeMirror.preferences.display(internal) |
Fired when the preferences panel is constructed, just before it is displayed.
パラメーター
|
ext.CodeMirror.keymap(internal) |
Fired when the keyboard shortcut help dialog is opened. |
ext.CodeMirror.search(internal) |
Fired when the search panel is opened. |
Using events
Using these events, you can integrate with CodeMirror using the same code as the original textarea:
myTextarea.addEventListener( 'keyup', ( event ) => {
console.log( event.key );
} );
Extending CodeMirror
You can import the ext.CodeMirror.v6.lib module to get access to the upstream CodeMirror API. With this you can provide your own Extension when instantiating a CodeMirror or CodeMirrorWikiEditor instance.
For example, to provide your own Extension that reacts to changes made in CodeMirror:
await require = mw.loader.using( [ 'ext.CodeMirror.v6', 'ext.CodeMirror.v6.mode.mediawiki' ] );
const CodeMirror = require( 'ext.CodeMirror.v6' );
const mediawikiLang = require( 'ext.CodeMirror.v6.mode.mediawiki' );
// ext.CodeMirror.v6.lib is a dependency of ext.CodeMirror.v6, so it's already loaded at this point.
const { EditorView } = require( 'ext.CodeMirror.v6.lib' );
const myExtension = EditorView.updateListener.of( ( /** @type {ViewUpdate} */ update ) => {
if ( update.docChanged ) {
// do something
console.log( update.changes );
}
} );
const cm = new CodeMirror( myTextarea, mediawikiLang() );
cm.initialize( [ cm.defaultExtensions, myExtension ] );
Or if you need to interact with an existng CodeMirror instance:
// Ensure CodeMirror is initialized first
mw.hook( 'ext.CodeMirror.ready' ).add( ( cm ) => {
const { EditorView } = require( 'ext.CodeMirror.v6.lib' );
const myExtension = EditorView.updateListener.of( ( /** @type {ViewUpdate} */ update ) => {
if ( update.docChanged ) {
// do something
console.log( update.changes );
}
} );
cm.applyExtension( myExtension );
} );
Another means of listening to changes is using the ext.CodeMirror.input hook:
mw.hook( 'ext.CodeMirror.input' ).add( ( update ) => {
// Print the ChangeSet to the console
console.log( update.changes.toJSON() );
} );
関連項目
- User:Remember the dot/Syntax highlighter
- Extension:VisualEditor
- Extension:WikiEditor
- Extension:CodeEditor
- c:Category:MediaWiki extension CodeMirror
注釈
- ↑ 2017年版エディターでは行の折り返しを無効にすることはできません。
- ↑ phab:T384556
 | この拡張機能は 1 つ以上のウィキメディアのプロジェクトで使用されています。 これはおそらく、この拡張機能が安定していて高いトラフィックのウェブサイトでも十分に動作することを意味します。 この拡張機能がインストールされている場所を確認するには、ウィキメディアの設定ファイル CommonSettings.php および InitialiseSettings.php 内で、この拡張機能の名前を探してください。 特定のウィキにインストールされている拡張機能の完全な一覧は、そのウィキの Special:Version ページにあります。 |
 | この拡張機能は以下のウィキ ファーム/ウィキ ホスト/パッケージに含まれています:
|