Help:Extension:CodeMirror

This page is a translated version of the page Help:Extension:CodeMirror and the translation is 100% complete.

注意: このページを編集すると、編集内容が CC0 のもとで公開されることに同意したと見なされます。詳細はパブリック・ドメインのヘルプページを参照してください。

CodeMirror 拡張機能は、シンタックスハイライトを提供するエディターです。様々な言語、特にMediaWikiのウィキテキストやJavaScript、CSS、JSON、Luaに対応しています。色や網掛けを使って、リンク・テンプレート・その他のウィキテキストマークアップなどの他の構文とプレーンテキストを視覚的に区別できるため、編集がより簡単に出来るようになります。

使用法

有効化

CodeMirrorは、 改善された構文ハイライト というベータ機能を有効にしてから、個人設定の編集タブにある 構文強調表示を有効にする を有効にすることで使えるようになります。 WikiEditor （別称は2010年版エディター、個人設定の 編集ツールバーを有効にする で有効にできる）では、ツールバーにある強調表示用のボタン「構文」を押してオン・オフの切り替えができます。 2017年版エディタの場合はツールバーの「ページ設定」用を押してから「構文の強調」も押すと、コードミラーの有効無効が切り替わります。

キーボードショートカット

一部のキーボードショートカットは、独自のキーボードショートカットを持つ2017年版エディターには適用されません。

Ctrl+⇧ Shift+/. でヘルプダイアログを開くと、キーボードショートカットを確認できます。

キーボードショートカットの一覧

ショートカット	ショートカット（macOS）	説明
移動
`Ctrl`+`←`	`Alt`+`←`	カーソルを左に1文字移動する。
`Ctrl`+`→`	`Alt`+`→`	カーソルを右に1文字移動する。
`Alt`+`↑`	`Alt`+`↑`	選択した行の1行上に移動する。
`Alt`+`↓`	`Alt`+`↓`	選択した行の1行下に移動する。
`⇧ Shift`+`Alt`+`↑`	`⇧ Shift`+`Alt`+`↑`	選択した行を複製する。カーソルは上の行に移動する。
`⇧ Shift`+`Alt`+`↓`	`⇧ Shift`+`Alt`+`↓`	選択した行を複製する。カーソルは下の行に移動する。
`Escape`	`Escape`	複数の範囲を選択していれば、その中で最も大きい範囲のみを選択する。選択範囲が1つしかなければ、選択を解除しカーソルだけにする。
文字の装飾
`Ctrl`+`b`	`⌘ Command`+`b`	選択したテキストを太字にする。
`Ctrl`+`i`	`⌘ Command`+`i`	選択したテキストを斜体にする。
`Ctrl`+`k`	`⌘ Command`+`k`	リンクを挿入する。
`Ctrl`+`⇧ Shift`+`6`	`⌘ Command`+`⇧ Shift`+`6`	選択したテキストをコンピュータコードとして表示する。
`Ctrl`+`⇧ Shift`+`5`	`⌘ Command`+`⇧ Shift`+`5`	選択したテキストに取り消し線を入れる。
`Ctrl`+`,`	`⌘ Command`+`,`	選択したテキストを下付き文字にする。
`Ctrl`+`.`	`⌘ Command`+`.`	選択したテキストを上付き文字にする。
`Ctrl`+`u`	`⌘ Command`+`u`	選択したテキストに下線を付ける。
段落の整形
`Ctrl`+`[`	`⌘ Command`+`[`	選択した行のインデント（字下げ）を減らす。
`Ctrl`+`]`	`⌘ Command`+`]`	選択した行のインデント（字下げ）を増やす。
`Ctrl`+`7`	`Ctrl`+`7`	選択したテキストを整形済みテキストにする。
`Ctrl`+`8`	`⌘ Command`+`8`	選択したテキストをブロック引用にする。
`Ctrl`+`1-6`	`⌘ Command`+`1-6`	指定されたレべル（1から6）の見出しを追加する。
検索
`Ctrl`+`f`	`⌘ Command`+`f`	検索パネルを開く。
`Ctrl`+`g`	`⌘ Command`+`g`	検索した文字列の次の出現箇所を表示する。
`⇧ Shift`+`Ctrl`+`g`	`⇧ Shift`+`⌘ Command`+`g`	検索した文字列の前の出現箇所を表示する。
`Ctrl`+`d`	`⌘ Command`+`d`	現在選択している範囲または単語の次の出現箇所を選択し、複数の選択範囲を作成する。
`Ctrl`+`Alt`+`g`	`⌘ Command`+`Alt`+`g`	移動ラインパネルを開く。
挿入
`Ctrl`+`↵ Enter`	`⌘ Command`+`↵ Enter`	現在の行の下に空白の行を挿入する。
`Ctrl`+`⇧ Shift`+`k`	`⌘ Command`+`⇧ Shift`+`k`	脚注を挿入する。
`Ctrl`+`/`	`⌘ Command`+`/`	コメントを挿入する。もしくは、選択したテキストをコメントにする。
コード折り畳み
`Ctrl`+`⇧ Shift`+`[`	`⌘ Command`+`Alt`+`[`	現在選択されているコードを折り畳む。
`Ctrl`+`⇧ Shift`+`]`	`⌘ Command`+`Alt`+`]`	選択したコードを展開する。
`Ctrl`+`Alt`+`[`	`Ctrl`+`Alt`+`[`	全てのコードを折り畳む。
`Ctrl`+`Alt`+`]`	`Ctrl`+`Alt`+`]`	全てのコードを展開する。
その他
`Ctrl`+`⇧ Shift`+`/`	`Ctrl`+`⇧ Shift`+`x`	キーボードショートカットのヘルプダイアログを表示する。
`Ctrl`+`⇧ Shift`+`,`	`⌘ Command`+`⇧ Shift`+`,`	CodeMirrorの個人設定パネルを開く。
`Ctrl`+`⇧ Shift`+`x`	`⌘ Command`+`⇧ Shift`+`x`	エディターの表示方向を右横書き・左横書きで切り替える。
カーソルでの変更
`Ctrl`+`click`	`⌘ Command`+`click`	クリックした領域にカーソルまたは選択範囲を追加する。
`Ctrl`+`click` on page titles	`⌘ Command`+`click` on page titles	ウィキテキストコードのリンクを開く。
`Alt`+`click` and drag	`Alt`+`click` and drag	長方形の選択範囲を作成する。

機能

2017年版エディターは、括弧マッチング、行番号表示、および色覚特性モードのみ対応しています。

CodeMirrorの個人設定

MediaWiki バージョン:

≧ 1.44

ここに記されているほとんどの機能は、ユーザーごとに個別に無効もしくは有効に設定可能です。選択パネルを開くにはCtrl+⇧ Shift+,（macOSでは⌘ Command+⇧ Shift+,）を押してください。 WikiEditor を使用している場合、ツールバーの「上級」にあるボタンをクリックすることで、CodeMirrorの個人設定を開くこともできます。 CodeMirrorの個人設定は、異なるデバイスやセッションでの変更も記憶されます。

一部の個人設定は「advanced」個人設定ダイアログでのみ変更できます。個人設定パネルの「advanced」リンクをクリックするか、直接 Alt+⇧ Shift+, を押すことで開けます。

括弧マッチング

カーソルが括弧のすぐ隣にあるとき、対応する括弧が強調表示されます。

コード折り畳み

MediaWiki バージョン:

≧ 1.43

w:Barack Obama でコードを折り畳む様子。

コード折り畳み機能を利用すると、テンプレートの引数、拡張タグ、その他のコードブロックを折り畳むことができます。これにより、大きく複雑なテンプレート群の管理がとても簡単になります。

使用法

カーソルまたは選択範囲が対応している構文の一部に重なると、テキストのすぐ上にツールチップアイコンが表示されます。これをクリックすると、コードが折り畳まれ、テンプレートないしタグ名だけが残ります。

折り畳まれたコードには、テンプレート名ないしタグ名の後ろに省略アイコンが表示されます。これをクリックすると、コードが元の状態に展開されます。

キーボードショートカット
ショートカット	ショートカット（macOS）	説明
`Ctrl`+`⇧ Shift`+`[`	`⌘ Command`+`Alt`+`[`	選択したコードを折り畳む。
`Ctrl`+`⇧ Shift`+`]`	`⌘ Command`+`Alt`+`]`	選択したコードを展開する。
`Ctrl`+`Alt`+`[`	`Ctrl`+`Alt`+`[`	全てのコードを折り畳む。
`Ctrl`+`Alt`+`]`	`Ctrl`+`Alt`+`]`	全てのコードを展開する。

カスタマイズ

テンプレートを折り畳むためのキーボードショートカットを残しつつ、折り畳みボタンを消したい場合は、以下のコードを個人用CSSに追加してください。^[1]

.cm-tooltip-fold {
	display: none;
}

自動補完

MediaWiki バージョン:

≧ 1.44

この機能は、マジックワード、パーサー拡張機能のタグ、およびURLのプロトコルを自動補完できます。例えば {{# と入力すると、# から始まる全てのパーサー関数の一覧が表示されます。同様に、アンダースコア2つ（__）を入力すると、アンダースコア2つから始まるマジックワードの一覧が表示されます。入力を続けると、検索範囲を絞り込むことができます。矢印キーで目的のテキストを選択し、↵ Enter または Tab ↹ キーを押すと、それが入力されます。自動補完は、デフォルトで # または __ で始まらないマジックワードやパーサー関数、およびテンプレートでは動作しません。その場合に自動補完を利用するには、{{ を入力し、探しているテンプレート、マジックワード、パーサー関数の先頭数文字を入力してから ⇧ Shift+↵ Enter を押してください。同じショートカットを用いることで、ファイルへのリンクを含むウィキリンクの自動補完もできます。

リンティング

MediaWiki バージョン:

≧ 1.45

CodeMirrorにはlint（リント）機能があります。これにより、即時に静的コード解析が行われ、保存せずともコードのエラーや潜在的な問題を発見できます。これはウィキテキストを含む、CodeMirrorが対応する全ての言語で動作します。

lintは、CodeMirrorの個人設定にある「Lint the code」から有効化できます。有効にすると、エディターの下部にエラー・警告・情報診断の数が記載されたステータスバーが表示されます。問題点はソーステキスト上で下線が引かれます。問題点にカーソルを合わせると、詳しい情報が表示されます。場合によっては、lint機能によって問題をすぐに修正するためのボタンが表示されることもあります。ステータスバーの反対側には、現在の行番号、文字、選択範囲の長さが表示されます。

ウィキテキストで使用されるlintルールの一覧については、Help:Extension:CodeMirror/ウィキテキストのlint を参照してください。

lint機能は様々な問題修正に役立つ便利な道具ですが、権威があるものではありません。全ての編集者が賛成しないようなスタイルを推奨する可能性があることに注意してください。

ウィキテキスト内のリンクを開く

MediaWiki バージョン:

≧ 1.44

ウィキテキスト内の指定されたリンクを素早く開くことができます。リンクを開くには、Ctrl キー（macOSでは ⌘ Command）を押したまま、[[Main Page]] のようなリンク構文内のページタイトルをクリックしてください。この場合、Main Pageが新しいタブで開きます。

この機能はテンプレート名やファイル名でも動作します。

行番号表示

有効にすると、すべてのエディターで行番号が自動的に表示されます。ウィキメディアのウィキにおいては、特定のウィキの特定の名前空間でのみ有効になります。^[2]

行番号では、コード折り畳みによる隠れた行なども考慮されます。

選択した行の強調表示

MediaWiki バージョン:

≧ 1.44

CodeMirrorの個人設定で、「Highlight the active line」を選択してこの機能を有効にすると、特に大きなページでカーソルがテキストのどの行にあるか分かりやすくなります。

行の折り返し

MediaWiki バージョン:

≧ 1.44

行の折り返しは、ほとんどのエディターで既定の動作です。複雑なウィキテキストやコードを書く場合など、この機能を無効にしたいときは、CodeMirrorの個人設定からできます。

複数のカーソルと選択範囲

Ctrl キー（macOSの場合は ⌘ Command）を押しながら、目的の内容やカーソルの位置をクリックすると、カーソルや選択範囲を追加できます。これを行うと、加えた変更は全ての選択範囲に同時に適用されます。

Ctrl+d（macOSの場合は ⌘ Command+d）を押すと、現在の選択範囲ないし単語の次の出現箇所を選択し、複数の選択範囲が作成されます。これは素早く検索・置換する際に便利です。

特殊文字の強調表示

既定では、CodeMirrorは印刷できない制御文字やノーブレークスペースなどの文字を強調表示します。制御文字は赤い点で、ノーブレークスペースは薄い灰色の点で表示されます。これらの文字にポインターを合わせると、その文字が何なのか示すツールチップが表示されます。

必要に応じて、CodeMirrorの個人設定でこの機能を無効にすることができます。

色覚特性モード

色の区別が難しい利用者のために、CodeMirrorは色覚特性を持つ利用者に向けたモードを提供しています。この機能は、個人設定から「ウィキテキストでの編集時にカラーブラインドに応じた配色を使用する」を有効にすることで、CodeMirrorが導入されているウィキで使用できるようになります。

色覚特性向けの配色を有効にすると、次のページ要素の色が変更されます。

見出し、記号、署名、節名、マジックワード	#E4A400
テンプレート	#9C3A00
HTMLタグ、脚注、数式	#56B4E9
変数	#009E73

さらに、すべてのテキストやオブジェクトから背景のハイライトと色が削除されます。太字と下線の動作には影響ありません。

双方向テキストの分離

この機能は現在作成中です。詳細は T358804 を参照してください。

右から左に読むページでは、CodeMirrorはHTMLやその他のタグを双方向テキストとして分離できるため、読みやすくなります。標準的なテキストレイアウトのアルゴリズムは、中立的な句読文字（二重引用符〈"〉のように、文脈によって開始記号にも終了記号にもなりうる記号）は、右から左に書く文章では間違った位置に配置されます。双方向テキストの分離を使用すると、これを修正し、以下のように読みやすくできます。

双方向テキストの分離なしのCodeMirror
双方向テキストの分離ありのCodeMirror

色とスタイルのカスタマイズ

CodeMirrorで使用される色とスタイルは、個人用CSSで下の表に示すクラスに対し、独自のスタイルを定義することで上書きできます。^[1] 行の高さや文字サイズなどの変更は、2017年版ウィキテキストエディターでは機能しない場合があることに注意してください。

CSSクラス	要素	CodeMirrorのスタイル
.cm-mw-skipformatting	行頭の空白	foo bar
.cm-mw-list	アスタリスク、井桁	* foo bar, # foo bar
.cm-mw-signature, .cm-mw-hr	署名、水平線	∼∼∼∼, ----
.cm-mw-indenting	コロン	::: foo bar
.cm-mw-html-entity	HTMLの文字実体参照	&
.cm-mw-comment	HTMLのコメント	<!-- comment -->
.cm-mw-apostrophes-bold, .cm-mw-apostrophes-italic	太字と斜体	'''bold''' ''italic''
見出し
.cm-mw-section-1	レベル1の見出し^[3]	= Heading =
.cm-mw-section-2	レベル2の見出し^[3]	== Heading ==
.cm-mw-section-3	レベル3の見出し	=== Heading ===
.cm-mw-section-4	レベル4の見出し	==== Heading ====
.cm-mw-section-5	レベル5の見出し	===== Heading =====
.cm-mw-section-6	レベル6の見出し	====== Heading ======
.cm-mw-section-header	等号	==
テンプレート
例		{{cite book\|title=foo bar}}
.cm-mw-template	その他のテンプレートの中身	foo bar
.cm-mw-template-name	テンプレートの名前	cite book
.cm-mw-template-argument-name	テンプレートの引数	title=
.cm-mw-template-delimiter	パイプ	\|
.cm-mw-template-bracket	開き・閉じ括弧	{{ }}
.cm-mw-template-ground .cm-mw-template2-ground .cm-mw-template3-ground	入れ子のテンプレート（数字は入れ子の回数）	{{foo\|{{cite book\|title=foo bar}}}}
変数
例		{{{foo\|bar}}}
.cm-mw-templatevariable	変数	bar
.cm-mw-templatevariable-name	三重括弧で囲まれた変数の名前	foo
.cm-mw-templatevariable-bracket	開き・閉じ括弧	{{{ }}}
.cm-mw-templatevariable-delimiter	パイプ	\|
パーサー関数
例		{{#assessment: A \| High }}
.cm-mw-parserfunction	パーサー関数の引数	High
.cm-mw-parserfunction-name	パーサー関数の名前	PAGENAME #invoke
.cm-mw-parserfunction-bracket	開き・閉じ括弧	{{ }}
.cm-mw-parserfunction-delimiter	区切り文字	:
拡張機能のタグ
注: 拡張機能では、拡張タグ内のテキストを強調表示するために、独自のスタイルとルールが使用される場合があります。
例		<poem style="padding: 1em;">string whole line string</poem>
.cm-mw-exttag	タグ内のテキスト	string
.cm-mw-exttag-name, .cm-mw-ext-poem^[4]	タグの名前	poem
.cm-mw-exttag-bracket	開き・閉じ括弧	< >
.cm-mw-tag-ref	脚注の内容	<ref>{{cite web\|url=https://example.org}}</ref>
.cm-mw-exttag-attribute .cm-mw-exttag-attribute-value	脚注の属性	style="padding: 1em;"
HTMLタグ
例		<span style="foo">foo bar</span>
.cm-mw-htmltag-name	HTMLタグ	span
.cm-mw-htmltag-bracket	開き・閉じ括弧	< >
.cm-mw-htmltag-attribute .cm-mw-htmltag-attribute-value	引数と値	style="foo"
	上付き文字下付き文字	foo<sup>bar</sup> foo<sub>bar</sub>
整形済みテキスト
.cm-mw-tag-pre	整形済みテキスト	<pre>foo bar</pre>
.cm-mw-tag-nowiki	nowikiのテキスト	<nowiki>foo bar</nowiki>
内部リンク
例		[[foo bar]] [[foo#section\|bar]]
.cm-mw-link-pagename	内部リンク先	foo bar
.cm-mw-link	`#` の文字	#section
.cm-mw-link-tosection	`#` 以降の文字	#section
.cm-mw-link-bracket	開き・閉じ括弧	[[ ]]
.cm-mw-link-text	リンクラベル	（追加の整形なし）
.cm-mw-link-delimiter	パイプ	\|
.cm-mw-pagename	内部リンク先	foo bar
外部リンク
例		https://www.example.org [https://www.example.org] [https://www.example.org example.org]
.cm-mw-extlink, .cm-mw-free-extlink	外部リンク先	www.example.org
.cm-mw-extlink-protocol, .cm-mw-free-extlink-protocol	プロトコル	https://
.cm-mw-extlink-text	リンクラベル	（追加の整形なし）
.cm-mw-extlink-bracket	開き・閉じ括弧	[ ]
表
例		{\| class="wikitable" \|- ! Header text !! Header text \|- \| Example \|\| Example \|}
.cm-mw-table-bracket	開き・閉じ括弧とパイプ	{\| \|}
.cm-mw-table-delimiter	行と列の区切り	\| \|- !
.cm-mw-table-definition .cm-mw-table-definition-value	表のクラスとスタイル	class="wikitable"
.cm-mw-table-caption	キャプションテキスト	\|+ caption
その他
.cm-mw-double-underscore	マジックワード	__TOC__
.cm-mw-list	セミコロン（定義リスト）	;Foo:Bar
.cm-special-char-nbsp	ノーブレークスペース	· ·
.cm-specialChar	制御文字	•

注釈

↑ ^1.0 ^1.1 あなたの個人用CSSは Special:MyPage/common.css にあります。 GlobalCssJs が導入されている場合は、変更を全てに反映させることもできます。ウィキメディアのウィキにおいては、あなたのグローバルCSSは meta:Special:MyPage/global.css にあります。
↑ $wgCodeMirrorLineNumberingNamespaces 設定によって制御されます。詳細については、Extension:CodeMirror を参照してください。
↑ ^3.0 ^3.1 2017年版ウィキテキストエディターでは大きさは変更されません。
↑ この「poem」はタグの名前です。

[personal-css-1] 1.0 ^1.1 あなたの個人用CSSは Special:MyPage/common.css にあります。 GlobalCssJs が導入されている場合は、変更を全てに反映させることもできます。ウィキメディアのウィキにおいては、あなたのグローバルCSSは meta:Special:MyPage/global.css にあります。

[2] $wgCodeMirrorLineNumberingNamespaces 設定によって制御されます。詳細については、Extension:CodeMirror を参照してください。

[ve-we-sizing-3] 3.0 ^3.1 2017年版ウィキテキストエディターでは大きさは変更されません。

[4] この「poem」はタグの名前です。

[1]

[2]

[3]

[4]