Help:Extension:CodeMirror/Color and style customization

This is a partial list of the CodeMirror CSS classes. The complete list of default CodeMirror styling definitions is on Gerrit.

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. Please be aware that changing some things like the line height or font size may not work in the 2017 wikitext editor.

CSS class(es)	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	= Heading =
.cm-mw-section-2	level 2 heading	== 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
example		{{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	text inside tags	string
.cm-mw-exttag-name, .cm-mw-ext-poem	tag name	poem
.cm-mw-exttag-bracket	opening/closing brackets	< >
.cm-mw-tag-ref	reference content	<ref>{{cite web|url=https://example.org}}</ref>
.cm-mw-exttag-attribute .cm-mw-exttag-attribute-value	reference attributes	style="padding: 1em;"
HTML tags
example		<span style="foo">foo bar</span>
.cm-mw-htmltag-name	HTML tag	span
.cm-mw-htmltag-bracket	opening/closing brackets	< >
.cm-mw-htmltag-attribute .cm-mw-htmltag-attribute-value	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
example		[[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	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 .cm-mw-table-definition-value	table classes and styles	class="wikitable"
.cm-mw-table-caption	caption text	|+ caption
Other
.cm-mw-double-underscore	magic words	__TOC__
.cm-mw-list	semicolon (definition lists)	;Foo:Bar
.cm-special-char-nbsp	non-breaking space	· ·
.cm-specialChar	control characters	•