Help:Extension:CodeMirror（コードミラー）
CodeMirror拡張機能はWikiテキストエディタでシンタックスハイライトを提供します。 色や網掛けを使って、プレーンテキストとリンク、テンプレート、その他のWikitextマークアップを視覚的に分かりやすくすることで、編集をより簡単に出来るようになります。
使用法
有効化
コードミラー(CodeMirror)は環境設定で"Enable syntax highlighting for wikitext"と設定することで有効になります。
In WikiEditor (also known as the 2010 editor, enabled with the "Enable the editing toolbar" preference), it can also be toggled on and off using the highlighter button "
Syntax" in the toolbar.
In the 2017 editor, you can toggle CodeMirror by clicking the "Page options" button 
in the toolbar, then selecting "Syntax highlighting".
キーボード ショートカット
| List of keyboard shortcuts | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
|
機能
コードミラー（CodeMirror）の環境設定
| MediaWiki バージョン: | ≧ 1.44 |
ここに記されているほとんどの機能は、ユーザーごとに個別に無効もしくは有効に設定可能です。
選択パネルを開くにはCtrl+⇧ Shift+,（macOSでは⌘ Command+⇧ Shift+,）を押してください。
If you use WikiEditor, you can also get to your CodeMirror preferences by clicking on the 
button in the "Advanced" section of the toolbar.
Your CodeMirror preferences will be remembered across different devices and sessions.
Bracket matching
When the cursor lies directly next to a bracket, the feature highlights the corresponding matching bracket.
Code folding
| MediaWiki バージョン: | ≧ 1.43 |
Code folding allows you to fold template parameters, extension tags, and other code blocks. This can make managing large, complex templates considerably easier.
Usage
When a cursor or selection covers any part of supported syntax, a tooltip icon 
will appear just above the text. Clicking it will fold the code, leaving only the template or tag name.
Folded code will have the template or tag name followed by the ellipsis icon 
. Clicking on it will unfold the code back to its original state.
| ショートカット | ショートカット（macOS） | 説明 |
|---|---|---|
| Ctrl+⇧ Shift+[ | ⌘ Command+Alt+[ | Fold the selected code. |
| Ctrl+⇧ Shift+] | ⌘ Command+Alt+] | Unfold the selected code. |
| Ctrl+Alt+[ | Ctrl+Alt+[ | Fold all code. |
| Ctrl+Alt+] | Ctrl+Alt+] | Unfold all code. |
Customization
If you'd like to keep the keyboard shortcut for folding templates, but hide the visual component, you can do so by adding the following to your personal CSS:[1]
.cm-tooltip-fold {
display: none;
}
Autocompletion
| MediaWiki バージョン: | ≧ 1.44 |
This feature provides autocompletion of マジックワード, パーサー拡張機能のタグ, and URL protocols.
If you enter {{#, you should see a list of all parser functions that start with #.
Similarly, typing double underscores (__) will show a list of double-underscored magic words.
You can continue to type to narrow your search. Use the arrow keys to select the desired text, and hit the ↵ Enter or Tab ↹ key to make your selection.
Autocompletion does not work for templates, or for magic words or parser functions that do not begin with # or __.
Opening links in wikitext
You can quickly open links specified in the wikitext. Do this by holding down the Ctrl key (or ⌘ Command on MacOS) and clicking on a page title inside of link syntax, such as [[Main Page]]. Clicking this case would open Main Page in a new tab.
This feature also works for template names and file names.
Line numbering
When enabled, line numbers are automatically displayed in all editors. On the Wikimedia wikis, it is only enabled for specific namespaces of specific wikis.[2]
Line numbers will take into account any hidden lines, such as those through code folding.
Highlight the active line
| MediaWiki バージョン: | ≧ 1.44 |
In your CodeMirror preferences, you can select "Highlight the active line" to enable this feature, which can make it easier to tell which line of text the cursor is on, especially on large pages.
Line wrapping
| MediaWiki バージョン: | ≧ 1.44 |
Line wrapping is the default behaviour in most editors. Sometimes you may want to disable this, especially when writing complex wikitext or other code. You can disable line wrapping in your CodeMirror preferences.
Multiple cursors and selections
You can add additional cursors or selections by holding the Ctrl key (or ⌘ Command on MacOS) and clicking on the desired content or cursor placement. After doing so, any changes you make will be applied to all the selections at the same time.
You can also press Ctrl+d (or ⌘ Command+d on MacOS) to select the next occurrence of the current selection or word, which create multiple selections. This can be useful as a quick find and replace feature.
特殊文字強調
By default, CodeMirror will highlight non-printable control characters and other characters such as non-breaking spaces. Control characters appear as a red dot, while non-breaking spaces are displayed as a faint gray dot. Hovering over these characters will show a tooltip stating which character it is.
If desired, you can disable this feature in your CodeMirror preferences.
Colorblind mode
For users who have difficulty distinguishing between colors, CodeMirror offers a colorblind-friendly mode. This feature can be activated on wikis with CodeMirror enabled with "Enable colorblind-friendly scheme for syntax highlighting when editing wikitext" in your preferences.
With the colorblind-friendly scheme active, the colors of the following page elements change:
| Headings, symbols, signatures, section names, magic words | #E4A400 |
| テンプレート | #9C3A00 |
| HTML tags, references, mathematical expressions | #56B4E9 |
| Variables | #009E73 |
In addition, background highlights and colors are removed from all text and objects. Bolding and underlining behavior remains unaffected.
Bidi isolation
On right-to-left pages, CodeMirror can isolate HTML and other tags as bidirectional text, which can improve readability. The standard algorithm for the layout of text places neutral punctuation characters between right-to-left text on the wrong side. With bidi isolation, we can correct this so it reads more legibly:
 |
 |
色とスタイルのカスタマイズ
The colors and styles used in CodeMirror can be overridden by defining your own styles for the classes in the table below in your personal CSS.[1] Please be aware that changing some things like the line height or font size may not work in the 2017 wikitext editor.
| CSSクラス | Element | CodeMirror styling |
|---|---|---|
| .cm-mw-skipformatting | leading space | foo bar |
| .cm-mw-list | asterisk or number sign | * foo bar, # foo bar |
| .cm-mw-signature, .cm-mw-hr |
signature, horizontal rule | ∼∼∼∼, ---- |
| .cm-mw-indenting | colons | ::: foo bar |
| .cm-mw-html-entity | HTML entities | & |
| .cm-mw-comment | HTML comment | <!-- comment --> |
| .cm-mw-apostrophes-bold, .cm-mw-apostrophes-italic |
bold and italic | '''bold''' ''italic'' |
| Headings | ||
| .cm-mw-section-1 | level 1 heading[3] | = Heading = |
| .cm-mw-section-2 | level 2 heading[3] | == Heading == |
| .cm-mw-section-3 | level 3 heading | === Heading === |
| .cm-mw-section-4 | level 4 heading | ==== Heading ==== |
| .cm-mw-section-5 | level 5 heading | ===== Heading ===== |
| .cm-mw-section-6 | level 6 heading | ====== Heading ====== |
| .cm-mw-section-header | equal signs | == |
| Templates | ||
| 例 | {{cite book|title=foo bar}} | |
| .cm-mw-template | other template content | foo bar |
| .cm-mw-template-name | template name | cite book |
| .cm-mw-template-argument-name | template parameters | title= |
| .cm-mw-template-delimiter | pipe | | |
| .cm-mw-template-bracket | opening/closing brackets | {{ }} |
| .cm-mw-template-ground .cm-mw-template2-ground .cm-mw-template3-ground |
whole template (the number is the level of nesting) |
{{foo|{{cite book|title=foo bar}}}} |
| Variables | ||
| example | {{{foo|bar}}} | |
| .cm-mw-templatevariable | variable | bar |
| .cm-mw-templatevariable-name | triple-braced variable name | foo |
| .cm-mw-templatevariable-bracket | opening/closing brackets | {{{ }}} |
| .cm-mw-templatevariable-delimiter | pipe | | |
| Parser functions | ||
| example | {{#assessment: A | High }} | |
| .cm-mw-parserfunction | parser function parameters | High |
| .cm-mw-parserfunction-name | parser function name | PAGENAME #invoke |
| .cm-mw-parserfunction-bracket | opening/closing brackets | {{ }} |
| .cm-mw-parserfunction-delimiter | delimiter | : |
| Extension tags | ||
| Note: Extension may use their own styles and rules for highlighting text within the extension tag. | ||
| example | <poem style="padding: 1em;">string whole line string</poem> | |
| .cm-mw-exttag | テキスト内タグ | string |
| .cm-mw-exttag-name, .cm-mw-ext-poem[4] |
tag name | poem |
| .cm-mw-exttag-bracket | opening/closing brackets | < > |
| .cm-mw-exttag-attribute | reference attributes | style="padding: 1em;" |
| HTMLタグ | ||
| example | <span style="foo">foo bar</span> | |
| .cm-mw-htmltag-name | HTMLタグ | span |
| .cm-mw-htmltag-bracket | opening/closing brackets | < > |
| .cm-mw-htmltag-attribute | parameters and values | style="foo" |
| superscript subscript |
foo<sup>bar</sup> foo<sub>bar</sub> | |
| Pre-formatted text | ||
| .cm-mw-tag-pre | pre-formatted text | <pre>foo bar</pre> |
| .cm-mw-tag-nowiki | nowiki text | <nowiki>foo bar</nowiki> |
| Internal links | ||
| 例 | [[foo bar]] [[foo#section|bar]] | |
| .cm-mw-link-pagename | internal link target | foo bar |
| .cm-mw-link | # character | #section |
| .cm-mw-link-tosection | characters after the # | #section |
| .cm-mw-link-bracket | opening/closing brackets | [[ ]] |
| .cm-mw-link-text | link label | (no additional formatting) |
| .cm-mw-link-delimiter | pipe | | |
| .cm-mw-pagename | internal link targets | foo bar |
| External links | ||
| example | https://www.example.org [https://www.example.org] [https://www.example.org example.org] | |
| .cm-mw-extlink, .cm-mw-free-extlink |
external link target | www.example.org |
| .cm-mw-extlink-protocol, .cm-mw-free-extlink-protocol |
プロトコル | https:// |
| .cm-mw-extlink-text | link label | (no additional formatting) |
| .cm-mw-extlink-bracket | opening/closing brackets | [ ] |
| Tables | ||
| example | {| class="wikitable" |- ! Header text !! Header text |- | Example || Example |} | |
| .cm-mw-table-bracket | opening/closing brackets and pipe | {| |} |
| .cm-mw-table-delimiter | row and column separators | | |- ! |
| .cm-mw-table-definition | table classes and styles | class="wikitable" |
| .cm-mw-table-caption | caption text | |+ caption |
| その他 | ||
| .cm-mw-double-underscore | マジックワード | __TOC__ |
| .cm-mw-list | semicolon (definition lists) | ;Foo:Bar |
| .cm-special-char-nbsp | non-breaking space | · · |
| .cm-specialChar | control characters | • |
注記
- ↑ 1.0 1.1 Your personal CSS is at Special:MyPage/common.css. You can also make your changes take effect globally if GlobalCssJs is installed. On Wikimedia wikis, your global CSS is at meta:Special:MyPage/global.css.
- ↑
Controlled by the
$wgCodeMirrorLineNumberingNamespacesconfiguration setting. See Extension:CodeMirror#Configuration for more information. - ↑ 3.0 3.1 The size is not changed in the 2017 wikitext editor.
- ↑ Where "poem" is the name of the tag.