Talk:Community Tech/Wikitext editor syntax highlighting

From Meta, a Wikimedia project coordination wiki
Jump to navigation Jump to search

Wikitext syntax highlighting is now live as a beta feature on all LTR wikis! Feel free to leave comments and questions here.

Contents

"File" with text in brackets inside it does not highlight correctly[edit]

This does not format correctly in test:Pride and Prejudice:

[[File:Houghton Typ 805.94.8320 - Pride and Prejudice, 1894, Hugh Thomson - Protested.jpg|thumb|left|180px|Illustration by [[Hugh Thomson]] representing Mr Collins, protesting that he never reads novels]]

I see everything up to and including "Thomson]]" with a light purple background, then the rest with a white background. Jonesey95 (talk) 00:15, 7 July 2017 (UTC)

Thanks. That's tracked as phab:T108447. --Quiddity (WMF) (talk) 01:09, 7 July 2017 (UTC)

Broken for RTL[edit]

Thank you for implementing syntax highlighting for wiki syntax, this is really nice feature. However, please note that for right to left languages it is broken, for example the text direction is always left to right and browser switch text direction functionality ([Ctrl+Shift/Ctrl+Shift+X]) doesn't change the text direction compared to simple textarea. This is very important to RTL users as it is quite common to handle LTR embedded text within RTL content. eranroz (talk) 12:31, 7 July 2017 (UTC)

Thanks, Eran -- I've filed this as phab:T170001; we'll look into it. DannyH (WMF) (talk) 17:20, 7 July 2017 (UTC)

Magic words localization[edit]

Yes check.svg Resolved.

Hello. Continuing Eran's post, there is another local problem: localisated magic words are highlighted as templates. IKhitron (talk) 15:32, 7 July 2017 (UTC)

IKhitron: Thanks for the report -- can you give me an example? DannyH (WMF) (talk) 17:19, 7 July 2017 (UTC)
Sure, DannyH (WMF): {{DEFAULTSORT:AAA}} <-> {{מיון רגיל:AAA}}
Great, thanks IKhitron: I added that to phab:T170001. -- DannyH (WMF) (talk) 17:39, 7 July 2017 (UTC)
Why, DannyH (WMF)? It's local problem, not RTL problem at all. IKhitron (talk) 17:41, 7 July 2017 (UTC)
IKhitron: Oh, I'm sorry -- you're right, I was distracted by two RTL examples in a row. :) I created a new ticket for the magic words: phab:T170004. -- DannyH (WMF) (talk) 17:56, 7 July 2017 (UTC)
Thank you. IKhitron (talk) 17:57, 7 July 2017 (UTC)

Category[edit]

Hello. As I understood, there is no way to highlight categorization as in wikEd. Is there a reason for this? Thank you. IKhitron (talk) 18:17, 14 July 2017 (UTC)

@IKhitron: Actually, categories are highlighted, but they are treated the same as links. This is both to avoid "rainbow soup" and for performance optimization, but if there is demand for highlighting categories differently, we will definitely consider it. Kaldari (talk) 22:27, 19 July 2017 (UTC)
I suggest you to consider creation of new CSS style for categories, designed the same as ordinary links. So it will look the same. But users or communities that want this, will change the design and see it. It is important to many people to see category link in the middle of the page, recognizing it should not be there. Thank you. IKhitron (talk) 22:33, 19 July 2017 (UTC)

Colors[edit]

Can you make the colors more like those of WikEd? Thanks Doc James (talk · contribs · email) 11:37, 15 July 2017 (UTC)

Please, don't. The wikEd colors are awful. And Doc James, you can change the colors as you wish, using CSS. IKhitron (talk) 11:57, 15 July 2017 (UTC)
While I agree that the wikEd colors are not always as nice as they could be, I also think that the current colorset for this CodeMirror highlighting is like skittles to my eyes. There is so much going on, it makes it harder to read some of the text with all these different colors. It's important that things are recognizable, but that doesn't mean that everything needs to have it's own color in my opinion. But so far I'm so happy with this bikeshed, I don't want to argue about the colors just yet :) —TheDJ (talkcontribs) 21:51, 18 July 2017 (UTC)
While the gadget could technically allow the user to select among a number of different coloring options. We could have a version for those who are red green color blind for example and a version for those who have become used to WikEd as well as the current version. Than EVERYONE could be happy :-) Doc James (talk · contribs · email) 00:08, 4 August 2017 (UTC)
Does this section here mean I can get Wikitext to color code the same as WikEd?[1] Doc James (talk · contribs · email) 20:33, 12 September 2017 (UTC)

HTML comment next to a heading[edit]

If an HTML comment is on either side of a heading, the heading won't get highlighted and the size won't change. Give it a go here. Here's a .gif of it happening in case the previous link doesn't show it off properly. – Srdjan m (talk) 16:37, 19 July 2017 (UTC)

@Srdjan m: Thank you for the detailed bug report! I've created a new Phabricator task for it. Ryan Kaldari (WMF) (talk) 17:45, 19 July 2017 (UTC)

Change button icon[edit]

Hi. Is there a way to change the button icon, {}? It's not intuitive, and for our wiki looks almost the same as {{}}, the Template Wizard. Thank you. IKhitron (talk) 18:22, 19 July 2017 (UTC)

@IKhitron: What is the Template Wizard and which wiki is that on? If it's too similar, we'll see about changing the syntax highlighting icon to something else. What do you think about this icon: https://phabricator.wikimedia.org/F7946828? Kaldari (talk) 22:30, 19 July 2017 (UTC)
Something as add template on VE, but on WE, and more powerful. You can add new template. Also, if you choose some template wiki code and press the button, you'll get a window with all the template parameters. Those in the code will appear in the fields, those from wikidata will be gray, the rest are empty. You can change them as you wish. It's on w:he:Mediawiki talk:Gadget-TemplateParamWizard, but also on Arab, I think. You mean the blue one? Looks very nice. IKhitron (talk) 22:43, 19 July 2017 (UTC)

LanguageConverter support[edit]

Would it be possible to add support for LC's syntax that's currently used on several wikis? – Srdjan m (talk) 15:50, 21 July 2017 (UTC)

Another nesting problem[edit]

Hello again. Congrats for the deployment. We already talked about nesting problem, in files, and here is another one. Open the last Tech News issue and see the <tvar> tags. IKhitron (talk) 22:34, 3 August 2017 (UTC)

Oh, thanks for the report. We just started a ticket for the tvar tags -- phab:T172456. I added your comment on the ticket. -- -- DannyH (WMF) (talk) 22:50, 3 August 2017 (UTC)
Thank you. Can't you just support any tag - it should be much simplier. IKhitron (talk) 22:59, 3 August 2017 (UTC)

Bidi[edit]

Hi. Great it's on again. Pay attention that bidi override does not work. IKhitron (talk) 22:39, 22 August 2017 (UTC)

IKhitron: Sorry, I don't understand. What's bidi override? -- -- DannyH (WMF) (talk) 22:41, 22 August 2017 (UTC)
Adding bidi=override css style to the editor window. For example, add the direction gadget, the first in language support section here on meta, and try the bidi=override button for some rtl text inside the regular ltr one, DannyH (WMF), with and without the highlighter. IKhitron (talk) 22:46, 22 August 2017 (UTC)
IKhitron: Oh, I see. Yes, we're having trouble making syntax highlighting work for RTL text. There are some changes that need to be made to the CodeMirror library; we're still figuring out how to approach this. That applies both to RTL wikis and embedded RTL text. We're tracking our progress on this ticket: phab:T170001. -- -- DannyH (WMF) (talk) 17:02, 23 August 2017 (UTC)
Of course I know this, DannyH (WMF). But I believe that this point should be tracked two, in the same ticket or elsewhere, because I'm not so sure that fixing this task will fix bidi too. Thank you. IKhitron (talk) 17:05, 23 August 2017 (UTC)

"Discussion" link on beta features page does not link to this page[edit]

On en.WP at least, the Beta features section for this new feature provides links called "information" and "discussion". "Information" links to https://meta.wikimedia.org/wiki/Community_Tech/Wikitext_editor_syntax_highlighting but "Discussion" links to https://www.mediawiki.org/wiki/Extension_talk:CodeMirror. The links should go to pages that correspond to each other, like most XXXX/Talk page link pairs. Jonesey95 (talk) 16:42, 24 August 2017 (UTC)

Jonesey95, the "Discussion" link on Beta features always goes to a mediawiki.org page, so that people reporting problems with the feature can use a Flow structured discussion page. We're pointing the "Information" link to the Meta page because it's got more up-to-date information. I agree that's a strange rationale. -- DannyH (WMF) (talk) 23:22, 25 August 2017 (UTC)

Breaking an interface title in two messages[edit]

MediaWiki:Codemirror-popup-syntax and MediaWiki:Codemirror-popup-highlighting are combined to form the title "Syntax Highlighting", with the two words having different styling. That was not a good approach, as in some languages the natural wording is in opposite order (Greek: Επισήμανση Σύνταξης). I crossed the translations in the messages so it will not appear weird when it goes live, but this is a hack and not good approach (f.e. the translation memory of translatewiki will propose a wrong word for another message, or in some languages the translator may not take notice until it goes live on the interface). -Geraki TL 08:29, 25 August 2017 (UTC)

Geraki, thanks for pointing this out -- we hadn't considered how that would impact the translation. I filed a bug ticket (phab:T174219), and I'll talk with the team about it. Thank you! -- DannyH (WMF) (talk) 22:55, 25 August 2017 (UTC)

Browser spell-checker doesn't work any more[edit]

Since I've activated the highlighter, the spell-checker in my browser doesn't work in this window any longer. What has changed to trigger this unwanted behaviour? Grüße vom Sänger ♫(Reden) 19:57, 25 August 2017 (UTC)

Sänger, thanks for reporting this. I've created a ticket for it (phab:T174223), and we'll see what we can do. Thanks! -- DannyH (WMF) (talk) 23:34, 25 August 2017 (UTC)
Hi DannyH (WMF). Maybe I'm wrong, but I think I already saw another phab ticket about this issue, a couple of days ago. IKhitron (talk) 00:32, 26 August 2017 (UTC)
IKhitron: Oh, you're right. I merged with phab:T95104. Thank you! -- DannyH (WMF) (talk) 00:35, 26 August 2017 (UTC)
No problem. IKhitron (talk) 00:39, 26 August 2017 (UTC)
As I can't write anything in phab (I'm banned there for asking too pertinent for an answer from the devs back to the community), can someone please quote me there, that it's a very bad idea to invent the weel a second time and try to get e new spell-checker in wiki, while there is so good stuff out there already in the browsers. It's wasted money and resources, and will put even more load in the Wiki, that is already fully available in every browser. Grüße vom Sänger ♫(Reden) 08:27, 26 August 2017 (UTC)
P.S.: I've reactivated WikEd for the time being, as especially here in a foreign language discussion working without a spell-checker is not funny. Could someone please ping me here (for example by posting something) once the solution is found and implemented? WikEd has other disadvantages (it currently makes the summary nearly unusable), so I'd like to have this one working. Grüße vom Sänger ♫(Reden) 10:57, 26 August 2017 (UTC)
Agree to gravity of the problem in non-native languages (probably a majority of users on Commons, Wikidata and other projects). For me at least lack of a spell checker is an exclusion criterion in most cases (unfortunately). --Marsupium (talk) 06:32, 28 August 2017 (UTC)
Possibly connected technically and more a minor issue perhaps: The highlighter breaks the text suggesting in iOS, no idea how many are affected by this. :) --Marsupium (talk) 21:49, 28 August 2017 (UTC)
Hello all. We have a possible fix for this issue. You can test it out on this page. It's not deployed anywhere as yet. There are some known issues with it which you can read about on phab:T95104. Feel free to comment there directly. Thanks. -- NKohli (WMF) (talk) 23:59, 14 September 2017 (UTC)
It worked for me (Linux/FF). Grüße vom Sänger ♫(Reden) 13:01, 15 September 2017 (UTC)

Classes of rendered HTML[edit]

Would it be expensive to set something like .mw-redirect for redirects and .extiw for interwikilinks, too, like in the rendered HTML body? --Marsupium (talk) 21:54, 26 August 2017 (UTC)

I think that would be wrong because for example an external link is semantically different from wikitext representing it. Max Semenik (talk) 22:33, 29 August 2017 (UTC)
OK, then something like .cm-mw-redirect for redirects and .cm-mw-extiw for interwikilinks? --Marsupium (talk) 17:02, 4 September 2017 (UTC)

Home / End keys cumbersome behavior[edit]

Yes check.svg Resolved.

The Home and End keys have an awkward behavior in this editor, ignoring word wrap of long lines within the text area and moving the caret all the way to the beginning or end of the whole paragraph. When the paragraph is wrapped into more than two or three lines long, this accounts for a very long jump, and makes it difficult to navigate to arbitrary places within the paragraph.

In all major browsers, pressing these keys within a text area will move the caret to the start or end of the current line of text in the screen, accounting for word wrap. I.e., if a paragraph of text spans several lines, pressing Home moves the caret to the first word of its current line, which may be located midway within the long paragraph. This way, it is easy to quick jump to the beginning of any row of text, and navigating the text within a long paragraph is much faster.

The deviation from the standard behavior makes the editor nearly unusable, as it forces me to switch to the mouse for quick positioning within the paragraph, or alternately requiring many more repeated word advances with ctrl + left/right. Even though I'm really liking of Syntax highlighting is working so far, I've disabled it in Beta preferences solely because of this unexpected behavior.

The funny thing is that it seems to happen only when enabling Syntax highlighting with the old wikitext editor. I've just tried it within the 2017 editor and it works as expected. I've tried it in several browsers, Chrome-based and Firefox-based, on Windows 10. Diego Moya (talk) 07:33, 8 September 2017 (UTC)

Breaks searching[edit]

With the highlighter on, I was unable to search for text in the edit window. Search worked on text outside, but not inside. Also, the colors are too loud.--Auric (talk) 16:00, 8 September 2017 (UTC)

We've rolled out a fix for the search issues and you should be able to see it live on the wikis over the coming week. For the colors, you can customize them in your CSS file see - Community Tech/Wikitext editor syntax highlighting. You can find an example of how to do this here: User:NKohli_(WMF)/common.css. Thanks. -- NKohli (WMF) (talk) 19:14, 11 September 2017 (UTC)

Fronteer between WYSIWYG and WikiText. More customizations of specific templates and colors needed?[edit]

We have a non Wikipedia wiki server in various languages and very specific nested templates. Without syntax highlighting it is not possible to edit the text(see below). With a Visual editor you would need recursive possibilities to enter and edit the two level nested templates. But this facility does not exist yet.

The only solution is the current wikitext editor with syntax highligting. But I wonder if the new wikitext can be customized in order to produce the following visual effect (or click on this edit page):


{{TextTerm|Demography|1|101|IndexEntry=demography}} is the scientific study of human populations primarily with respect to their size, their {{TextTerm|structure|2|101}} and their development; it takes into account the quantitative aspects of their general characteristics. It is the core of the {{NewTextTerm|population science|8|101|OtherIndexEntry=sciences, population ...}}, which in the broadest sense include interdisciplinary fields such as {{NonRefTerm|economic demography}} ({{Refnumber|10|4|1}}), {{NonRefTerm|social demography}} ({{Refnumber|10|4|2}}), {{NonRefTerm|population genetics}} ({{Refnumber|10|4|4}}), {{NonRefTerm|historical demography}} ({{Refnumber|10|2|1}}), {{NonRefTerm|mathematical demography}} ({{Refnumber|10|2|6}}) as well as contributions from the law, medicine, epidemiology ({{Refnumber|42|3|6}}), sociology, psychology, geography and philosophy. In statistical terminology any collection of distinct elements may be called a {{TextTerm|population|3|101}}, a word that is synonymous with {{TextTerm|universe|3|101|2}}. However, in demographic usage, the term {{TextTerm|population|4|101}} refers to all of the {{TextTerm|inhabitants|5|101|IndexEntry=inhabitant}} of a given area, though on occasion it may be used for part of the inhabitants only [e.g., the {{NonRefTerm|school-age population}} (cf. {{Refnumber|34|6|7}}), the {{NonRefTerm|marriageable population}} (cf. {{Refnumber|51|4|2}})]. Such groups are properly called {{TextTerm|sub-populations|6|101|IndexEntry=sub-population}}. The term population is often used to denote more specifically the {{TextTerm|population|7|101}}, i.e., the {{TextTerm|total number|7|101|2|OtherIndexEntry=number, total ...}} of the aggregate referred to in no. {{Refnumber|10|1|4}}.

{{Note|1|{{NoteTerm|Demography|IndexEntry=demography}}, n. - {{NoteTerm|demographic}}, adj. - {{NoteTerm|demographer}}, n.: a specialist in demography.}}

{{Note|4|{{NoteTerm|Population|IndexEntry=population}}, n. - Note that this term may also be used adjectivally as a synonym for demographic, e.g., in population problems, population analysis, population studies.}}

{{Note|5|{{NoteTerm|Inhabitant|IndexEntry=inhabitant}}, n. - {{NoteTerm|inhabit}}, v.: to occupy as a place of settled residence.}}


As you can see the boring templates are in dark colors and hard to read but the text to be modified by users is easy to read and to modify. I got that facility with a specific adaptation of DotsSyntaxHighlighter.

We have recent experience with editors of this dictionary. They were very reluctant to edit online but did agree with this facility (some of them). The text to be modified is in black on white without any color or special font. Only braces are colored with a color specific to the template. It was also important to separate the two parts, the main text of a section on top and its related notes below: therefore the editing of the notes is rendered in green color.

The output of this source code can be seen at http://en-ii.demopaedia.org/wiki/10/ .

I have read that the new wikitext is not using DotsSyntaxHighlighter but is much more customizable than current version of DotsSyntaxHighlighter for templates and nested templates.

But is the new wikitext editor enough customizable to produce such above visual editing? I don't think so. Before entering javascript again to fit my needs, I was wondering if such detailed customizations of templates (bracket colors, template names color, argument template text color) could be of interest for other mediawiki users?

Regards,

Syntax hightlighting will also work in LTR language like Arabic.

Syntax highlighting breaks DRV closure javascript[edit]

This is probably more of a problem with the script than with the syntax highlighting, but this breaks User:Lifebaka/closedrv.js. I described the problem here. RoySmith (talk) 13:02, 18 September 2017 (UTC)

Conflict with TemplateScript[edit]

I love the new syntax highlighting, but I find that I can't use my TemplateScript scripts anymore. This is on the English Wiktionary. I click the buttons in the sidebar and they do nothing. I'm not sure if the problem lies with the syntax highlighting mechanism or with TemplateScript. My other editing scripts work fine, so perhaps the latter. Erutuon (talk) 20:21, 26 September 2017 (UTC)

the current color scheme is hard to read (which renders highlighting useless)[edit]

I really like CodeMirror, but the default color scheme is problematic. It makes almost any text harder to read.

Syntax highlighting should show up differences and group similar tags/elements together, yet the current color scheme disobeyes any rules for highlighting.

Just a few examples (there are a lot more issues):

  • ~~~~ and ---- are highlighted exactly the same, although they have nothing in common. I have to look twice to actually see what they are. Syntax highlighting should add color to do exactly that, so that I know right away, what those 4 characters are.
  • on the other hand links are highlighted different (internal, external, plain) which makes it really hard to read. I want to look at the text and have the links stand out. Not only do they not stand out, because the color scheme uses low contrast colors, they also look different and fade into the rest of the text.

With the current color scheme, syntax highlighting has the oppsite effect. It makes it not easier, but harder to parse and read the text. Tessus (talk) 22:53, 28 October 2017 (UTC)

It looks like there are a lot of different preferences for details of highlighting and it looks like no single option will satisfy everyone. A possible solution is to allow user customising. The default works well enough for me, for what I use it for most of the time, but clearly there are other uses, for which a different scheme would work better. · · · Peter (Southwood) (talk): 15:38, 29 October 2017 (UTC)
There is user customising. IKhitron (talk) 15:44, 29 October 2017 (UTC)
Cool, where do I find the instructions? Cheers · · · Peter (Southwood) (talk): 16:00, 29 October 2017 (UTC)
Community Tech/Wikitext editor syntax highlighting#Color and style customization IKhitron (talk) 16:02, 29 October 2017 (UTC)
That tells me it can be done, not how to do it myself, so not useful to me as instructions Cheers, · · · Peter (Southwood) (talk): 16:10, 29 October 2017 (UTC)
Actually, it does explain how. What do you know about CSS? IKhitron (talk) 16:12, 29 October 2017 (UTC)
Almost nothing, and therein lies the problem. I probably know about as much as most editors, so I don't think the instructions as they are will help many of us to customise our highlighting. I can read CSS code and much of the time see that it does what it does, without knowing enough to write it myself, or fix it if broken. · · · Peter (Southwood) (talk): 17:57, 29 October 2017 (UTC)
I think it's good enough for you. Try this: Open the page [[Special:MyPage/common.cssjs]] on your wiki. Add a line
.cm-mw-list {background-color: green; color: red;}
at the bottom (the cm-mw-list comes from the second table line in the link I gave you). Save. Open some highlighted edit page and try lists - * and #. IKhitron (talk) 18:22, 29 October 2017 (UTC)
I followed your instruction and it worked in a way that was logical after the fact. This shows that there is a gap in the instructions, that is small but critical (in my case). Your tiny addition made it workable for me. A short paragraph of basic instruction of how to find/create your common.css page, where to put the code, and the synatax for colour specification can be added with the table so others can also do it. an example like yours and the expected display would also be worth adding. I am not sufficiently sure I could describe the procedure without errors, but will give it a try. Please check and correct if I provide misleading information. Cheers, · · · Peter (Southwood) (talk): 06:45, 30 October 2017 (UTC)
IKhitron, I accidentally put the code in /common.css, where it worked. I then noticed my error, and tried to put it in /common.js as you suggested, where I got an error message when trying to save. I therefore assume that you meant /common.css, which makes some sense, particularly since it worked. Please confirm. I now see that in the explanation at Community Tech/Wikitext editor syntax highlighting#Color and style customization it specifies common.css, which is probably why I did it. No worries.
I wrote an explanation at Community Tech/Wikitext editor syntax highlighting#How to do it for those who have very little understanding of css. Please check and correct where necessary. Cheers, · · · Peter (Southwood) (talk): 07:10, 30 October 2017 (UTC)
I still think that a better out-of-the-box experience should be provided. While I do understand that it won't be perfect for everyone, at least it would be a better start for others to customize it themselves. Please talk to graphic and UI designers (and I do not mean me), who understand the rules of syntax highlighting, color contrast, and text flow. Currently everything is meshed up and the only thing one can see is a big blob of colors (with more sophisticated pages that is). Tessus (talk) 19:41, 29 October 2017 (UTC)
If it is too complex to allow tick-box options of the familiar sets of colours, it would be possible for sets of css code to be available which can be copied and pasted to emulate the other familiar colour schemes, and for that matter, any number of other preferences. I leave this as an exercise for someone who actually knows how to write css. · · · Peter (Southwood) (talk): 07:17, 30 October 2017 (UTC)
I am sorry. Of course, it was css. IKhitron (talk) 09:11, 30 October 2017 (UTC)
Well, Peter (Southwood), I improved it a little. What do you think? IKhitron (talk) 09:32, 30 October 2017 (UTC)
IKhitron, Now we are cooking with gas! That is exactly the kind of improvement I was hoping for. Now we just need a few others to test the instructions and give feedback on whether they work for everyone, or a reasonable subset of everyone. Big improvement, thanks. Cheers, · · · Peter (Southwood) (talk): 10:00, 30 October 2017 (UTC)
I like the idea of tick-box options to choose a theme - or a drop down box. I don't need 100 different ones, but the 4 they used in Community_Tech/Wikitext_editor_syntax_highlighting#Color_and_style_customization would be a great start. CodeMirror comes with a bunch of themes in resources/lib/codemirror/theme/, so I don't really understand why choosing a theme was never implemented. Tessus (talk) 00:50, 31 October 2017 (UTC)
I am wanting the wikEd color scheme to be used by syntax highlighting. Is it possible to do this?
@Pbsouthwood, Tessus, and IKhitron: Doc James (talk · contribs · email) 01:29, 24 December 2017 (UTC)
Hi Doc James, You can customise to almost any colour scheme, but it is slightly tedious as there are a lot of items to do, and you will need the colour codes for each colour you want to use, I forget the details, but the instructions already exist, and are not difficult. If you do create a custom css for WikiEd, please leave a copy/link here so others dont have to redo the work if they want the same. Please try following the instructions and noting where they need improvement. Cheers · · · Peter (Southwood) (talk): 16:11, 24 December 2017 (UTC)
Was hoping someone had already done it. If not I guess I will take a look and see if I can figure it out.Doc James (talk · contribs · email) 22:07, 24 December 2017 (UTC)
Someone has to be the first. Though it is possible that someone has already done it but has not bothered to mention it here. Cheers, · · · Peter (Southwood) (talk): 04:35, 25 December 2017 (UTC)
You can start with the customization table wikicode. IKhitron (talk) 13:49, 25 December 2017 (UTC)
User:IKhitron for a not very technical editor how would one do that? Doc James (talk · contribs · email) 23:49, 25 December 2017 (UTC)
You should understand in css. Then, copy the values from the table to your code. IKhitron (talk) 01:20, 26 December 2017 (UTC)
It would be really helpful if someone more skilled in css than Doc James or myself would put together a full list of the styles available for use by this tool so that all the user would need to do is copy/paste the list to their own css file and fill in the preferred colours (so each style should have sufficient information in comments to identify what it applies to). Cheers, · · · Peter (Southwood) (talk): 04:53, 26 December 2017 (UTC)
I do not understand css unfortunately. Doc James (talk · contribs · email) 08:56, 21 February 2018 (UTC)

Change “green and red” to “blue and red”[edit]

This section uses green and red as a sample color combo, but that can be changed to either blue and amber, or blue and red. Not nagging but let’s be inclusive for a color blind. —Omotecho (talk) 22:56, 11 November 2017 (UTC)

Omotecho, The actual colours don't matter much. This is an open wiki, you can change them to whatever will work best. Red and green actually show a good example of why one may wish to change the colours, but if you think it confuses the issue, just fix it and explain why. · · · Peter (Southwood) (talk): 06:13, 12 November 2017 (UTC)
Pbsouthwood, of course colors are of your choice. Speaking of how to make the documentation universal, I wish to update the shown sample in the bordered box. Could we update $code and show the same result as when applying <syntaxhighlight lang=css>.cm-mw-list {background-color: blue; color: red;}</syntaxhighlight> ? If I go ahead and change translation in ja, I’m afraid it doesn’t solve the issue; unless we update English documentation, proofreaders will correct such translation as not abiding to English text. Sorry but that’s how translating/proofreading works, and why I am asking this question. —Omotecho (talk) 19:13, 18 November 2017 (UTC)
Omotecho, I have no objection to you updating the English version by changing the colours and text of the sample to one of the combinations you described for this reason. · · · Peter (Southwood) (talk): 03:54, 19 November 2017 (UTC)
Thank you, Pbsouthwood, I’ll go ahead and update ja. Best, —Omotecho (talk) 21:27, 19 November 2017 (UTC)
Me either. When I created this example, I just took the colours off the top of my head. IKhitron (talk) 22:07, 19 November 2017 (UTC)

When it will be active in RTL projects?[edit]

Look like a nice gadget. Geagea (talk) 06:34, 1 December 2017 (UTC)

@Geagea: We have enabled this on RTL beta wikis (you can check it out here) but not on production wikis. There are some significant problems with it in RTL. The underlying library we use for this feature does not seem to have good RTL support and we're unable to do much about this. If you can test it out at the above link and you think it is useful inspite of the bugs, we'd be happy to enable it on RTL wikis. We haven't found many RTL users to test this out with. Thanks. -- NKohli (WMF) (talk) 06:06, 4 January 2018 (UTC)
I did, once. It's awful. IKhitron (talk) 12:56, 4 January 2018 (UTC)

Button Looks Too Similar to The One That Switches Between Source & Visual Editing?[edit]

Took me a little while to figure out how to turn the syntax highlighting on. In the source editor mode, the button for switching editing modes is much more prominent and, to me, looks almost exactly like the syntax highlighting button. I'm using Safari 11.0.1 on El Cap (10.11.6).

Compare Codemirror-icon to Pencil icon to switch between visual and source editing modes..

There is a color difference, but it's awfully close. Brucehs (talk) 01:15, 6 December 2017 (UTC)

@Brucehs: we're aware of this problem. There was a lot of back-and-forth about this issue (phab:T174145 and phab:T164441). We're kinda stuck with this icon now because of the sheer number of users (12,800+ users on enwiki) using this feature. Any changes to the icon could cause confusion to folks. We do give a pop-up to users who enable syntax highlighting for the first time, to show them the icon. You can see it again if you disable syntax highlighting, clear your cookies and refresh the page (or open an incognito window). -- NKohli (WMF) (talk) 06:17, 4 January 2018 (UTC)

Can't deactivated on MediaWiki[edit]

I'm unable to deactivate this beta feature on https://www.mediawiki.org/ !? I've some strange conflicts with another tool (which I don't had with another syntax-highlighter gadget). -- User: Perhelion 19:37, 1 February 2018 (UTC)

Yes, you can deactivate it. Please make sure that "Enable all beta features automatically" checkbox is not checked. Turn that off, then turn Wikitext syntax highlighter off, then save it. That should deactivate it. Also if you don't want to turn it off as a beta feature, you can turn it off in the UI (by clicking the icon) and it will remain off.
It'd be great if you could tell us which tool is this conflicting with. We can work on fixing the problem. Thanks. -- NKohli (WMF) (talk) 19:46, 1 February 2018 (UTC)
Yes check.svg Done Sorry man, it was not this highlighter here, it was Dot's syntax highlighter (which is a gadget there, so the error is not in this highlighter). ●^_^● -- User: Perhelion 22:09, 1 February 2018 (UTC)

Fail: Search and Replace[edit]

I get always a JS error if I use the search and replace function from the Wikieditor.

jquery.wikiEditor.dialogs.config.js?5d474:1118 Uncaught TypeError: Cannot read property 'textSelection' of undefined
   at HTMLDivElement.<anonymous> (jquery.wikiEditor.dialogs.config.js?5d474:1118)
   at HTMLDivElement.wikieditor-toolbar-tool-replace-button-replaceall (jquery.wikiEditor.dialogs.config.js?5d474:1201)
   at HTMLButtonElement.props.click (jquery.ui.dialog.js?c50b1:381)
   at HTMLButtonElement.dispatch (load.php?debug=true&lang=de&modules=jquery%2Cmediawiki|mediawiki.legacy.wikibits&only=scripts&skin=vector&version=14kbqyi:5206)
   at HTMLButtonElement.elemData.handle (load.php?debug=true&lang=de&modules=jquery%2Cmediawiki|mediawiki.legacy.wikibits&only=scripts&skin=vector&version=14kbqyi:5014)

I got also a another bug with the bottom editools, as they inserting "sometimes" only in the editsummary (but maybe I must be more specific). -- User: Perhelion 20:43, 22 February 2018 (UTC)

@Perhelion: I couldn't recreate this defect on Chrome on OSX. Which browser and OS combination are you using? And does the search+replace still succeed when you attempt, or does it not replace? — Trevor Bolliger, WMF Product Manager 🗨 22:51, 22 February 2018 (UTC)

I'm having a somewhat similar issue in that the search and replace doesn't actually replace anything if I choose "Replace all" with syntax highlighting on. Individual replace works fine with it on, and "Replace all" works fine with it off, though. I'm on Firefox (58.0.2) and OS X. – Srdjan m (talk) 15:31, 23 February 2018 (UTC)

  • Very strange, I just tested on Firefox 58.0.2 on OSX 10.13.3 and could not reproduce this defect. I've filed it at phab:T188119 to investigate. We know there are a few odd bugs in the new wikitext editor on Firefox that we need to address, so maybe this will be fixed wholesale. Thanks for letting us know. — Trevor Bolliger, WMF Product Manager 🗨 17:30, 23 February 2018 (UTC)

Adding a redundant pipe to a template changes highlighting behavior[edit]

In this version of the article, note that the entire Infobox settlement at the top of the page is not highlighted. But after I added a redundant pipe on the first line, now the entire template is now highlighted. I believe it should still have been highlighted without the addition of this redundant pipe. Indeed it's highlighted without the redundant pipe, if the pipe is simply relocated. I'm using Google Chrome on Windows 7. Wbm1058 (talk) 18:11, 24 February 2018 (UTC)

Happens for me too on Chrome/OSX. It appears to be that the use of an HTML comment in-between the template name and the first pipe is causing this error. I've filed it on Phabricator at phab:T188305. — Trevor Bolliger, WMF Product Manager 🗨 20:14, 26 February 2018 (UTC)

CodeMirror does not work any more[edit]

Hello. I am editing this new topic, the icon shown as pressed, there is no highlighting, and pressing on icon does nothing. Thank you. IKhitron (talk) 22:25, 26 February 2018 (UTC)

It works fine for me. Did you enable any new gadget recently or modified your common.css/js? -- NKohli (WMF) (talk) 22:38, 26 February 2018 (UTC)
Only for Special:Watchlist. And the problems remains in safemode either. IKhitron (talk) 22:43, 26 February 2018 (UTC)
Which editor? Which browser? Which wiki? Can you try on different browsers and wikis to see if that works? What change did you make after which it stopped working? Can you revert your change to see if that helps? -- NKohli (WMF) (talk) 22:47, 26 February 2018 (UTC)
Wikieditor. Any browser. Metawiki only. Don't think there was any change. Tried to turn off beta and turn on again - does not help. The console is empty. IKhitron (talk) 19:32, 27 February 2018 (UTC)
Well, NKohli (WMF), I found the problem. The highlighting is not compatible with the turned off wikEd gadget. I'm replacing to wikEdDiff. IKhitron (talk) 11:14, 19 March 2018 (UTC)

Not working in 2003 WikiEditor and whether to enable or disable by default[edit]

I see plans to get the feature out of Beta next month and to have it enabled by default into 2010 WikiEditor and VisualEditor. The feature has potential and may be better than en.WP's other SyntaxHighlighter, but the feature is not working in the 2003 WikiEditor (the one w/o the upper toolbar buttons), leaving me to enable and/or use Remember the dot's Syntax highlighter, which has too many distracting colors. Do I go to MediaWiki or Phabricator to request fixing the issue? Will there be plans to extend the feature to the 2003 WikiEditor?

Unlike Community Tech/Template wizard, I could not find any strong reason to oppose or resist the default enabling. This isn't like the Template/Infobox wizard, which is more prone to misuse and more impactful. Rather readability and editing are involved, yet the highlighting is not about trying to change content. Nevertheless, 18,000+ users enable the newer syntax highlighting feature, but I'm unsure whether that's a good reason enough to enable or not enable the feature. --George Ho (talk) 23:12, 18 March 2018 (UTC)

There is no direct way to enable it in the 2003 wikitext editor because the feature works with the help of the toolbar. But if you switch to the 2010 editor and enable codemirror using it (i.e. you click the toolbar icon and the colors show up) and then you switch back to 2003 editor, the feature should work. You will have to follow the same process if you need to turn it back off. -- NKohli (WMF) (talk) 19:09, 19 March 2018 (UTC)
Oh... cool. I've done that as you suggested, and I realize that it works in the 2003 editor once you enable the feature in the Toolbar and disable the Toolbar without disabling the feature in the Toolbar. I also enabled and disabled the feature without technically disabling it in the Toolbar, and it still works. I re-enabled and disabled the Toolbar; the feature still works. Well, it's still in Beta mode, but I'll try the feature out for a while then. Thanks. --George Ho (talk) 20:00, 19 March 2018 (UTC)

I re-enabled the Toolbar to test out the newer feature. Oh hey... It works in the 2006 WikiEditor, which the WMF wants to disable as soon as possible. Anyway, the more positive thing about the feature is the sizing and better coloring and more advanced than the other feature, which has too much highlighting all over the text. However, as said before, the feature doesn't work at the 2003 WikiEditor because the Toolbar is required to use it. --George Ho (talk) 02:58, 19 March 2018 (UTC)

May I ask you why the toolbar is a problem? From my knowledge, not a lot of people use the 2003 editor lately. The toolbar in the 2006/2010 editors come with a lot of additional features which can potentially help with editing. Keen to hear your point of view. Thanks! -- NKohli (WMF) (talk) 19:09, 19 March 2018 (UTC)
The toolbar... Well, not a (huge?) problem, but I've seldom used it for anything other than signing for my posts. I just don't care for the Toolbar personally. Indeed, I can '''bold''' and ''italicize'' and add ==Headers== and #REDIRECT[[Foo]]. I see that it also has simplified features to add tables and other things, but I prefer more wikicoding ;). --George Ho (talk) 20:00, 19 March 2018 (UTC)

.cm-mw-link-pagename and .cm-mw-pagename[edit]

What is the difference between .cm-mw-link-pagename and .cm-mw-pagename? The documentation says the elements controlled are "internal link target" and "internal link targets". I don't understand the distinction and what is meant by targets plural. -- Wbm1058 (talk) 20:54, 20 March 2018 (UTC) Defaults:

  • .cm-mw-pagename { text-decoration: underline; }
  • .cm-mw-link-pagename { color: #36c; font-weight: normal; }

Readable text should not be highlighted[edit]

I think that text that is readable in the article page view should not be highlighted, even if that text is within a template or other wiki code. For instance [[foo]] should only highlight the brackets like [[foo]], or if piped, as [[foo|foobar]]. Likewise a readable template such as {{nowrap|foo}}. SpinningSpark 22:21, 4 April 2018 (UTC)

I do not think that CodeMirror can remember and recognize all templates in all languages, so it can decide which parameter is visible and which is not. IKhitron (talk) 00:07, 5 April 2018 (UTC)
IKhitron is correct. CodeMirror cannot determine how every template works. Templates can work very differently and figuring out what will be shown to the user for each and every one of them is not possible, unfortunately. -- NKohli (WMF) (talk) 17:49, 5 April 2018 (UTC)
CodeMirror is way to colorful as it is now. Color encode what is helpfull and that which increases readability, don't put color on everything just because you can. A lecturer in a UI design class called this "a Spanish color soup", and this has become a color soup. — Jeblad 23:51, 2 May 2018 (UTC)

Syntax highlighting breaks Firefox's in page search[edit]

Open the "33rd Chess Olympiad" in the source editor and enable syntax highlighting. Bring up the "Find in page" search field (⌘F) and type in "½". Press ⌘G and slowly to go through each match while keeping an eye on the one that's currently highlighted and the "x of x matches" text to the right of "Whole Words". Several matches should be skipped (on my system, it skips from 4 of 108 to 6 of 108, 7 of 108 to 9 of 108, 18 of 108 to 20 of 108, and so on). Here's a short video with the skips highlighted. When I disable syntax highlighting, it goes through all the matches just fine and highlights them properly as I keep pressing ⌘G. I'm using Firefox 59.0.2 on macOS. – Srdjan m (talk) 19:30, 2 May 2018 (UTC)

@Srdjan m: hi! This is a known bug and there is a fix in the pipeline for it. We hope to get it out soon. Fixing this issue causes another issue which breaks access keys (Alt+Shift+..) and they don't work as expected. The challenge is to figure out which is the worse bug for our users to face. The bug is tracked in task T177509. Thanks for your time! -- NKohli (WMF) (talk) 19:34, 2 May 2018 (UTC)
Problems with grammar and spell checkers, also with other extensions. Yes I know some of them are said to be fixed. — Jeblad 23:53, 2 May 2018 (UTC)

Undo is grayed out in Firefox[edit]

When syntax highlighting is enabled the "Undo" option (in the menu that shows up when you right click on the text box in Firefox) is grayed out. It works fine with syntax highlighting off (video). – Srdjan m (talk) 06:55, 14 May 2018 (UTC)

Thanks for letting us know, Srdjan m, I filed a task here: task T198664. -- NKohli (WMF) (talk) 21:28, 2 July 2018 (UTC)

Compatibility with lesser-known web browsers[edit]

Recently, I downloaded Pale Moon v27.9.1 (latest version) browser personally because I want to experience its newer Gecko-forked engine called Goanna. I could not find any issues with CodeMirror while using older, pre-2017 editors. CodeMirror works and functions all right with the 2017 wikitext editor, but it has ghosting issues, seen at File:Pale Moon 2017 wikieditor codemirror enabled.PNG. I haven't tried out other browsers; I uninstalled Opera weeks ago because I've not used it very much and it's Gecko-based. Is CodeMirror mode geared toward Firefox and Chrome users, or is it crossplatform-friendly (well, except Microsoft browsers)? --George Ho (talk) 05:30, 17 May 2018 (UTC)

In the image, you're using the 2017 wikitext editor. Does the problem also happen on older editors? CodeMirror is sadly not very friendly with older/obscure browsers. Chrome is probably the browser it works best on. -- NKohli (WMF) (talk) 21:25, 2 July 2018 (UTC)
Before I uninstalled PaleMoon, AFAIK, Ms. Kohli, I didn't see any issues at older editors at Pale Moon. --George Ho (talk) 10:28, 17 July 2018 (UTC)

Syntax highlighting needs to be switched on every time[edit]

Hi, I need to press the syntax highlighting button every time I load/reload the editor (even when I'm previewing my edits), as it is off by default. Previously it remembered my choice, but now it doesn't and I don't know what happened. I've tried removing my js and reverting to default preferences, and I checked with both Safari and Chrome and I can't get it to remember my choice. I would appreciate some help, as I prefer to have syntax highlighting always on, as previously. Biexx (talk) 18:19, 30 June 2018 (UTC)

I opened an issue on the tracker: https://phabricator.wikimedia.org/T198537 Biexx (talk) 18:47, 30 June 2018 (UTC)
Thanks for filing the task, Biexx. We'll try to fix it as soon as possible. Interestingly, I can reproduce the problem with one of my accounts but not with my other account. -- NKohli (WMF) (talk) 21:22, 2 July 2018 (UTC)

Proofread extension broken[edit]

Suddendly Wikitext editor syntax highlighting run, and my beloved proofread extension (used to edir nsPage into it.wikisource) breaks down. Please how can I completely ignore it? Editing nsPage environment is unusable, all text editing tools don't run any more, in brief: a true disaster! --Alex brollo (talk) 16:51, 5 July 2018 (UTC)

Hi Alex brollo, I'm sorry to hear syntax highlighting breaks your workflow. You can turn syntax highlighting on and off by clicking on the pencil icon (Codemirror-icon.png) in the toolbar, if you're in the 2010 Wikitext editor. In the 2017 wikitext editor, the option is in the hamburger menu dropdown on the right. Let me know if that helps. -- NKohli (WMF) (talk) 17:01, 5 July 2018 (UTC)
@NKohli (WMF): As suddenly as the issue appeared, it vanished. Thanks. --Alex brollo (talk) 06:59, 6 July 2018 (UTC)

Retain original character weight and size[edit]

Hello. Thanks for the cool tool. A quick question/suggestion: When editing complex templates such as larger infoboxes (which often has wikicode arranged neately by adding extra -spaces- here and there), enabling syntax highlighting changes the size (or weight - i.e. bolding), causing these neatly arranged code to buckle in random places due to the content now taking up a different amount of space. Is there a way to not change the character weight/size, while only allowing the change of colour? Or maybe an option to do the same?

Separately, would it be possible to have a feature where, (again) when editing complex templates, hovering the mouse on a set of open curly brackets would highlight the corresponding close curly brackets? It would be quite helpful for template editors. We could also go further, where a set of out-of-place open/close brackets would be highlighted/underlined/coloured when there is no corresponding set of open/close brackets.

P.s. I don't use the syntax highlight feature; just thought of testing it out, and maybe use it for training prospective Wikimedians. Best regards, Rehman 04:31, 9 August 2018 (UTC)

Sorry for the late reply. I missed this post. CodeMirror, the underlying library has a bunch of issues which they are working on fixing in the next few months. It does not (to my knowledge) currently support highlighting matching brackets. As for the font changes - try using Syntax highlighting in the 2017 Wikitext Editor. It doesn't do font weight and size changes in that editor. It does do it in the standard editor because it was a requested feature. One way you can change it is by setting the CSS for those elements in your common.css to override the weight and size set by the library. Thanks for the feedback, Rehman. -- NKohli (WMF) (talk) 18:07, 10 September 2018 (UTC)