MathJax snippets for editor?

Question

Often when typing lengthy equations in answers, I want to align them properly. This can be easliy achieved with a

\begin{align*}...\end{align*}

block, but typing it repeatedly, for example when I want to put some text in between two lengthy equations, is quite tedious especially since the preview doesn't work while missing an \end or if there's something wrong with the alignment operators (& \\). I think it would be very useful to increase accessibility of such environments (pmatrix is another one I can think of right now) because MathJax-Newbies may not even know about them and they can greatly improve readability.

I propose to add some kind of MathJax-snippet button to the post editor (Questions and Answers) to allow for quick insertion of such snippets and maybe as a bonus symbols like $\Rightarrow$ or $\cdot$. Note that I'm not thinking about a WYSIWYG style editor buy rather some shorthands for the existing one.

Answer 1

I'm actually working on a markdown+mathjax editor (that also compiles to LaTeX) that has this kind of functionality. It is very buggy and not ready to be tested yet, but if you are little bit comfortable with bookmarklets (and maybe a little bit of coding experience), you could make you're own solution. The script you see below gives some very basis autocorrect functionality which you can try to customize if you want. What it does now is converting \align to \begin{align*} \end{align*} where the caret is correctly placed so that you can directly start typing.

1. Copy the script below to the input box at this website.
2. Customize the shortcuts if you want to.
3. Press Get Bookmarklet
4. Select the code in the output field (press ctrl+a or command+a).
5. Drag the selected code to your bookmark bar (press ctrl+shift+b if you don't have a bookmark bar).
6. Click the bookmarklet when you are typing a question answer at MSE.

The script:

jQuery.fn.autocorrect = function(options)
{
    if ("text" != jQuery(this).attr("type") && !jQuery(this).is("textarea"))
    {
        return;
    }
var defaults = {
        corrections: {
            f: "\\frac{}{}",
            t: "\\text{}",
            align: "\\begin{align*}\n{}\\end{align*}\n",
            M22 : "\\begin{pmatrix}\n{} &  \\\\\n & \n\\end{pmatrix}\n"
    }
};
if (options && options.corrections)
{
    options.corrections = jQuery.extend(defaults.corrections, options.corrections);
}
var opts = jQuery.extend(defaults, options);
getCaretPosition = function(oField)
{
    var iCaretPos = 0;
    if (document.selection)
    {
        var oSel = document.selection.createRange();
        oSel.moveStart("character", 0 - oField.value.length);
        iCaretPos = oSel.text.length;
    }
    else if (oField.selectionStart || oField.selectionStart == "0")
    {
        iCaretPos = oField.selectionStart;
    }
    return (iCaretPos);
}
function setCaretPosition (oField, iCaretPos)
{
    if (document.selection)
    {
        var oSel = document.selection.createRange();
        oSel.moveStart("character", 0 - oField.value.length);
        oSel.moveStart("character", iCaretPos);
        oSel.moveEnd("character", 0);
    }
    else if (oField.selectionStart || oField.selectionStart == "0")
    {
        oField.selectionStart = iCaretPos;
        oField.selectionEnd = iCaretPos;
    }
}
this.keyup(function(e)
{
    if (32 != e.keyCode)
    {
        return;
    }
    var caretPosition = (getCaretPosition(this) - 1);
    if (1 > caretPosition)
    {
        return;
    }
    var valueOfField = this.value;
    var stringUptoCaretPosition = (valueOfField).substr(0, caretPosition);
    if (" " == stringUptoCaretPosition.charAt(caretPosition - 1))
    {
        return;
    }
    var beginIndex = stringUptoCaretPosition.lastIndexOf('\\');
    if (beginIndex < stringUptoCaretPosition.lastIndexOf(' '))
    {
        return;
    }
    var stringToSearch = stringUptoCaretPosition.substring(beginIndex+1);
    var stringNotToSearch = stringUptoCaretPosition.substring(0, beginIndex);
    if (!opts.corrections[stringToSearch])
    {
        return;
    }
    var stringToReplace = opts.corrections[stringToSearch];
    stringUptoCaretPosition = stringNotToSearch+ stringToReplace;
    var stringFromCaretPositionUptoEnd = (valueOfField).substr(caretPosition+1);
    this.value = (stringUptoCaretPosition + stringFromCaretPositionUptoEnd);
    if (stringToReplace.indexOf("{}")!=-1 )
    {
    setCaretPosition(this, stringUptoCaretPosition.indexOf("{}")+1);
    }
    else { setCaretPosition(this, stringUptoCaretPosition.length);}

});
};
$(document).ready(function()
        {
            $("textarea").autocorrect();
            $("input").autocorrect();
});