Help:Extension:CodeMirror/ko

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

CodeMirror 확장 기능은 위키텍스트 편집기에서 구문 강조 기능을 제공합니다. 이 기능은 색상과 음영을 사용하여 일반 텍스트를 링크, 틀, 기타 위키텍스트 마크업과 시각적으로 구분하여 편집을 더 쉽게 만들어줍니다.

사용법

활성화

CodeMirror는 환경 설정에서 "Enable syntax highlighting for wikitext"을 선택하여 활성화할 수 있습니다. WikiEditor (2010 편집기로도 알려져 있으며, "Enable the editing toolbar" 환경 설정으로 활성화됨)에서는 도구 모음의 " Syntax" 강조 버튼을 사용하여 켜고 끌 수 있습니다. 2017 편집기에서는 도구 모음의 "Page options" 버튼을 클릭한 다음 "Syntax highlighting"를 선택하여 CodeMirror를 전환할 수 있습니다.

키보드 단축키

이러한 키보드 단축키들은 2017 편집기에는 적용되지 않습니다. 2017 편집기는 자체적인 단축키를 갖고 있으며, 편집기가 열려있는 동안 Ctrl+/를 눌러 확인할 수 있습니다.

단축키	단축키(macOS)	설명
`Alt`+`←`	`Ctrl`+`←`	커서를 한 단어 왼쪽으로 이동합니다.
`Alt`+`→`	`Ctrl`+`→`	Move the cursor one word to the right.
`Alt`+`↑`	`Alt`+`↑`	선택한 줄을 한 줄 위로 이동합니다.
`Alt`+`↓`	`Alt`+`↓`	Move the selected lines down one line.
`⇧ Shift`+`Alt`+`↑`	`⇧ Shift`+`Alt`+`↑`	Duplicate the selected lines and keep the selection on the top copy.
`⇧ Shift`+`Alt`+`↓`	`⇧ Shift`+`Alt`+`↓`	Duplicate the selected lines and keep the selection on the bottom copy.
`Escape`	`Escape`	Reduce multiple selections to the main range, or to a cursor if there is only one selection.
`Ctrl`+`↵ Enter`	`⌘ Command`+`↵ Enter`	현재 줄 아래에 빈 줄을 삽입합니다.
`Ctrl`+`[`	`⌘ Command`+`[`	선택한 줄의 들여쓰기를 제거합니다.
`Ctrl`+`]`	`⌘ Command`+`]`	선택한 줄에 들여쓰기를 추가합니다.
`Ctrl`+`⇧ Shift`+`[`	`⌘ Command`+`Alt`+`[`	현재 선택된 틀을 접습니다.
`Ctrl`+`⇧ Shift`+`]`	`⌘ Command`+`Alt`+`]`	Unfold the any folded templates in the selection.
`Ctrl`+`Alt`+`[`	`Ctrl`+`Alt`+`[`	Fold all templates on the page.
`Ctrl`+`Alt`+`]`	`Ctrl`+`Alt`+`]`	Unfold all templates that are currently folded.
`Ctrl`+`f`	`⌘ Command`+`f`	Open the search panel.
`Ctrl`+`g`	`⌘ Command`+`g`	Find the next occurrence of the search string.
`⇧ Shift`+`Ctrl`+`g`	`⇧ Shift`+`⌘ Command`+`g`	Find the previous occurrence of the search string.
`Ctrl`+`d`	`⌘ Command`+`d`	Select the next occurrence of the current selection or word, creating multiple selections.
`Ctrl`+`click`	`⌘ Command`+`click`	클릭한 영역에 추가 커서나 선택을 추가합니다.
`Ctrl`+`⇧ Shift`+`X`	`⌘ Command`+`⇧ Shift`+`X`	편집기 보기를 오른쪽에서 왼쪽과 왼쪽에서 오른쪽으로 전환합니다.
`Ctrl`+`⇧ Shift`+`,`	`⌘ Command`+`⇧ Shift`+`,`	CodeMirror 환경 설정 패널을 엽니다.

기능

CodeMirror 환경 설정

미디어위키 버전:

≥ 1.44

이 기능은 2017 편집기에서는 사용할 수 없습니다.

여기에 문서화된 대부분의 기능은 개별 사용자가 비활성화하거나 활성화할 수 있습니다. 환경 설정 패널을 열려면 Ctrl+⇧ Shift+,(MacOS에서는 ⌘ Command+⇧ Shift+,)를 누르세요. WikiEditor 를 사용하는 경우 도구 모음의 "Advanced" 섹션에 있는 버튼을 클릭하여 CodeMirror 환경 설정에 접근할 수도 있습니다. CodeMirror 환경 설정은 서로 다른 기기와 세션에서도 유지됩니다.

Bracket matching

This feature highlights the innermost pair of brackets when the cursor lies between any bracket pair. When the cursor lies directly next to a bracket, the feature highlights the corresponding matching bracket.

Template folding

미디어위키 버전:

≥ 1.43

This feature is not available for the 2017 editor.

Template folding on w:Barack Obama.

Template folding is a form of code folding for templates in wikitext. It allows you to hide all parameters and their values, showing only the template name. This can make managing large, complex templates considerably easier.

Usage

When a cursor or selection covers any part of template syntax, a tooltip icon will appear just above the text. Clicking it will fold all parameters and values of the template, leaving only the template name.

Folded templates will have the template name followed by the ellipsis icon . Clicking on it will unfold the template back to its original state.

Keyboard shortcuts
Shortcut	Shortcut (macOS)	Description
`Ctrl`+`⇧ Shift`+`[`	`⌘ Command`+`Alt`+`[`	Fold the currently selected templates.
`Ctrl`+`⇧ Shift`+`]`	`⌘ Command`+`Alt`+`]`	Unfold the any folded templates in the selection.
`Ctrl`+`Alt`+`[`	`Ctrl`+`Alt`+`[`	Fold all templates on the page.
`Ctrl`+`Alt`+`]`	`Ctrl`+`Alt`+`]`	Unfold all templates that are currently folded.

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

미디어위키 버전:

≥ 1.44

This feature is not available for the 2017 editor.

Example showing autocompletion of parser functions.

This feature provides autocompletion of magic words , parser extension tags , 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 __.

Line numbering

Note how the line numbering knew to account for the lines contained in the collapsed templates.

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 template folding.

Highlight the active line

미디어위키 버전:

≥ 1.44

This feature is not available for the 2017 editor.

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

미디어위키 버전:

≥ 1.44

This feature is not available for the 2017 editor.

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

This feature is not available for the 2017 editor.

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.

Highlight special characters

This feature is not available for the 2017 editor.

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
Templates	#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

This feature is currently a work-in-progress. See phab:T358804 for more information.

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:

CodeMirror without bidi isolation

CodeMirror with bidi isolation

Color and style customization

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 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^[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
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^[4]	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>
.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>
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	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	•

Notes

↑ ^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 $wgCodeMirrorLineNumberingNamespaces configuration 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.

[personal-css-1] 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.

[2] Controlled by the $wgCodeMirrorLineNumberingNamespaces configuration setting. See Extension:CodeMirror#Configuration for more information.

[ve-we-sizing-3] 3.0 ^3.1 The size is not changed in the 2017 wikitext editor.

[4] Where "poem" is the name of the tag.

[1]

[2]

[3]

[4]