Jump to content

Community Wishlist Survey 2016/CodeMirror/nl

From Meta, a Wikimedia project coordination wiki
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

Het CodeMirror project (ook bekend als wikitext editor syntax highlighting) heeft als doel om het voor bijdragers gemakkelijker te maken om wikitext te bewerken door kleuren en schaduwen te gebruiken om artikeltekst visueel te scheiden van de code voor links, referenties en sjablonen. Dit zal redacteuren helpen die werken aan alinea's met veel referenties of gecompliceerde sjablonen waarbij het gemakkelijk is om een accolade te missen en het sjabloon te verknoeien. We gebruiken hiervoor Extensie CodeMirror.

Schermafdruk van syntaxismarkering in het Engels. Schermafdruk van syntaxismarkering in het Hindi. Schermafdruk van syntaxismarkering met de pop-up voor nieuwe gebruikers.

De syntaxis-highlighting is beschikbaar in de klassieke wikitext-editor als een knop () die in de werkbalk van de hulpmiddelen verschijnt. Het is ook beschikbaar in de Wikitext-editor van 2017 als een optie die verschijnt in het dropdown menu "burger menu icon". De gebruiker kan dit markeren met die knop aan en uitzetten. Dit gebeurt via een verborgen voorkeur, dus als u het uitzet dan blijft het uit, totdat u het weer aanzet. Na het activeren is het highlighten uitgeschakeld, dus moet u het handmatig aanzetten om het te laten werken.

De functie is voornamelijk gebouwd door vrijwilliger Pastakhov; Community Tech hielp hem om de functie af te maken en te implementeren. Aan de kant van de Community Tech hebben Niharika en Ryan het grootste deel van het werk gedaan, met hulp van het Ed Sanders van het Editing-team over integratie met de wikitekstmodus van de VisualEditor.

Vanaf september 2023 werkt Community Tech aan een upgrade naar CodeMirror 6, wat grote verbeteringen zal opleveren zoals RTL-ondersteuning, verbeterde prestaties, toegankelijkheid en mobiele ondersteuning.

Motivering

We hebben besloten om Extensie CodeMirror te gebruiken als het hulpmiddel voor het markeren van syntaxis.

De voordelen die CodeMirror biedt:

  • Veel snellere prestaties, het is sterk geoptimaliseerd
  • Maakt gebruik van "wysiwyg"-achtige effecten, om het gemakkelijker te maken om de impact van de wikitext-elementen te zien -- bijvoorbeeld, vetgedrukte woorden worden vetgedrukt weergegeven, cursief cursief.
  • Sectiekoppen zijn groter, wat de editor helpt bij het navigeren op het scherm.
  • Links zijn onderstreept en blauw, waardoor ze beter herkenbaar zijn als links. Als er displaytext is die afwijkt van de link, is de link blauw en is de displaytext na het scheidingsteken zwart, om aan te geven dat dit het deel is dat als tekst wordt gezien.
  • Gebruikt vetgedrukte tekst voor sjabloonparameters, lichtgekleurde tekst voor inzendingen.
  • Gebruikt lichte achtergrondmarkering op links en niet op andere elementen. Te veel achtergrondmarkering kan het scannen van de wikitext bemoeilijken.
  • Wacht tot de editor klaar is met typen voordat de markeringskleuren worden gewijzigd, zodat de editor de link of de vet/cursieve tekst kan typen zonder alles onder die lijn als verschillende kleuren te laten knipperen.

De andere hulpmiddellen waar we naar keken voordat we voor CodeMirror kozen, waren wikEd van Cacycle, en Syntax highlighter van mw:User:Remember the dot/Syntax highlighter 2.

Statuswijzigingen

26 maart 2024

CodeMirror 6 is nu geïmplementeerd naar Test Wikipedia. We nodigen gebruikers uit om het uit te proberen en feedback te geven. Het zal de komende weken langzaam op meer wiki's worden uitgerold.

13 september 2023

Community Tech werkt aan de upgrade van de extensie om de nieuwste versie van de CodeMirror bibliotheek te gebruiken. Dit belooft veel verbeteringen zoals RTL-ondersteuning, verbeterde prestaties, toegankelijkheid en mobiele ondersteuning.

9 maart 2022

Het matchen van haakjes en verbeterde syntaxismarkeringskleuren zullen op alle wiki's worden geïmplementeerd (behalve de Engelstalige Wikipedia (16 maart)). (meer informatie)

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 mei 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 maart 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 augustus 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 augustus 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 maart 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 maart 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 februari 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?

Kleur en stijl aanpassen

Dit is een gedeeltelijke lijst van de CodeMirror CSS-classes. De volledige lijst met standaard CodeMirror-stijldefinities staat op Phabricator

De kleuren en stijlen kunnen worden overschreven door uw eigen kleuren en stijlen voor de classes in de onderstaande tabel op uw common.css pagina (User:Example/common.css) te definiëren.

Als u niet bekend bent met het bewerken van CSS, zie dan hieronder de sectie voor beginners.

U kunt het uiterlijk van het CodeMirror-bewerkingsvenster als geheel bepalen met behulp van de .CodeMirror-lines CSS class. Gebruik dit op eigen risico. Sommige dingen, zoals het wijzigen van de regelhoogte, werken niet in de 2017 wikitext editor. Houd er ook rekening mee dat regels die zijn toegevoegd voor een van de onderstaande CSS-classes voorrang hebben.

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 & & & &
.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 <poem style="padding: 1em;">string
whole 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) -

Hoe het te doen voor degenen die weinig verstand hebben van CSS

  • Open de pagina [[Special:MyPage/common.css]] op de wiki waar u dit wilt toepassen (gebruik m:Special:MyPage/global.css voor alle wiki's samen).
  • Een voorbeeld wordt getoond voor lijsten (* en #). Voeg onderaan een regel
    .cm-mw-list {background-color: green; color: red;}
    
    toe (de cm-mw-lijst komt van de tweede tabelregel in de tabel hierboven). Opslaan . Open een gemarkeerde bewerkingspagina en probeer de lijsten uit - * en #. Groen en rood kunnen worden vervangen door de kleuren die u verkiest, bijvoorbeeld rgb #123456.
  • Sla het op en test door een bewerkingsvenster te bekijken op dezelfde wiki waar een lijst is, zodat u kunt zien of het werkt zoals verwacht. (de achtergrond van het symbool moet groen zijn en het symbool rood).
  • Bewerk uw common.css om de kleuren te veranderen naar wat u wilt, sla het weer op.
  • Doe hetzelfde voor alle gewenste wijzigingen, met behulp van de code van de eerste kolom van de tabel en de kleuren van uw keuze.
  • Als u af en toe voor speciale doeleinden naar een andere set kleuren moet veranderen, kunt u de ene set css-code uitvoeren met behulp van gewone /* ... */ block-commentaren en een andere set toevoegen. Om terug te veranderen, schakel de commentaarcode van de ene set naar de andere. Dit is een beetje pijnlijk, maar beter dan geen keuze te hebben.
  • Als u een bepaald kleurschema op veel wiki's en een andere op één of twee wiki's wilt, gebruik dan het lokale bestand zoals er op deze pagina wordt uitgelegd - het zal de globale css dan overschrijven.