WMDE Technical Wishes/Bracket Matching

Summary

Bracket matching is a common feature of text editors for writing source code, but is currently missing from Wikipedia's wikitext editors. The feature highlights pairs of brackets, so that editors can more easily navigate through source code and find any improper or missing matching. It’s particularly useful for nested statements, which are very common in template source code.

Background

Using the Syntax Highlighting

Syntax highlighting can be turned on and off in the 2010 wikitext editor using the highlight icon in the toolbar:

Syntax highlighting can be found in 2017 wikitext editor under the ‘hamburger menu’ and is by default already turned on:

In 2019 the community of the German Wikipedia voted the topic area “Make working with templates easier” as the area where technical improvements are most urgent. Therefore, the Technical Wishes team of Wikimedia Deutschland are working on improvements in this area for two years. More background and further projects can be found here.

The syntax of writing templates in wikitext has grown historically and contains a lot of curly braces ({{}}), making it hard to read and very difficult to work with. The onwiki source editors are primarily made to support writing articles in wikitext and are missing features which help programmers write in source code. Bracket matching is a step towards making working with complex syntax easier in these editors. It was asked for repeatedly by people of the communities, is a proven feature and comparably easy to implement.

Implementation

Bracket matching in a nested template

This feature will be integrated into the existing syntax highlighter, which is provided by the CodeMirror extension. The syntax highlighter is already available in both the 2017 wikitext editor and the classic 2010 wikitext editor. Currently, it highlights text with different colors, depending on the type of content. Bracket matching will be active in both editors when syntax highlighting is turned on, in any namespace using these editors.

Features

When the cursor is next to a bracket, both matching brackets are highlighted with a gray background. If the cursor is at an arbitrary position inside two brackets the innermost of the surrounding brackets will be highlighted (section highlighting).

Based on received feedback the gray background will be made more subtle and the font color of the highlighted pairs of brackets will remain unchanged. This is to ensure that the cursor next to the highlighted brackets is clearly visible.

Types of brackets that can be highlighted: curly, round and square – {}, () and [].

Related gadgets and scripts

There are some existing, community-developed tools which also provide wikitext highlighting. When using any of these or other editors, you will not get access to this feature. This includes:

• Remember the dot/Syntax highlighter
• Schnark’s highlighting (improved version of Remember the dot)
• WikiED (full editor which includes highlighting)
• AceWikiEditor (disabled 2014)

Limitations

• Bracket matching does not work on right-to-left wikis because Syntax Highlighting is not supported on RTL wikis. (T170001)
• Bracket matching requires JavaScript because the existing syntax highlighter requires JavaScript.

Status and Roadmap

• Done: Development started in September 2020.
• Done: January 27, 2021: Deployment on dewiki, cawiki and trwiki
• Done: March 18, 2021: Refinement of bracket matching styling
• Done March 24, 2021: Deployment on group 0 (incl. mediawiki.org and testwiki) and on Wiktech
• More wikis to follow in the course of the year.

Links

• CodeMirror extension
• Wikitext syntax highlighting (Community Tech project page)
• Template project page

Feedback

We are interested in any kind of feedback – please post it on the discussion page.