WMDE Technical Wishes/Bracket Matching

Bracket Matching
Status	Deployed
Focus area	Templates
Responsible	Technical Wishes Team

Summary

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

Background

Using syntax highlighting

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

Syntax highlighting is available in the 2017 wikitext editor under the ‘hamburger menu’ and is turned on by default:

In 2019 the community of the German Wikipedia voted the topic area “Make working with templates easier” as most urgently needing technical improvement. As a result, the Technical Wishes team of Wikimedia Deutschland have been working on improvements in this area for two years. More background and further projects can be found here.

Wikitext syntax for writing templates has grown over a long period of time and contains a lot of curly braces ({{}}), making it hard to read and very difficult to work with. Onwiki source editors mainly support writing articles in wikitext and lack features to help programmers write source code. Bracket matching is one step towards making complex syntax work in these editors easier; it has been repeatedly requested by members of the community and is a proven feature that's comparatively easy to implement.

Implementation

Bracket matching in a nested template

This feature will be integrated into the existing syntax highlighter provided by the CodeMirror extension. The syntax highlighter is already available in both the 2017 wikitext editor and the classic 2010 wikitext editor. The functionality currently highlights text in different colors based 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. When the cursor is inside any bracket pair, the innermost pair of the surrounding brackets is highlighted (section highlighting).

Based on feedback, the team will make the gray background more subtle while leaving the font color of the highlighted bracket pairs unchanged. This ensures that the cursor next to the highlighted brackets is clearly visible.

The highlighter will act on curly, round and square brackets: {}, () and [].

Related gadgets and scripts

Some community-developed tools also provide wikitext highlighting. When you use the following editors (and other similar ones), you will not see this new bracket matching feature. This includes:

• Remember the dot's 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 CodeMirror is not supported on RTL wikis. (T170001)
• Bracket matching requires JavaScript, because the existing syntax highlighter itself requires JavaScript.

Status and Roadmap

• Done: Development started in September 2020.
• Done: January 27, 2021: Deployment on
  • German Wikipedia
  • Catalan Wikipedia
  • Turkish Wikipedia
• Done: March 18, 2021: Refinement of bracket matching styling
• Done March 24, 2021: Deployment on
  • group 0 (incl. mediawiki.org and testwiki)
  • Wikitech
• Done: March 9, 2022: Deployment on all remaining wikis except English Wikipedia
• Done: March 16, 2022: Deployment on English Wikipedia

Links

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

Feedback

We are interested in any and all feedback! Please post it on the discussion page.