Community Tech/Підсвічування синтаксису редактора вікітексту
Можливість було перш за все побудовано волонтером-розробником Pastakhov; Community Tech допомогли йому завершити можливість, і отримати його розгорнутим. З боку Community Tech, Niharika та Ryan зробили основну частину роботи, за допомогою команди редагування Ed Sanders, з інтеграції з режимом вікітексту Візуального редактора.
CodeMirror  | |
|---|---|
| Syntax highlighting for wikitext editor | |
| Група: | Community Tech |
| Члени команди: | Joydeep Sengupta, Dayllan Maza, Harumi Monroy, MusikAnimal, Sam Wilson, Karolin Siebert, Sandister Tei, Sammy Tarling |
| Лідер: | MusikAnimal |
| Оновлення: | Updates |
Проект підсвічування синтаксису редактора вікітексту спрямований на спрощення для користувачів редагування вікітексту шляхом використання кольорів і тіней для спрощення візуального відокремлення тексту статей від коду посилань, приміток і шаблонів. Це допоможе редакторам, які працюють над абзацами з багатьма примітками, чи складними шаблонами, де легко проґавити фігурну дужку та зіпсувати шаблон. Ви використовуємо Extension:CodeMirror для цього.
Підсвічування синтаксису доступне як у класичному, так і в новому редакторах вікітексту у вигляді кнопки (
), що з'являється в панелі засобів. Користувач може вмикати та вимикати підсвічування, використовуючи цю кнопку.
Це робиться за допомогою прихованого налаштування, тому, якщо ви вимкнули його, воно залишатиметься вимкненим, доки ви не увімкнене його знову.
As of September 2023, Community Tech is working on upgrading to CodeMirror 6, which will bring great enhancements such as RTL support, improved performance, accessiblity, and mobile support.
Обґрунтування
Ми вирішили використати Extension:CodeMirror як засіб підсвічування синтаксису.
Ось переваги, які пропонує CodeMirror:
- Набагато швидша продуктивність, його було сильно оптимізовано
- Використовує ефекти у стилі «wysiwyg», щоб легше побачити вплив елементів вікітексту — наприклад, жирні слова промалюьовуються жирним, курсив — курсивом.
- Заголовки розділів більші, що допомагає редакторам переміщатися по екрану.
- Посилання підкреслені та сині, що робить їх more recognizable як посилання. Коли displaytext відрізняється від посилання, посилання синє, а displaytext після прямої риски чорний, для позначення тієї частини, що показуватиметься як текст.
- Використовує жирний текст для параметрів шаблону, світлий текст для записів.
- Використовує підсвічування світлим тлом на посилання, а не на інші елементи. Забагато підсвічування тлом може ускладнити сканування вікітексту.
- Очікує завершення набору тексту редактором до того, як почне підсвічувати кольорами зміни, щоби дозволити редакторові завершити введення посилання чи жирного/курсивного тексту без без миготіння всього нижче цього рядка різними кольорами.
Іншими засобами, які ми подивилися до рішення на користь CodeMirror, були wikEd від Cacycle та підсвічувальник синтаксису від Remember the dot.
Status Updates
26 березня 2024
CodeMirror 6 is now deployed to Test Wikipedia. We invite users to try it out and provide feedback. It will be slowly deployed to more wikis in the coming weeks.
13 вересня 2023
Community Tech is working on upgrading the extension to use the latest version of the CodeMirror library. This promises to bring many enhancements such as RTL support, improved performance, accessibility, and mobile support.
9 березня 2022
Bracket matching and improved syntax highlighting colors will be implemented on all wikis (except English Wikipedia (March 16)). (more information)
14 червня 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 травня 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 квітня 2018
Syntax highlighting will be available without a beta feature for 2017 Wikitext Editor on all Wikimedia projects (LTR and RTL) this week.
26 квітня 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 березня 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 вересня 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 вересня 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 серпня 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 серпня 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 липня 2017
CodeMirror deployed to Simple English Wikipedia as a Beta Feature.
22 березня 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 березня 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 лютого 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?
Важливі посилання
Налаштування кольору та стилю
Кольори та стилі можуть перекриватися визначення ваших власних кольорів і стилів для класів у таблиці нижче на вашій сторінці common.css (User:Example/common.css).
Якщо ви незнайомі з редагуванням CSS, див. розділ для початківців нижче.
You can control the appearance of the CodeMirror editing window as a whole using the .CodeMirror-lines CSS class. Use this at your own risk. Some things like changing the line-height will not work in the 2017 wikitext editor. Also be aware that rules added for any of the below CSS classes will have precedence.
| 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 |
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> |
|||
| 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" | |
| .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 іде з другого рядка таблиці в таблиці вище). Збережіть. Відкрийте деяку підсвічену сторінку редагування та спробуйте списки — * і #. Зелений і червоний можуть підставлятися кольорами, яким ви віддаєте перевагу, наприклад rgb #123456..cm-mw-list {background-color: green; color: red;}
- Збережіть і перевірте переглядом вікна редагування на тій самій вікі, де є список, так що ви можете бачити, чи працює це як очікується (тло символу повинно бути зеленим, а символ — червоним).
- Редагуйте свій common.css для зміни кольорів на ті, яким ви віддаєте перевагу, та збережіть знову.
- Зробіть те саме для всіх бажаних змін, використовуючи код із першої колонки таблиці та відповідні кольори вашого вибору.
- Якщо вам час від часу потрібно змінювати на різний набір кольорів з особливою метою, ви можете закоментувати один набір коду css, використовуючи звичайні блокові коментарі /* ... */, та додати інший набір. Для зміни назад, змініть закоментований код з одного набору на інший. Це трохи боляче, але краще, ніж не мати вибору.
- Якщо ви віддаєте перевагу деякій кольоровій схемі на багатьох вікі й іншій — на одній або двох, використайте локальний файл як пояснено на них — це перекриє глобальний.