도움말:확장:코드미러

주의사항: 이 문서를 편집하면 CC0에 따라 당신의 기여한 것을 배포하는 데 동의하는 것으로 간주됩니다. 자세한 내용은 퍼블릭 도메인 도움말 문서를 확인 하세요.

CodeMirror 확장 기능은 구문 강조 기능과 다른 구문적인 편집 기능을 제공하는 편집기입니다. It supports a variety of languages, notably MediaWiki wikitext, JavaScript, CSS, JSON and Lua. 이 기능은 색상과 음영을 사용하여 일반 텍스트를 링크, 틀, 기타 위키텍스트 마크업와 같은 구문과 시각적으로 구분하여 편집을 더 쉽게 만들어줍니다.

사용법

활성화

CodeMirror는 환경 설정의 편집 섹션에서 "위키텍스트에 대한 구문 강조 활성화"을 선택하여 활성화할 수 있습니다. WikiEditor (2010 편집기로도 알려져 있으며, "편집 도구 모음 활성화하기" 환경 설정으로 활성화됨)에서는 도구 모음의 " 문법" 강조 버튼을 사용하여 켜고 끌 수 있습니다. 2017 편집기에서는 도구 모음의 "문서 옵션" 버튼을 클릭한 다음 "문법 강조"를 선택하여 CodeMirror를 전환할 수 있습니다.

키보드 단축키

이러한 키보드 단축키들은 2017 편집기에는 적용되지 않습니다. 2017 편집기는 자체적인 단축키를 갖고 있습니다.

You can review keyboard shortcuts by opening the help dialog with Ctrl+⇧ Shift+/.

키보드 단축키 목록

단축키 단축키(macOS) 설명 둘러보기 Ctrl+← Alt+← 커서를 한 단어 왼쪽으로 이동합니다. Ctrl+→ Alt+→ 커서를 오른쪽으로 한 단어 이동합니다. Alt+↑ Alt+↑ 선택한 줄을 한 줄 위로 이동합니다. Alt+↓ Alt+↓ 선택한 줄을 한 줄 아래로 이동합니다. ⇧ Shift+Alt+↑ ⇧ Shift+Alt+↑ 선택한 줄들을 복제하고 위쪽 복제본을 선택합니다. ⇧ Shift+Alt+↓ ⇧ Shift+Alt+↓ 선택한 줄들을 복제하고 아래쪽 복제본을 선택합니다. Escape Escape 선택된 여러 범위 중 하나만 남기거나, 하나의 범위만 선택된 경우 커서만 남깁니다. 텍스트 양식 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 직사각형으로 선택합니다.

기능

For technical reasons, some features are unavailable in the 2017 editor.

CodeMirror 환경 설정

미디어위키 버전:

≥ 1.44

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

Some preferences are only available in the "full" preferences dialog. This is accessible by clicking on 전체 설정 link in the preferences panel, or directly by pressing Alt+⇧ Shift+,.

Editing MediaWiki 위키텍스트 often has different needs than editing proper "code" such as JavaScript or Lua. For this reason, preferences are stored separately for wikitext and non-wikitext, allowing you to customize the two experiences differently.

As of MediaWiki 1.46, all CodeMirror preferences are stored globally if Extension:GlobalPreferences is installed.

괄호 맞추기

괄호 맞추기

When the cursor lies directly next to a bracket or inside a bracket pair, the feature highlights the corresponding matching bracket. Depending on the language, bracket matching may also work for other syntax structures, such as HTML tags.

Double-clicking next to a bracket will select all the text between it. Triple-clicking will select the entire block of code encompassing the matching brackets.

Auto-close brackets and tags

미디어위키 버전:

≥ 1.46

In addition to simply highlighting matching brackets and tags, they can be inserted automatically as you type a new pair of brackets or tags.

Take for example ‎<translate>...‎</translate> tags which must always have a start and end closing tag. With the HTML 태그 자동 닫기 기능 활성화 preference, you only have to type the starting <translate and when typing >, the matching ‎</translate> is automatically inserted.

If you're also using the 자동 완성 활성화 feature, then you likely only need to type as little as <tra to select the tag then autocomplete.

Code folding

Code folding on w:Barack Obama.

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.

Keyboard shortcuts

Shortcut	Shortcut (macOS)	Description
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:

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

Autocompletion

미디어위키 버전:

≥ 1.44

Example showing autocompletion of parser functions.

This feature provides autocompletion when typing internal links , 특수 명령 , parser extension tags , and URL protocols. For example, 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 also works for templates, internal links, and file links.

Linting

같이 보기: Help:Extension:CodeMirror/WikiLint

미디어위키 버전:

≥ 1.45

Example showing the linter in wikitext

CodeMirror includes a linter. This performs static code analysis in real time, surfacing errors or other potential problems with your code without you having to save. This works for all languages supported by CodeMirror, including wikitext.

Linting is available as the 린트 오류 표시 option in your CodeMirror preferences. When enabled, you will see a status bar at the bottom of the editor listing the number of errors, warnings, and informational diagnostics. Issues are underlined in the source text. Hovering over them or moving the cursor to the issues will reveal more information, and in some cases the linter may offer a button to quickly fix the issue. On the opposite side of the status bar, you are shown the numbers for the current line number, character, and selection length.

See Help:Extension:CodeMirror/WikiLint for the list of the available lint rules for wikitext. In addition, linting is also provided by for a number of other modes:

Available linters

Mode	Name	Method
mediawiki	WikiLint	In-browser
mediawiki	파르소이드	API
javascript	ESLint	In-browser
javascript	Peast	API
css	Stylelint	In-browser
css	css-sanitizer	API
json	Custom JSON linter	In-browser
lua	Luacheck	In-browser
abusefilter	확장기능:편집필터	API

Note that while the linters are useful tools to assist with fixing various issues, they are not an authority and may have stylistic opinions not shared by all editors.

Opening links in wikitext

미디어위키 버전:

≥ 1.44

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

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.

Line numbers will take into account any hidden lines, such as those through code folding.

Highlight the active line

미디어위키 버전:

≥ 1.44

In your CodeMirror preferences, you can select 활성화된 줄 강조 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

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.

Highlight references

The "<ref> 태그의 내용물을 강조" preference will make all contents within ‎<ref>...‎</ref> tags be highlighted with a pale green background color. This helps differentiate reference content from prose.

In addition, the "모든 <ref> 태그를 기본으로 접기" preference will make all ‎<ref>...‎</ref> tags folded when first starting an editing session. Note this feature can be potentially slow, as it needs to scan the entire document. The slowness will only occur once when initially opening the editor.

Highlight special characters

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.

Highlight whitespace

Enabling "공백 강조" will highlight the whitespace characters with a gray dot, or a wide arrow for the tab character.

The "후행 공백 강조" setting will highlight spaces, tabs and other invisible characters at the end of a sentence.

Colorblind mode

같이 보기: meta:WMDE Technical Wishes/Improved Color Scheme of Syntax Highlighting

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 ⧼codemirror-prefs-colorblind⧽ 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.

FAQ

Why doesn't the browser search work?

 주의:

As with all syntax highlighters, very large pages cannot be highlighted all at once without serious performance issues. For this reason, focus needs to be in the CodeMirror editor in order for searching to work, since the whole document isn't highlighted and so it is not visible to the browser's native search feature.

Here are some tips to help with searching:

• By default, the focus should be placed on the editor on page load, including after previewing. You may need to wait a second or two for CodeMirror to load first.
• When focus is on the CodeMirror search, you can force use of the browser search by pressing Ctrl+F again.
  • In other words, when focus is in the editor, you can hold Ctrl and press F twice to use the browser search instead of CodeMirror's.
• You can use access keys to put focus on the editor, using Alt+⇧ Shift+, or Alt+, (or Ctrl+⌥ Option+, on MacOS), depending on what browser your using.
• If your issue is mainly while previewing, you may benefit from enabling the "페이지를 다시 불러오지 않고 미리 보기 표시" preference, which speeds up previewing. The CodeMirror autofocus preference is also respected.
  • In addition, you may enjoy the realtime preview feature, which will continually show a preview while retaining focus on the editor.

Why are some features missing in the 2017 wikitext editor?

파브리케이터에서 추적됨
일감 T432558

Due to various technical conflicts, CodeMirror support in the 2017 위키텍스트 편집기 is limited.

Features such as code folding that change the appearance of the wikitext cannot feasibly be supported in the 2017 editor, because the 2017 editor needs focus on its editor for users to be able to use its toolbar and other contextual tools. Similarly, CodeMirror needs focus on its editor for its features to work.

To get around this, the CodeMirror editor is overlaid on top of the 2017 editor, with both editors running in parallel. For this reason the two editors need to visually match each other exactly, so only features that involve basic color changes such as the highlighting of references can be supported.

The 2017 editor also requires the viewport to be the full length of the document. This can cause significant performance issues, since CodeMirror has to highlight the entire document instead of only what is currently visible to the user. As a temporary solution, CodeMirror is automatically disabled on very large pages in order to prevent browser crashes and other performance problems that could hinder the editing experience.

Long-term, the hope is to rework the 2017 editor to be more compatible with CodeMirror.

How can I disable syntax highlighting entirely?

You can enable or disable all CodeMirror features including highlighting in your editing preferences (or in your global preferences). You have the option to enable CodeMirror only for wikitext, or only code (such as JavaScript and CSS pages), or both.

Note that using the " 문법" button in WikiEditor (the 2010 editor) will toggle these same preferences.

How can I customize the colors?

See Help:Extension:CodeMirror/Color and style customization .

Notes