Extension talk:CodeEditor

Previous page history was archived for backup purposes at Extension talk:CodeEditor/LQT Archive 1 on 2015-07-10.

The font size is tiny in the code editor. Much smaller than in the regular source editor, even when just toggling back and forth between them in the editor itself without reloading anything. How can this be changed, either per-user or sitewide?

A hack that I used at one time:

		$('.ace_editor').css('font-size', '0.875rem');

This sounds like a bug or broken user script/gadget in your account? If you go in an incognito browser window to https://www.mediawiki.org/w/index.php?title=MediaWiki:Mainpage&action=edit&safemode=1 (2010 wikitext editor, aka the "regular source editor") and compare it with https://www.mediawiki.org/w/index.php?title=MediaWiki:Common.css&action=edit&safemode=1 (CodeEditor) the font sizes are identical for me in Chrome, Firefox, and Safari.

Do you have the same problem if you enable 'safemode' (?safemode=1), which loads the page without your gadgets and scripts?

The text at both of those links and in the textbox I am typing in right now are all very tiny. None of them are what I see when I edit a page normally, say Extension:Buggy (where I get the font size I'm used to). And when I remove the "&safemode=1" from the end of the first URL, I see normal size text. (Removing "&safemode=1" from the second URL has no effect [text still tiny], because that is using the Code Editor.)

When I edit Extension:Buggy in safemode, I see the tiny text. Changing my browser font settings for monospace doesn't have any effect.

The only relevant gadget I have enabled is:

• [checked] Remove VisualEditor from the user interface

Relevant preferences:

• [checked] Enable the editing toolbar / This is sometimes called the '2010 wikitext editor'.
• [unchecked] Enable the visual editor
• [unchecked] Use the wikitext mode inside the visual editor, instead of a different wikitext editor / This is sometimes called the '2017 wikitext editor'.
• [checked] Enable syntax highlighting for wikitext

No user CSS or JS. I'm using the default skin, Vector (2022).

No matter what combination of the preferences and gadget I mentioned above that I try, I can't get the tiny text I see in the Code Editor.

I originally came here to report this based on my experience with a largely out-of-the-box MediaWiki installation (meaning, very few configuration changes, and none that should have any effect on this discussion) that I've been using for my own purposes for 4 years now. I just tried the Code Editor for the first time (in MW 1.41.1), and saw the tiny text for the first time. (Although, like I said, I am seeing it here in the textbox I am typing in right now).

I will point out, BTW, that as the page is loading at the 2 "safemode" URLs, I see normal sized text in the textbox, then when the editor actually finishes loading, it's the smaller size.

I remembered that I have a global.css at Meta, which explains why I was seeing the normal-size text (for me, this means 18pt) in the regular source editor (outside of safemode). Without that, I see the tiny text there, too. (Now I recall that this is why I created the global.css in the first place, back in Jan 2018.) I also have the same settings in a site-wide vector.css on my own wiki I mentioned previously. (I had forgotten about that, too, since I did that in 2020.)

I have not been able to find a way to override the font size in the Code Editor, so my original question still stands. (For the record, I have tried changing the monospace font settings on my desktop — i.e., at an even lower level than my browser — and that had no effect with respect to what we're talking about here.)

A font-size option in the editor itself (i.e., via the regular UI) would be very much appreciated (in all of the editors, in fact). I can't possibly be the only person this is an issue for. It's kind of amazing this hasn't already happened, actually. It seems like a pretty obvious accessibility thing (its necessity, I mean, not how to implement it).

The accessibility feature is built into your browser; you should use that, not hacks in global.css or other innovative ways to break the software. :-)

I assume you're talking about magnifying everything in the window (Ctrl-+). So, to get a reasonable size in the editor you're suggesting that have I have huge text everywhere else? Sorry, but that's a non-starter. What should be happening instead is, the Code Editor should give users a mechanism for setting the font size that they're looking at. That is good UI design. What exists currently is, frankly, absolute shit.

FYI, a new category has been created on Wikimedia Commons to categorize files related to this extension: commons:Category:MediaWiki extension CodeEditor.

For example:

.mainpage-columns {
	gap: 0.5em; /* unknown property 'gap', but it is actually correct "/
	grid-template-columns: [begin] 1fr [end]; /* unexpected token but it is actually valid */
}
.mainpage-columns > div {
	padding-inline-start: 1em; /* unknown property but it is actually correct */
	padding-inline-end: 1em;
}

Besides, it seems that it cannot recognize CSS variables.

I also have an example of this problem:

@media ( min-width: 43em ) {
	body.skin-vector #frame-welcome {
		background-image: url("//commons.example.net/w/images/f/f0/Background-mainpage.png");
		background-repeat: no-repeat;
		background-position: -7px -57px;
		padding-left: 156px;
		/*background-size: 190px;*/
	}

}

We're based on Ace 1.15.2 (since February 2023); latest as of today is 1.23.4. Pasting your examples into https://mkslanc.github.io/ace-playground/#hello-world doesn't error but looking at the upstream release diff it's not obvious which version has those fixes, so I made a general task asking to update to latest.

@SolidBlock, @Sokote zaman: Heads-up that I've updated us to 1.32.7, which will ship to Wikimedia production this week and in MediaWiki 1.42.0 and later.

My version is 1.40.1. No matter which version of CodeEditor I install, when editing CSS or JavaScript, the search window cannot pop up, whether I press Ctrl+F or click the toggle button with the mouse. In addition, CodeEditor also blocks the browser's built-in search window, making it necessary for me to stay out of focus every time I search.

I've found out — it was all about Gadget, not this extension!

Pressing button "Edit" on [kinda] any page with CodeEditor enabled lead me to page with damaged view, where there are coloured spots above with no code (in front of big white square) and the code is below (in a window).

MW 1.39.1. I've updated all dependencies via Composer. Can anybody suggest the reason?

Probably, it's not CodeEditor, because problem repeats after its disabling.

Getting warnings on css cases that use "initial" as value.

>Warning: Expected (left | right | center | justify | inherit) but found 'initial'.

As far as I know "initial" is still a (global) valid CSS value.

Whether its a useful value ... the opinions on that seem divided.

Tested at test.wikipedia.org with Firefox(latest version).

When you select some text, in Linux(mint 20.3) and also the default mw-source editor, You can directly paste that(or last) selected text with a middle mouse button click.

This CodeEditor does not seem to support that feature. (at least not at the above site and used browser).

Think it would be really nice if this was also possible with this CodeEditor. (if possible of course)

Clearing user preferences enabled CodeEditor when logged in.

On my own MediaWiki 1.35 installation the CodeEditor extension does not work (downloaded the newest CodeEditor and WikiEditor packages).

Here, on MediaWiki.org all extensions are installed (Special:Version), same situation, CodeEditor not appearing if you try to edit CSS, JS or Module pages, like: https://www.mediawiki.org/w/index.php?title=MediaWiki:Vector.css&action=edit

If you check Wikipedia, CodeEditor is working there: https://en.wikipedia.org/w/index.php?title=MediaWiki:Common.css&action=edit One difference could be, VisualEditor is not enabled on Wikipedia in contrast to MediaWiki.org?

What is status of this extension, if it is not even working here, on the official site?

It's working just fine for me on mediawiki.org. What browser are you using ?

Using Chrome 106.x on Windows 10. New finding: the CodeEditor appears when I log out, but again not working while logged in. Now, I´ve reset my User Preferences bringing CodeEditor back to work(!).

Are there any settings/Gadgets colliding with the CodeEditor? As I still cannot figure out why it might not work on my own Wiki installation after updating.

This sounds like a user script or a gadget getting in the way yes. Easily confirmed by visiting https://www.mediawiki.org/w/index.php?title=MediaWiki:Vector.css&action=edit&safemode=1 which uses a flag to temporarily disable scripts and gadgets.

You might want to look at your browser's console for any errors. See Help:Locating broken scripts

CodeEditor magically reappeared on my Wiki installation, resetting User preferences and clearing the cache might have helped, not really obvious. Also there were no particular errors in debug console.

Thanks for the hints.

Now documented and fixable in css or js.

Hi, I added a custom booklet section to the WikiEditor toolbar. Unfortunately, when CodeEditor hides the default WikiEditor sections (advanced, characters and help), it additionally hides everything under the element with the "sections" class, which is exactly where WikiEditor has reserved space for booklet-related content (collapsed by default). Users can see the button on the toolbar, but the booklet itself remains hidden whatever you do. In order not to kill functionality, it seems best to be more discrete and just hide the specific booklets for the advanced, characters and help sections.

I just noticed that someone else had bumped into what appears to be the same issue: https://phabricator.wikimedia.org/T284791

An easy css fix would be to replace `.codeEditor-ui-toolbar .sections` in in jquery.codeEditor.less with `.codeEditor-ui-toolbar .sections .section-advanced, .codeEditor-ui-toolbar .sections .section-characters, .codeEditor-ui-toolbar .sections .section-help`.

I don't see a particular reason why only those 3 should be hidden. There is a chance that implementing it like that would cause posts here with "why is it not hiding my custom booklet"... For whatever is written, someone might just as much expect the opposite.

You can of course always just locally override any CSS.

I'm not sure why it should hide things like characters at all, but you're right that use cases differ from one wiki to another. Anyway, it's good to have this on record if anyone else bumps into the same issue (although I can't find the search feature for this issue board). Will close.

Hi everybody,

i have installed the extension, but it only works, when editing.

This means, if i use "insert codeblock" the syntaxhighlighting and linenumber is shown correctly. After saving there is no syntaxhighlighting, the linenumbers are not displayed and the wikipage is categorised in "pages with syntax highlighting errors".

The only thing, that is written on the page is:

<syntaxhighlight lang="python3" line="1" start="55">

def quick_sort(arr):

   less = []

   pivot_list = []

   more = []

   if len(arr) <= 1:

       return arr

   else:

       pass        

</syntaxhighlight>

Hey there, this is the talk page for the "CodeEditor" extension that provides syntax highlighting for certain code pages when you edit, as you say.

The syntaxhighlight feature, which shows syntax-highlighted code blocks in wikitext pages, is provided by Extension:SyntaxHighlight.

@Jdforrester (WMF): Thank you :)