Page MenuHomePhabricator
Create Task
Maniphest T163533

Add different color themes of syntax highlighting
Open, In Progress, MediumPublic
Actions

Description

Different page types (for example articles in main namespace and templates, or pages in different content models) have different concentration of different markup elements and it is not trivial task to color all wikitext markup elements since the combination of colors is much less than the combination of wikitext markup elements. Also tastes of editors likely different.

The availability of using different color themes in CodeMirror should help in this case.

Kinds of color themes for wikitext:

  • Light color theme for articles in main namespace (used by default)
  • Theme(s) for people who are color-blind
  • No syntax highlighting at all (T419339)
  • Same vendor themes provided in non-wikitext

Kinds of color themes for codes:

Details

Related Changes in Gerrit:
SubjectAuthorRepoBranchLines +/-
Rework mediawiki tags and CSS to be better suited for themesMusikAnimalmediawiki/extensions/CodeMirrormaster+235 -202
CodeMirrorThemes: extract mediawiki theme colors to a shared less fileDLynchmediawiki/extensions/CodeMirrormaster+46 -34
CodeMirrorThemes: add themes to preferences in a new Appearance sectionMusikAnimalmediawiki/extensions/CodeMirrormaster+4 K -375
CodeMirrorPreferences: add support for form specifiersMusikAnimalmediawiki/extensions/CodeMirrormaster+48 -14
Customize query in gerrit

Related Objects
Search...

Event Timeline

Pastakhov created this task.Apr 21 2017, 6:36 AM
Restricted Application added a subscriber: Aklapper. · View Herald TranscriptApr 21 2017, 6:36 AM
Pastakhov mentioned this in T163238: Integration of CodeMirror with other tag extensions.Apr 21 2017, 6:57 AM
Pastakhov mentioned this in T161694: Syntax highlighting: make <ref> tags and <nowiki> tags green.Apr 23 2017, 7:53 AM
Pastakhov mentioned this in T163919: Design review for CodeMirror extension.May 11 2017, 5:35 PM
Dvorapa awarded a token.Aug 29 2017, 7:13 PM
Dvorapa subscribed.
• Niharika triaged this task as Lowest priority.Nov 7 2017, 11:54 PM
Restricted Application added a project: Community-Tech. · View Herald TranscriptNov 7 2017, 11:54 PM
• TBolliger moved this task from New & TBD Tickets to In Sprint 🏃‍♀️🏃‍♂️ on the Community-Tech board.Feb 6 2018, 10:55 PM
• Niharika removed a project: Community-Tech.Mar 2 2018, 7:03 AM
TheDJ moved this task from Backlog to Feature requests on the MediaWiki-extensions-CodeMirror board.Mar 20 2019, 10:36 AM
ECohen_WMDE mentioned this in T292968: Color improvements: alternative/optional color scheme for colorblindness.Jan 5 2022, 2:59 PM
MusikAnimal mentioned this in T259059: Upgrade to CodeMirror 6.Oct 19 2023, 12:14 AM
MusikAnimal mentioned this in T359498: Add preferences panel to CodeMirror 6.Mar 7 2024, 2:20 AM
MusikAnimal mentioned this in T286270: CodeMirror does not set a default for "usecodemirror" preference, causing user_properties bloat.Nov 13 2024, 7:52 AM
MusikAnimal mentioned this in T400015: Add CodeMirror integration in WikiLambda as an alternative to CodeEditor.Jul 25 2025, 6:45 PM
MusikAnimal mentioned this in T373711: Add support for Scribunto, JavaScript, CSS, JSON and Vue to CodeMirror 6.Dec 5 2025, 8:17 PM
Mr._Starfleet_Command subscribed.Dec 7 2025, 6:51 AM
Mr._Starfleet_Command awarded a token.Dec 13 2025, 10:11 PM
MusikAnimal mentioned this in T418352: Syntax highlight should not be in sync between wikitext and non-wikitext pages.Mar 4 2026, 9:58 AM
MusikAnimal raised the priority of this task from Lowest to Medium.Mar 4 2026, 8:39 PM
Hakimi97 awarded a token.Mar 8 2026, 6:41 AM
MusikAnimal mentioned this in T420429: Add support for non-boolean CodeMirror preferences.Mar 18 2026, 4:58 AM
MusikAnimal added a subtask: T420429: Add support for non-boolean CodeMirror preferences.
MusikAnimal subscribed.Mar 18 2026, 5:06 AM

When this is tackled (after T420429), we should migrate the codemirror-colorblind user option to the new theme CM preference, and slowly over time the codemirror-colorblind rows will be deleted.

MusikAnimal mentioned this in T357794: Update CodeMirror integrations in preparation for CodeMirror 6 upgrade.Mar 18 2026, 7:41 PM
MusikAnimal mentioned this in T420554: Cosmos skin compatibility with CodeMirror 6.Mar 19 2026, 2:17 AM
Bhsd mentioned this in T419339: Add "no syntax highlighting" as an available theme within CodeMirror.Mar 20 2026, 11:52 AM
MusikAnimal added a parent task: T419339: Add "no syntax highlighting" as an available theme within CodeMirror.Mar 23 2026, 10:14 PM
MusikAnimal updated the task description. (Show Details)Mar 27 2026, 7:56 AM
MusikAnimal changed the status of subtask T420429: Add support for non-boolean CodeMirror preferences from Open to In Progress.Mar 30 2026, 8:50 PM
Titore subscribed.Apr 19 2026, 6:50 PM
MusikAnimal changed the task status from Open to In Progress.Apr 26 2026, 6:43 PM
MusikAnimal claimed this task.

I'm going to add this as part of T420429: Add support for non-boolean CodeMirror preferences.

For the initial implementation, we will have just three themes:

  • Default
  • No highlighting (T419339)
  • Colorblind (for wikitext-only; moves the existing "colorblind-friendly" preference to be a theme)

Under the hood, I'm trying abstract things and make it easy to add new non-boolean preferences. I'll do this with a system called a "form specifier" which is similar to how HTMLForm works in PHP.

gerritbot added a comment.Apr 28 2026, 12:52 AM

Change #1277806 had a related patch set uploaded (by MusikAnimal; author: MusikAnimal):

[mediawiki/extensions/CodeMirror@master] [WIP] Add themes to preferences, and support for non-boolean prefs

https://gerrit.wikimedia.org/r/1277806

gerritbot added a project: Patch-For-Review.Apr 28 2026, 12:52 AM
MusikAnimal closed subtask T420429: Add support for non-boolean CodeMirror preferences as Resolved.Apr 29 2026, 3:32 AM
gerritbot added a comment.Jun 1 2026, 12:34 AM

Change #1295787 had a related patch set uploaded (by MusikAnimal; author: MusikAnimal):

[mediawiki/extensions/CodeMirror@master] CodeMirrorPreferences: add support for form specifiers

https://gerrit.wikimedia.org/r/1295787

gerritbot added a comment.Jun 3 2026, 3:01 AM

Change #1295787 merged by jenkins-bot:

[mediawiki/extensions/CodeMirror@master] CodeMirrorPreferences: add support for form specifiers

https://gerrit.wikimedia.org/r/1295787

gerritbot added a comment.Jun 4 2026, 6:11 PM

Change #1297761 had a related patch set uploaded (by MusikAnimal; author: MusikAnimal):

[mediawiki/extensions/CodeMirror@master] [POC] Rework mediawiki tags to be better suited for themes

https://gerrit.wikimedia.org/r/1297761

MusikAnimal mentioned this in T194095: Deemphasizing formatting tokens.Sat, Jul 18, 6:19 AM
Bhsd subscribed.Sun, Jul 19, 6:52 AM

@MusikAnimal Is this task worth User-notice? We can merge your patch after Monday.

Mr._Starfleet_Command added a comment.Sun, Jul 19, 3:37 PM

I would think so, especially since it involves moving existing functionality (colorblind mode) to a new location. An announcement would help people know what to expect.

gerritbot added a comment.Tue, Jul 21, 4:40 AM

Change #1277806 merged by jenkins-bot:

[mediawiki/extensions/CodeMirror@master] CodeMirrorThemes: add themes to preferences in a new Appearance section

https://gerrit.wikimedia.org/r/1277806

Bhsd added a project: User-notice.Tue, Jul 21, 5:07 AM
Bhsd updated the task description. (Show Details)Tue, Jul 21, 5:12 AM
Bhsd added a comment.Tue, Jul 21, 5:26 AM

A patch that will be deployed next week adds themes to CodeMirror syntax highlighting. The themes can be picked from a dropdown menu in the full CodeMirror preference dialog. For Wikitext, available themes are default, colorblind-friendly (previously the colorblind preference option on Special:Preferences#mw-prefsection-editing) and no-highlight. For code languages (i.e., CSS/JavaScript/JSON/Vue/Lua), there are a few third-party themes available.

STei-WMF subscribed.Thu, Jul 23, 1:58 PM

@Bhsd entry added, please make any changes if needed on the draft meta page: https://meta.wikimedia.org/wiki/Tech/News/2026/31

Bhsd added a comment.Thu, Jul 23, 4:50 PM
In T163533#12150057, @STei-WMF wrote:

@Bhsd entry added, please make any changes if needed on the draft meta page: https://meta.wikimedia.org/wiki/Tech/News/2026/31

@MusikAnimal Could you take a look at the draft?

Escargot_rouge awarded a token.Fri, Jul 24, 5:42 PM
MusikAnimal added a comment.Fri, Jul 24, 7:01 PM

I made some copy edits. Thanks for getting it in Tech News!

gerritbot added a comment.Sat, Jul 25, 5:27 PM

Change #1316992 had a related patch set uploaded (by DLynch; author: DLynch):

[mediawiki/extensions/CodeMirror@master] CodeMirrorThemes: extract mediawiki theme colors to a shared less file

https://gerrit.wikimedia.org/r/1316992

gerritbot added a comment.Sat, Jul 25, 10:28 PM

Change #1316992 had a related patch set uploaded (by DLynch; author: DLynch):

[mediawiki/extensions/CodeMirror@master] CodeMirrorThemes: extract mediawiki theme colors to a shared less file

https://gerrit.wikimedia.org/r/1316992

gerritbot added a comment.Sun, Jul 26, 1:33 AM

Change #1316992 merged by jenkins-bot:

[mediawiki/extensions/CodeMirror@master] CodeMirrorThemes: extract mediawiki theme colors to a shared less file

https://gerrit.wikimedia.org/r/1316992

ReleaseTaggerBot added a project: MW-1.47-notes (1.47.0-wmf.13; 2026-07-28).Sun, Jul 26, 2:00 AM
Hakimi97 subscribed.Sun, Jul 26, 4:12 AM
STei-WMF moved this task from To Triage to Already announced/Archive on the User-notice board.Thu, Jul 30, 5:51 PM
Escargot_rouge subscribed.Fri, Jul 31, 1:06 PM

Thank you for adding themes in CodeMirror.

Would it be possible to add pygment syntax highlighting, or is there some technical difficulty with it? That would allow to have the same syntax highlighting when viewing code and when editing it, as pygment is used by Extension:SyntaxHighlight.

TheDJ subscribed.Fri, Jul 31, 2:00 PM
In T163533#12174386, @Escargot_rouge wrote:

Would it be possible to add pygment syntax highlighting, or is there some technical difficulty with it? That would allow to have the same syntax highlighting when viewing code and when editing it, as pygment is used by Extension:SyntaxHighlight.

These are fundamentally different solutions that don't share the same method of interpreting the code, nor the same color schemes. While something can probably be made that 'somewhat looks the same for some languages' they will never be fully the same.

MusikAnimal updated the task description. (Show Details)Fri, Jul 31, 7:06 PM

Yeah if anyone wants to take a stab at implementing a Pygments theme, I'll gladly assist. You can use an existing theme (example) as a guide. It's mostly just picking out the right colours. There is also currently a requirement that all themes have both a light and dark mode variant.

Content licensed under Creative Commons Attribution-ShareAlike (CC BY-SA) 4.0 unless otherwise noted; code licensed under GNU General Public License (GPL) 2.0 or later and other open source licenses. By using this site, you agree to the Terms of Use, Privacy Policy, and Code of Conduct. · Wikimedia Foundation · Privacy Policy · Code of Conduct · Terms of Use · Disclaimer · CC-BY-SA · GPL · Credits