커뮤니티 위시리스트 설문조사 2016/CodeMirror

코드미러
코드미러
	위키텍스트 편집기의 구문 강조
그룹:	커뮤니티 기술
팀원:	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.

Tracked in Phabricator:
Task T259059

Tracked in Phabricator:
Task T101246 resolved

CodeMirror 프로젝트(위키텍스트 편집기 구문 강조라고도 함)는 기여자가 링크와 참조 및 틀에 대한 코드에서 문서 텍스트를 시각적으로 쉽게 분리 할 수 있도록 색상과 음영을 사용하여 위키텍스트를 편집하는 것을 더 쉽게 만드는 것을 목표로합니다. 이렇게하면 참조가 많은 단락이나 중괄호를 놓치고 틀을 엉망으로 만들기 쉬운 복잡한 틀을 편집하는 편집자가 도움이 됩니다. 이를 위해 Extension:CodeMirror를 사용하고 있습니다

구문 강조는 도구 모음에 나타나는 버튼 ()으로 클래식 위키텍스트 편집기에서 사용할 수 있습니다. 2017년 위키텍스트 편집기에서도 "버거 메뉴 아이콘" 드롭 다운 메뉴에 나타나는 옵션으로 사용할 수 있습니다. 사용자는 해당 버튼을 사용하여 강조 표시를 켜고 끌 수 있습니다. 이 작업은 숨겨진 기본 설정을 통해 수행되므로 이 기능을 끄면 다시 켤 때까지 꺼진 상태로 유지됩니다. 처음 활성화 한 후에는 강조 표시가 꺼짐으로 설정되므로 작동하려면 수동으로 켜야합니다.

이 기능은 주로 자원 개발자 Pastakhov가 구축했습니다. 커뮤니티 기술은 그가 기능을 완성하고 배포하는 데 도움을주었습니다. 커뮤니티 기술측에서는 Niharika와 Ryan이 시각편집기의 위키텍스트 모드와의 통합에 대한 편집 팀의 Ed Sanders의 도움을 받아 대부분의 작업을 수행했습니다.

2023년 9월 현재 커뮤니티 기술은 CodeMirror 6으로 업그레이드하기 위해 노력하고 있습니다. 이를 통해 RTL 지원, 향상된 성능, 접근성, 모바일 지원 등 크게 향상된 기능을 제공할 것입니다.

원리

구문 강조 도구로 Extension:CodeMirror를 사용하기로 결정했습니다.

코드 미러가 제공하는 이점은 다음과 같습니다:

훨씬 빠른 성능, 고도로 최적화되었습니다.
"위지위그" 스타일 효과를 사용하여 위키텍스트 요소의 영향을 보다 쉽게 확인할 수 있습니다. 예를 들어 굵은 단어는 굵게, 기울임 꼴은 기울임 꼴로 렌더링합니다.
섹션 제목이 더 커져 편집자가 화면을 탐색하는 데 도움이 됩니다.
링크는 밑줄과 파란색으로 표시되어 링크로 더 쉽게 알아볼 수 있습니다. 링크와 다른 표시 텍스트가 있는 경우 링크는 파란색으로 표시되고 파이프 뒤의 표시 텍스트는 검은 색으로 표시되어 해당 부분이 텍스트로 표시됨을 나타냅니다.
틀 매개 변수에는 굵은 색상의 텍스트를 사용하고 항목에는 밝은 색상의 텍스트를 사용합니다.
다른 요소가 아닌 링크에 밝은 배경 강조 표시를 사용합니다. 배경 강조가 너무 많으면 위키텍스트를 스캔하기가 더 어려워 질 수 있습니다.
강조 표시 색상이 변경되기 전에 편집기가 입력을 완료 할 때까지 기다립니다. 그러면 해당 줄 아래의 모든 내용이 다른 색상으로 깜박이지 않고 링크 또는 굵게/기울임 꼴 입력이 완료됩니다.

코드 미러를 결정하기 전에 살펴본 다른 도구는 Cacycle의 wikEd와 Remember the dot의 구문 강조기입니다.

상태 업데이트

2024년 3월 26일

CodeMirror 6은 이제 테스트 위키백과에 배포되었습니다. 사용자가 직접 사용해 보고 피드백을 제공하도록 초대합니다. 앞으로 몇 주 안에 더 많은 위키에 천천히 배포될 예정입니다.

2023년 9월 13일

Tracked in Phabricator:
Task T317243

커뮤니티 기술은 최신 버전의 CodeMirror 라이브러리를 사용하도록 확장 기능을 업그레이드하는 작업을 진행하고 있습니다. 이는 RTL 지원, 향상된 성능, 접근성 및 모바일 지원과 같은 많은 개선 사항을 가져올 것을 약속합니다.

2022년 3월 9일

대괄호 일치 및 향상된 구문 강조 색상이 모든 위키에서 구현됩니다(영어 위키백과(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:Example/common.css)의 아래 표에서 클래스에 대한 고유한 색상과 스타일을 정의하여 색상과 스타일을 재정의할 수 있습니다.

CSS 편집에 익숙하지 않은 경우 아래의 초보자를 위한 섹션을 참조하세요.

.CodeMirror-lines CSS 클래스를 사용하여 코드미러 편집 창의 전체 모양을 제어할 수 있습니다. 자신의 책임하에 이것을 사용하세요.line-height 변경과 같은 일부 기능은 2017년 위키텍스트 편집기에서 작동하지 않습니다. 또한 아래 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.)

 (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 코드를 주석 처리하고 다른 세트를 추가 할 수 있습니다. 다시 변경하려면 주석 코드를 한 세트에서 다른 세트로 전환하세요. 이것은 약간의 고통이지만 선택권이 없는 것보다 낫습니다.
많은 위키에서 일부 색 구성표를 선호하고 하나 또는 두 개에서 다른 색 구성표를 선호하는 경우 설명 된대로 로컬 파일을 사용하세요. 전역 파일보다 우선합니다.