CodeMirror and PG

Do you edit PG problems using the WeBWorK interface? Do you have trouble finding missing semi-colons because the error line numbers are wrong? Do you grind your teeth every time you try to tab in the editor and you lose focus on the text box? Then this post is for you!

The classic editing environment in all of the WeBWorK PG editors is nothing more than a HTML <textarea>. This leaves a lot to be desired. It doesn't have line numbers, it doesn't have any code coloring, and if you tab you leave the textarea. In an upcoming update we will replace the textarea editor with a CodeMirror based one. CodeMirror is a Javascript based editor that supports coloring, line numbers, regex based search and replace, and many other features. Rather than just posting a screen shot, I've included a functional version of the editor below.

Lets go through some of the new features. Feel free to experiment and explore with the demo above as you follow along.

Coloring

First, notice that the editor supports code coloring. Most of the code coloring is perl based, however there are a couple of twists. You may notice that both the BEGIN_TEXT/END_TEXT block and the BEGIN_PGML_SOLUTION/END_PGML_SOLUTIION blocks are colored. There have been PG specific upgrades to the coloring code which highlight variables, latex, ascii math, as well as command subsitution in both the classical EV3 blocks as well as newer PGML blocks. The PGML coloring in particular is fancy since it correctly colors nested blocks.

Line Numbers

One nice addition is line numbers. However, another behind the scenes upgrade is a fix to a long standing bug which caused the line number errors in PG error messages to not match the line numbers in the original code. So now if you miss a semicolin somewhere in your code, the perl error line number should be closer to the actual error.

Search and Replace

Changing over to a Javascript editor means that the browser based find function no longer interacts with the editor. Luckily the Codemirror editor has its own search and replace functionality which is even more powerful than the browser search. For example, use Ctl-F and search for Text. You should see the words heighlighted as well as indications on the scroll bar. Next do a search replace with Shift-Ctl-F and search using the Regular Expression /\[`([^`]+)`\]/ and replace with [``$1``]. This will replace all regular PGML Latex with display style PGML Latex. These sorts of Regular Expression manipulations can be really powerful once you get used to them. You can read more here if you haven't seen them before.

Trailing Spaces

In PGML spaces matter. You leave two trailing spaces on a line to create a newline and you leave three to have a new paragraph. Since you can't usually "see" trailing spaces when in a PGML block the editor will highlight trailing whitespace with a red line.

Tabbing and Brackets

A couple of other common code editor features that are included are bracket matching and tabbing. When you type or move past brackets the matching bracket will be highlighted. When you press tab a soft tab consisting of four spaces will be generated. Finally when you are on a tabbed line and create a new line it will automatically start with the same indentation as the previous one.

There are other features that could be added, if there ends up being enough interest. The most interesting, but also the most complicated, would be a autocompletion. The main issue with this feature is it would have to be aware of what macros were loaded, and if the macros ever changed then the code completion might be wrong. Another potential edition would be true smart tabbing which would try to parse the code and only insert tabs when appropriate.