Community-Wunschliste Umfrage 2016/CodeMirror

CodeMirror
CodeMirror
	Syntaxhervorhebung für Wikitext-Editor
Group:	Community Tech
Team members:	Joydeep Sengupta, Dayllan Maza, Harumi Monroy, MusikAnimal, Sam Wilson, Karolin Siebert, Sandister Tei, Sammy Tarling
Lead:	MusikAnimal
Updates:	Updates

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

Das CodeMirror Projekt (auch bekannt als wikitext editor syntax highlighting) zielt darauf ab, die Bearbeitung von wikitext zu erleichtern, indem Farben und Schattierungen verwendet werden, um den Artikeltext visuell vom Code für Links, Referenzen und Vorlagen zu trennen. Dies wird Redakteuren helfen, die an Absätzen mit vielen Verweisen oder komplizierten Vorlagen arbeiten, bei denen man leicht eine geschweifte Klammer übersehen und die Vorlage versauen kann. Wir verwenden dafür Erweiterung:CodeMirror.

Die Syntaxhervorhebung ist im klassischen Wikitext-Editor als Schaltfläche () verfügbar, die in der Symbolleiste erscheint. Sie ist auch im Wikitext-Editor 2017 als Option verfügbar, die im Dropdown-Menü "Burger-Menüsymbol" erscheint. Der Benutzer kann die Hervorhebung über diese Schaltfläche ein- und ausschalten. Dies geschieht über eine versteckte Einstellung, d.h. wenn man sie ausschaltet, bleibt sie ausgeschaltet, bis man sie wieder einschaltet. Nach der allerersten Aktivierung ist die Hervorhebung ausgeschaltet, so dass sie manuell eingeschaltet werden muss, damit sie funktioniert.

Die Funktion wurde in erster Linie von dem freiwilligen Entwickler Pastakhov entwickelt; Community Tech hat ihm geholfen, die Funktion fertig zu stellen und zu implementieren. Auf Seiten der Community Tech haben Niharika und Ryan den Großteil der Arbeit geleistet, mit Hilfe von Ed Sanders aus dem Editing-Team bei der Integration in den Wikitext-Modus des Visual Editors.

Ab September 2023 arbeitet Community Tech an einem Upgrade auf CodeMirror 6, das große Verbesserungen wie RTL-Unterstützung, verbesserte Leistung, Zugänglichkeit und mobile Unterstützung bringen wird.

Begründung

Wir haben uns für Erweiterung:CodeMirror als Werkzeug zur Syntaxhervorhebung entschieden.

Hier sind die Vorteile, die CodeMirror bietet:

Viel schnellere Leistung, stark optimiert
Verwendet "wysiwyg"-ähnliche Effekte, um die Wirkung der Wikitext-Elemente besser zu erkennen -- zum Beispiel werden fette Wörter fett und kursive Wörter kursiv dargestellt.
Die Überschriften der Abschnitte sind größer, was dem Redakteur die Navigation auf dem Bildschirm erleichtert.
Links sind unterstrichen und blau, wodurch sie besser als Links erkennbar sind. Wenn es einen Anzeigetext gibt, der sich vom Link unterscheidet, ist der Link blau und der Anzeigetext nach der Pipe ist schwarz, um anzuzeigen, dass dies der Teil ist, der als Text gesehen wird.
Verwendet fettgedruckten Text für Vorlagenparameter, hellen Text für Einträge.
Verwendet eine helle Hintergrundhervorhebung für Links und nicht für andere Elemente. Zu viel Hintergrundhervorhebung kann die Lesbarkeit des Wikitextes erschweren.
Wartet, bis der Redakteur seine Eingabe beendet hat, bevor er die Farbe der Hervorhebung ändert, damit der Redakteur den Link oder die Fett-/Kursivschrift zu Ende tippen kann, ohne dass alles unter dieser Zeile in verschiedenen Farben aufleuchtet.

Die anderen Tools, die wir uns angesehen haben, bevor wir uns für CodeMirror entschieden, waren wikEd von Cacycle und Syntax highlighter von Remember the dot.

Status-Updates

26. März 2024

CodeMirror 6 ist jetzt Einsatz für Test Wikipedia. Wir laden die Benutzer ein, es auszuprobieren und Feedback zu geben. Es wird in den kommenden Wochen langsam auf weitere Wikis übertragen.

13. September 2023

Tracked in Phabricator:
Task T317243

Community Tech arbeitet an der Aktualisierung der Erweiterung, um die neueste Version der CodeMirror-Bibliothek zu verwenden. Das verspricht viele Verbesserungen wie RTL-Unterstützung, verbesserte Leistung, Barrierefreiheit und mobile Unterstützung.

9. März 2022

Klammerabgleich und verbesserte Syntaxhervorhebungsfarben werden in allen Wikis implementiert (außer der englischen Wikipedia (16. März)). (mehr Informationen)

14. Juni 2018

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.

30. Mai 2018

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.

30. April 2018

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

26. April 2018

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.

7. März 2018

"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.

19. September 2017

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.

7. September 2017

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.

23. August 2017

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."

2. August 2017

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.

18. Juli 2017

CodeMirror deployed to Simple English Wikipedia as a Beta Feature.

22. März 2017

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.

21. März 2017

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.

27. Februar 2017

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?

Wichtige Links

Farb- und Stilanpassung

Template:Hinweis

Die Farben und Stile können überschrieben werden, indem eigene Farben und Stile für die Klassen in der Tabelle unten auf der Seite common.css (Benutzer:Beispiel/common.css) definiert werden.

Wenn du mit der Bearbeitung von CSS nicht vertraut bist, schau dir den Abschnitt für Anfänger unten an.

Das Aussehen des CodeMirror-Bearbeitungsfensters als Ganzes können Sie mit der CSS-Klasse .CodeMirror-lines steuern. Nutzung auf eigene Gefahr. Eine Sachen, wie zum Beispiel das Ändern der line-height funktionieren nicht im 2017 Wikitext-Editor. Bedenke auch, dass Regeln, die für eine der unten aufgeführten CSS-Klassen hinzugefügt werden, Vorrang haben.

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)

- – — −

Anleitung für diejenigen, die nur wenig Ahnung von CSS haben

Öffne die Seite [[Special:MyPage/common.css]] in dem Wiki, in dem die Änderung gelten soll (verwende stattdessen m:Special:MyPage/global.css für alle Wikis zusammen).

Ein Beispiel wird für Listen (* und #) gezeigt. Füge unten eine Zeile
```
.cm-mw-list {background-color: green; color: red;}
```
ein (die cm-mw-Liste stammt aus der zweiten Tabellenzeile in der Tabelle oben). Speichere. Öffne eine hervorgehobene Bearbeitungsseite und probiere die Listen - * und #. Grün und Rot können durch die von Ihnen bevorzugten Farben ersetzt werden, zum Beispiel rgb #123456.
Speichere und teste, indem du ein Bearbeitungsfenster im selben Wiki anschaust, in dem sich eine Liste befindet, damit du sehen kannst, ob es wie erwartet funktioniert. (Der Hintergrund des Symbols sollte grün und das Symbol rot sein).
Bearbeite deine common.css, um die [1] in das von dir bevorzugte Format zu ändern, und speichere erneut.
Wiederhole diese Schritte für alle gewünschten Änderungen, indem du den Code aus der ersten Spalte der Tabelle und die entsprechenden Farben deiner Wahl verwendest.
Wenn du gelegentlich zu einem anderen Satz von Farben für spezielle Zwecke wechseln musst, kannst du den einen Satz von CSS-Code mit normalen /* ... */-Blockkommentaren auskommentieren und einen anderen Satz hinzufügen. Um zurück zu wechseln, tausche den Kommentarcode von dem einen Satz gegen den anderen aus. Das ist zwar etwas mühsam, aber besser als gar keine Wahl zu haben.
Wenn du ein bestimmtes Farbschema für viele Wikis und ein anderes für ein oder zwei Wikis bevorzugst, verwende die lokale Datei wie beschrieben – sie wird das globale Schema überschreiben.