2016年社区心愿单调查/CodeMirror

CodeMirror
CodeMirror
	为 wikitext 编辑器提供语法高亮
群組：	社群技術團隊
团队成员：	Joydeep Sengupta, Dayllan Maza, Harumi Monroy, MusikAnimal, Sam Wilson, Karolin Siebert, Sandister Tei, Sammy Tarling
领导：	MusikAnimal
更新：	更新

This page is a translated version of the page Community Wishlist Survey 2016/CodeMirror and the translation is 100% complete.

CodeMirror（又称维基正文语法高亮编辑器）的项目是旨在为贡献者更加容易与更方通过使用颜色和阴影的链接代码来编辑该维基正文并让使其的正文从文章中的文本在视觉上直接地分离该文本，参考资料以及该模板。这将有助于让编辑者在具有许多参考文献的段落中工作顺利，或者是在复杂的模板那里很容易出大括号的错过并弄乱该模板。我们同时也使用该Extension:CodeMirror来编辑。

Tracked in Phabricator:
Task T259059

Tracked in Phabricator:
Task T101246 resolved

语法高亮在经典的wikitext编辑器中可用，作为一个按钮（）出现在工具栏中。它也在2017年版wikitext编辑器中可用，作为一个选项出现在“汉堡菜单图标”下拉菜单中。用户可以使用该按钮开启和关闭语法高亮。这是通过一个隐藏的参数设置来完成的，所以如果您关闭它，它将保持关闭状态，直到您再次开启为止。在第一次激活后，语法高亮被设置为关闭，所以您需要手动开启来使其工作。

该功能的主要建设是由用户Pastakhov所开发的，以及让社群技术里的志工队来协助并替他完成该功能的发展。在社区技术里的方面，用户Niharika以及Ryan做下了大部分的工作，用户Ed Sanders在编辑团队的帮助下使用了维基正文模式的可视化编辑器来集成的。

截至2023年9月，Community Tech正在努力升级到 CodeMirror 6，这将带来巨大的改进，如RTL支持、更高的性能、可访问性和移动支持。

基本原理

我们决定使用Extension:CodeMirror来作为语法高亮的工具。

这里以下的代码镜像（CodeMirror）所提供了该优势的详情：

更快的性能，已经被大量的优化
使用"wysiwyg"-风格的效果，使其更容易看见该维基正文分子的影响 -- 例如，粗体的单词以粗体的文字为显示，斜体为显示斜体。
章节标题较大，并有助于编辑者在屏幕上航行。
链接是下划线和蓝色的，并使得他们更加可识别该链接。当显示的文字与链接不同时，该链接会是蓝色的，以及在管道之后所显示的文字会是黑色的，来以表明这部分是将被视为已看过的文本。
为模板参数并使用粗体的彩色文字，条目的浅色文字。
在链接上并使用浅色的背景高亮，而不是其他的元素。太多的背景高亮会使得该维基正文更难以扫描。
等待编辑器在更改高亮的彩色之前先完成打字，让编辑器来完成键入该链接或者是该粗体/斜体的文字而不会将该行下面所有内容的文字闪烁为不同的彩色。

我们在决定使用代码镜像（CodeMirror）的之前注视到其他工具如wikEd由Cacycle，以及Syntax highlighter由Remember the dot等等之类的东西。

更新

2024年3月26日

CodeMirror 6 现已部署到测试维基百科。我们邀请用户试用并提供反馈。在未来几周内，它将慢慢部署到更多的维基上。

2023年9月13日

Tracked in Phabricator:
Task T317243

Community Tech 正在对扩展进行升级，以使用最新版本的 CodeMirror 库。这将带来许多增强功能，如 RTL 支持、更高的性能、可访问性和移动支持。

2022年3月9日

括号匹配和改进的语法高亮色将部署到所有wiki（英文维基百科在3月16日）。（更多信息）

2018年6月14日

Syntax highlighting has graduated from Beta Feature status and is now available for all users inside the 2010 Wikitext Editor on all left-to-right language wikis, in addition to all languages in the 2017 Wikitext Editor. The feature can be enabled during any edit by selecting the 🖋 Highlight icon in the toolbar.

We hope this feature makes it easier to edit in wikitext and debug malformed markup. We'd love to hear your feedback on the talkpage.

2018年5月30日

Syntax highlighting is now available for all users inside the 2017 Wikitext Editor on all wikis. In the 2010 wikitext editor we have decided to not fix any of the edge case defects for Internet Explorer or Edge, and we are not going to support IME editing (phab:T194102).

Community Tech is currently focusing all attention on another 6-week project so development will resume in July. We hope to have the feature released by the end of July or early August. You can track the rollout here: phab:T185030.

2018年4月30日

Syntax highlighting will be available without a beta feature for 2017 Wikitext Editor on all Wikimedia projects (LTR and RTL) this week.

2018年4月26日

We are nearly ready to graduate this feature from beta on the 2017 wikitext editor for both LTR and RTL languages and the 2010 wikitext editor for LTR languages. We're been working on fixing the last bout of bugs from different browsers+editor combination.

When graduated from beta, the feature will be available for all users inside the wikitext editor, but will still require enabling by clicking the ✍️ highlighter icon in the toolbar or ≡ menu.

2018年3月7日

"Wikitext editor syntax highlighting" has survived as a beta feature for more than six months now. The influx of bug reports we saw when it was first launched has been reduced to a trickle. There are some outstanding bugs that the team is working on fixing.

Unfortunately, work on getting RTL support is still pending. The issues with RTL lie in the underlying library for the extension, CodeMirror, and need support from the library maintainer to get fixed. The library is undergoing a rewrite after which we will potentially be able to address the RTL issues. The extension is on the Hebrew beta wiki where the RTL issues can be tested.

We're hoping to get "Wikitext editor syntax highlighting" out of beta within the next month. The feature will be available for all to use by default as a toolbar option in the 2010 and 2017 Wikitext editors. You can follow phab:T185030 to stay up-to-date with the developments on this project.

2017年9月19日

Happy to report that a couple important bugs are fixed! Ctrl-F browser search now works for both the regular edit window and the new wikitext mode, and word jumping using the option+arrow key now works on Mac browsers.

Fixing browser spellcheck is close to done; we'll be releasing that fix soon.

We still need to fix an issue with the new wikitext mode not respecting whether the beta feature is turned on or off -- you can turn it off on the Beta features page, but still see it on in the new wikitext mode. You can follow progress on this ticket: phab:T173480.

2017年9月7日

We're currently working on an important bug -- the Ctrl-F browser search only works if the text you're looking for is currently displayed in the edit window, or just below it. We've been investigating this for the last couple of weeks; here's an update on how it's going. You can follow progress on this ticket: phab:T174480.

We were looking at using the search add-on that GitHub uses in their version of CodeMirror, and it's not an acceptable solution for us. It only works when you've got the cursor in the edit window -- if you're not inside the edit window, ctrl-F still gives you the browser search. That's not very discoverable -- for some people, it would just be broken sometimes. The add-on also uses a combination of ctrl-F to start the search and ctrl-G to move from one highlighted word to another, which is also not very discoverable. So that is a dead end for us.

We're now investigating a couple other options, including loading the page outside the edit window in the background, after the text in the edit window is displayed. This might slow things down, so we're testing the performance.

We're still focused on solving this issue; I'm sorry it's not fixed yet.

2017年8月23日

Some feedback from Andy M. on Wikimedia-L to consider:

"My first impression is that it is lacking in contrast – it's far harder, now, to differentiate the various types of content. Indeed the colour pairs used (e.g. #8800CC vs. #AAAAB3) fail WCAG web accessibility guidelines for colour contrast. I realise that choice of styling colours is a "bikeshed" matter, but contrast ratio is a quantifiable and objective accessibility issue. Also, because the script does not load immediately, the larger headings cause the page to "dance" as the script kicks in."

2017年8月2日

Syntax Highlighting has now been released as a Beta feature on all LTR Wikimedia projects! We hope that people love using the new feature. Please leave feedback on the talk page!

We're still working on making it work for RTL languages; you can follow this progress on this ticket: T170001.

Temporarily turned off, see phabricator:T172458.

2017年7月18日

CodeMirror deployed to Simple English Wikipedia as a Beta Feature.

2017年3月22日

Team discussion, playing with CodeMirror on CommTechwiki. Performance is good, as advertised. We're generally happy with the highlighting choices. We found some bugs, and some elements that should be improved -- for example, ref tags aren't highlighted in the current version. Ryan took a lot of notes, and he'll be working on these issues -- either working with the developers, or making adjustments on our own version.

2017年3月21日

Ryan talked to Ed S on the Editing team -- they're interested in including the syntax highlighter in the new wikitext editor. This will require some investigation.

There's a current hacked version by Ed: https://gerrit.wikimedia.org/r/#/c/343878/

This version works by loading CodeMirror underneath the WikiText editor surface, making the text and background of the WikiText editor transparent, and syncing user input from the WikiText editor to the CodeMirror surface as it is entered. The problem is that it's sluggish and has syncing issues -- see phab:T161054 and phab:T161052 for more.

2017年2月27日

There's an existing extension -- Extension:CodeMirror -- that provides wikitext syntax highlighting on demand, adding a button at the top of the wikitext editor to turn highlighting on and off. (This uses a sticky preference so that an editor can turn it on once, and then see it on all future page loads.) The highlighting is acceptably fast, it takes less than a second even on a lengthy article like English WP's Barack Obama page.

There are two different use cases for syntax highlighting -- essentially, it could be a power editor feature, or a new editor training tool. Very active editors want syntax highlighting to help them edit; if this is the use case that we're focusing on, then we can make it a special preference, and let people decide if they want to use it. If we want to focus on helping new editors, then the feature would have to be on by default, and would require much stricter QA. The comments on the Wishlist proposal and votes indicate that people are requesting the power editor feature.

With that in mind -- we're planning to deploy CodeMirror as a special preference for the old wikitext editor. This will need some instruction on the preferences page to explain how to use the button & turn it on.

The VE team is planning to include this in the 2017 wikitext editor as well; we'll talk to Ed S. to see how we can work together. We'll have to make sure we agree on the color choices. In general, we'll be expected to explain the color choices, so we'll look at the existing CodeMirror colors and make sure we understand the rationale.

Another thing we have to figure out -- how will this work outside of en.wp?

重要链接

颜色和样式的自定义

该彩色以及风格可以在你的common.css页面下表为分类并通过撤销自己的彩色和文风来定义（User:例子/common.css）。

如果你不熟悉编辑CSS，请参见该以下的初学者章节。

您可以使用.CodeMirror-lines CSS类来整体控制CodeMirror编辑窗口的外观。使用此需要您自行承担风险。诸如line-height的修改不会在2017年版wikitext编辑器上生效。也请注意为下述CSS类添加的规则将具有优先权。

CSS Class(es)

Element

CodeMirror styling (CSS)

wikEd's styling (See InitFrameCSS)

Schnark's styling

Rememberthedot's styling

.cm-mw-skipformatting

leading space

 foo bar

 foo bar

 foo bar

.cm-mw-list

asterisk or number sign

* foo bar, # foo bar

* foo bar # foo bar

* foo bar # foo bar

* foo bar # foo bar

.cm-mw-signature,
.cm-mw-hr

signature, horizontal rule

∼∼∼∼, ----

~~~~, ----

~~~~, ----

~~~~, ----

.cm-mw-indenting

colons

::: foo bar

::: foo bar

::: foo bar

::: foo bar

.cm-mw-mnemonic

HTML entities

&amp;

&amp;

&amp;

&amp;

.cm-mw-comment

HTML comment

<!-- comment -->

<!-- comment -->

<!-- comment -->

<!-- comment -->

.cm-mw-apostrophes-bold,
.cm-mw-apostrophes-italic

bold and italic

'''bold''' ''italic''

'''bold''' ''italic''

'''bold''' ''italic''

'''bold''' ''italic''

Headings

pre.cm-mw-section-1

heading (size not changed in NWE)

= Heading =

= Heading =

= Heading =

= Heading =

pre.cm-mw-section-2

heading (size not changed in NWE)

== Heading ==

== Heading ==

== Heading ==

== Heading ==

pre.cm-mw-section-3

heading

=== Heading ===

=== Heading ===

=== Heading ===

=== Heading ===

pre.cm-mw-section-4

heading

==== Heading ====

==== Heading ====

==== Heading ====

==== Heading ====

pre.cm-mw-section-5

heading

===== Heading =====

===== Heading =====

===== Heading =====

===== Heading =====

pre.cm-mw-section-6

heading

====== Heading ======

====== Heading ======

====== Heading ======

====== Heading ======

.cm-mw-section-header

equals signs

==

Templates

example

{{cite book|title=foo bar}}

{{cite book|title=foo bar}}

{{cite book|title=foo bar}}

{{cite book|title=foo bar}}

.cm-mw-template

other template content

foo bar

.cm-mw-template-name

template name

cite book

cite book

.cm-mw-template-argument-name

template parameters

title=

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
(number is the level of nesting)

{{foo|{{cite book|title=foo bar}}}}

Variables

example

{{{foo|bar}}}

{{{foo|bar}}}

{{{foo bar}}}

{{{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 }}

{{PAGENAME}}

.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: The extensions can use own styles and rules for highlighting text inside own tags. For example the Cite extension highlights text inside <ref> tags as a wikitext.

example

<poemstyle="padding: 1em;">stringwhole line
string</poem>
<ref name="foo"> </ref>

<tag>...</tag>

<tag>...</tag>

pre.cm-mw-exttag

whole line inside tags

whole line

.cm-mw-exttag

text inside tags

string

.cm-mw-exttag-name

tag name

poem

.cm-mw-exttag-bracket

opening/closing brackets

< >

.cm-mw-exttag-attribute

reference attributes

style="padding: 1em;"

HTML tags

example

<span style="foo">foo bar</span>

<span style="foo">foo bar</span>

<tag style="foo">foo bar</tag>

<tag style="foo">foo bar</tag>

.cm-mw-htmltag-name

HTML tag

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>

Foo<sup>bar</sup>

Foo<sub>bar</sub>

Pre-formatted text

pre.cm-mw-tag-pre,
.cm-mw-tag-pre

pre-formatted text

<pre>foo bar</pre>

<pre>foo bar</pre>

<tag>foo bar</tag>

<tag>foo bar</tag>

pre.cm-mw-tag-nowiki,
.cm-mw-tag-nowiki

nowiki text

<nowiki>foo bar</nowiki>

<nowiki>foo bar</nowiki>

<tag>foo bar</tag>

<tag>foo bar</tag>

Internal links

example

[[foo bar]]
[[foo#section|bar]]

[[foo bar]]
[[foo#section|bar]]

[[foo bar]]
[[foo#section|bar]]

[[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]

https://www.example.org
[https://www.example.org]
[https://www.example.org example.org]

https://example.org
[https://example.org]
[https://example.org example.org]

https://example.org
[https://example.org]
[https://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

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
|}

{| class="wikitable"
|-
! Header text !! Header text 
|-
| Example || Example 
|}

{| class="wikitable"
|-
! Header text !! Header text 
|-
| Example || 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

header cell text

!caption

Non-CodeMirror

magic words

__TOC__

__TOC__

__TOC__

semi-colon (d.term)

; foo bar

(treated as extension tag)

math

<math>\sum_{i=0}^\infty 2^{-i}</math>

<math>\sum_{i=0}^\infty 2^{-i}</math>

<tag>foo bar</tag>

<tag>foo bar</tag>

(treated as extension tag)

syntaxhighlight (former score)

<syntaxhighlight>...</syntaxhighlight>

<syntaxhighlight>...</syntaxhighlight>

<tag>foo bar</tag>

<tag>foo bar</tag>

(treated as internal link)

category

[[category:foo bar]]

[[category:foo bar]]

[[category:foo bar]]

[[category:foo bar]]

file preview

(file preview at the right-hand edge)

character disambig
(nbsp thinsp ndash mdash minus etc.)

<img src="//upload.wikimedia.org/wikipedia/commons/c/cb/WikEd_character_disambiguation.png" decoding="async" width="64" height="22" class="mw-file-element" data-file-width="64" data-file-height="22">  (screenshot)

- – — −

如何为那些对CSS了解甚少的人来做到这一点的

打开您所想要应用在这个维基上的[[Special:MyPage/common.css]]页面（使用m:Special:MyPage/global.css折是代替所有维基上的页面）。

列表中显示了一个例子（* 以及 #）。添加一行
```
.cm-mw-list {background-color: green; color: red;}
```
的线条在底部（该cm-mw-list列表会来自上表中的第二个表格行），并保存起来。打开一些高亮编辑的页面并尝试该列表 - * 以及 #。绿色以及红色可以使用你所喜欢的彩色来代替，例如红绿蓝（rgb）的彩色折是使用 #123456 的代码。
通过在同一个维基上见解有列表的编辑视窗并进行保存及测试以便能看出该工作是否有按照预期而形成。（该符号的背景应当是绿色的以及该符号是红色的）。
编辑您的common.css页面以及将该colours更改为您所喜欢的任何内容，并再次保存。
对所有你想要的改变做出同样的事情，使用来自表格第一列的代码并选择你的恰当彩色。
如果您偶尔需要更改为其他特殊用途的彩色，你可以使用常规/* ... */的厚块注释来注出一组CSS的代码并添加另一组的注释。若要更改回来，将注释代码从一组转换到另一组。这会有一点头痛，但总比没有得选择来的更好。
如果你更喜欢在许多维基上使用一些配色方案而在另一个或两个维基上使用另一种配色方案，按照他们的说明来使用本地的文件 - 这将会覆盖到全域的维基上。

CSS Class(es)	Element	CodeMirror styling (CSS)	wikEd's styling (See InitFrameCSS)	Schnark's styling	Rememberthedot's styling
.cm-mw-skipformatting	leading space	foo bar	foo bar	foo bar
.cm-mw-list	asterisk or number sign	* foo bar, # foo bar	* foo bar # foo bar	* foo bar # foo bar	* foo bar # foo bar
.cm-mw-signature, .cm-mw-hr	signature, horizontal rule	∼∼∼∼, ----	~~~~, ----	~~~~, ----	~~~~, ----
.cm-mw-indenting	colons	::: foo bar	::: foo bar	::: foo bar	::: foo bar
.cm-mw-mnemonic	HTML entities	&	&	&	&
.cm-mw-comment	HTML comment	<!-- comment -->	<!-- comment -->	<!-- comment -->	<!-- comment -->
.cm-mw-apostrophes-bold, .cm-mw-apostrophes-italic	bold and italic	'''bold''' ''italic''	'''bold''' ''italic''	'''bold''' ''italic''	'''bold''' ''italic''
Headings
pre.cm-mw-section-1	heading (size not changed in NWE)	= Heading =	= Heading =	= Heading =	= Heading =
pre.cm-mw-section-2	heading (size not changed in NWE)	== Heading ==	== Heading ==	== Heading ==	== Heading ==
pre.cm-mw-section-3	heading	=== Heading ===	=== Heading ===	=== Heading ===	=== Heading ===
pre.cm-mw-section-4	heading	==== Heading ====	==== Heading ====	==== Heading ====	==== Heading ====
pre.cm-mw-section-5	heading	===== Heading =====	===== Heading =====	===== Heading =====	===== Heading =====
pre.cm-mw-section-6	heading	====== Heading ======	====== Heading ======	====== Heading ======	====== Heading ======
.cm-mw-section-header	equals signs	==
Templates
example		{{cite book\|title=foo bar}}	{{cite book\|title=foo bar}}	{{cite book\|title=foo bar}}	{{cite book\|title=foo bar}}
.cm-mw-template	other template content	foo bar
.cm-mw-template-name	template name	cite book	cite book
.cm-mw-template-argument-name	template parameters	title=	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 (number is the level of nesting)	{{foo\|{{cite book\|title=foo bar}}}}
Variables
example		{{{foo\|bar}}}	{{{foo\|bar}}}	{{{foo bar}}}	{{{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 }}	{{PAGENAME}}
.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: The extensions can use own styles and rules for highlighting text inside own tags. For example the Cite extension highlights text inside <ref> tags as a wikitext.
example		<poem style="padding: 1em;">string whole line string</poem>	<ref name="foo"> </ref>	<tag>...</tag>	<tag>...</tag>
pre.cm-mw-exttag	whole line inside tags	whole line
.cm-mw-exttag	text inside tags	string
.cm-mw-exttag-name	tag name	poem
.cm-mw-exttag-bracket	opening/closing brackets	< >
.cm-mw-exttag-attribute	reference attributes	style="padding: 1em;"
HTML tags
example		<span style="foo">foo bar</span>	<span style="foo">foo bar</span>	<tag style="foo">foo bar</tag>	<tag style="foo">foo bar</tag>
.cm-mw-htmltag-name	HTML tag	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>	Foo<sup>bar</sup> Foo<sub>bar</sub>
Pre-formatted text
pre.cm-mw-tag-pre, .cm-mw-tag-pre	pre-formatted text	<pre>foo bar</pre>	<pre>foo bar</pre>	<tag>foo bar</tag>	<tag>foo bar</tag>
pre.cm-mw-tag-nowiki, .cm-mw-tag-nowiki	nowiki text	<nowiki>foo bar</nowiki>	<nowiki>foo bar</nowiki>	<tag>foo bar</tag>	<tag>foo bar</tag>
Internal links
example		[[foo bar]] [[foo#section\|bar]]	[[foo bar]] [[foo#section\|bar]]	[[foo bar]] [[foo#section\|bar]]	[[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]	https://www.example.org [https://www.example.org] [https://www.example.org example.org]	https://example.org [https://example.org] [https://example.org example.org]	https://example.org [https://example.org] [https://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	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 \|}	{\| class="wikitable" \|- ! Header text !! Header text \|- \| Example \|\| Example \|}	{\| class="wikitable" \|- ! Header text !! Header text \|- \| Example \|\| 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	header cell text	!caption
Non-CodeMirror
	magic words	__TOC__	__TOC__	__TOC__
	semi-colon (d.term)			; foo bar
(treated as extension tag)	math	<math>\sum_{i=0}^\infty 2^{-i}</math>	<math>\sum_{i=0}^\infty 2^{-i}</math>	<tag>foo bar</tag>	<tag>foo bar</tag>
(treated as extension tag)	syntaxhighlight (former score)	<syntaxhighlight>...</syntaxhighlight>	<syntaxhighlight>...</syntaxhighlight>	<tag>foo bar</tag>	<tag>foo bar</tag>
(treated as internal link)	category	[[category:foo bar]]	[[category:foo bar]]	[[category:foo bar]]	[[category:foo bar]]
	file preview		(file preview at the right-hand edge)
	character disambig (nbsp thinsp ndash mdash minus etc.)		(screenshot)	- – — −