MathJax Buttons

Question

Adds some math/science buttons to the editor on science SE sites. These buttons are useful for converting selected text to math, formatting SI units, and formatting chemical equations. There are also keyboard shortcuts for them, which are IMO more useful than the buttons themselves.

(The SI units and chem buttons are only enabled on certain sites)

Currently, it runs on the SE sites listed on the site matrix here.

There also is an exit-inline-math-mode hotkey (Alt-Z). This one moves the cursor just after the next instance of $. It's useful if you want to keep the flow of typing. For example, on Chem.SE, formatting H₂O becomes Alt-C+type H2O+Alt-Z and you can immediately continue typing(no need to rightarrow-out of math mode). On CStheory/CS, typing "I like NP-complete problems!", where "NP" is sansserif, becomes: type 'I like'+Alt-S+type NP+Alt-Z+type '-complete problems!'. Once you're used to the shortcut, typing math fluidly becomes much easier!

If you want your mathjax-enabled SE site to be supported, please let me know!

My long term goal is to make this script a part of it (I'm still working on that script, though--so it will be a while)

Installation

• Click here to install (requires Greasemonkey on Firefox). If you have trouble installing (like the Chrome blocking), or if you wish to install it on another browser, please see here for full step-by-step instructions on installation.

• Source

Buttons supported

Dollarify ($)

• Encloses selection in $...$
• Enabled on all supported sites
• Keyboard shortcut: Alt-M

Double Dollarify ($$)

• Encloses selection in $$...$$
• Enabled on all supported sites
• Keyboard shortcut: Alt-D

SI-ify (SI)

• Encloses selection in \:\mathrm{...} (upright text with an extra separator space for SI units)
• Enabled on Physics,Chemistry, and Biology
• Keyboard shortcut: Alt-S

chem-ify (O2)

• Encloses selection in $\ce{...}$ (mhchem chemical equation formatter)
• Use the $ button on the \ce'd text to make this a block element (use Alt-M)
• Enabled on Chemistry only
• Keyboard shortcut: Alt-C

(Full button list below for more site-specific buttons)

Screenshots

Chem

Before:

After:

Dollarify

Before:

After:

SI-ify

Before:

After (first dollarifying, then SI-ifying)

After:

Answer 1

Place to dump list of all mathjax sites.

I will take a look at these and determine which configuration to give to each one, and if they need extra buttons.

http://stats.stackexchange.com              Dollars (Implemented 1.0.3)
http://meta.stats.stackexchange.com         Ditto
http://math.stackexchange.com               Dollars only(implemented)
http://meta.math.stackexchange.com          Dollars only(implemented)
http://cstheory.stackexchange.com           Dollars,big O, ans-serif(implemented 2.2) 
http://meta.cstheory.stackexchange.com      Ditto   
http://electronics.stackexchange.com        Dollars and SI (implemented)
http://meta.electronics.stackexchange.com   Ditto   
http://physics.stackexchange.com            Dollars and SI(implemented). Also `\mathbf{..}` (1.0.3).
http://quant.stackexchange.com              Dollars. Implemented 1.0.3
http://meta.quant.stackexchange.com         Dollars. Implemented 1.0.3
http://crypto.stackexchange.com             Dollars and $\mathcal{O}(...)$?
http://dsp.stackexchange.com                Dollars (implemented 2.0.0)
http://scicomp.stackexchange.com            Dollars (implemented 2.2.2)
http://mathematica.stackexchange.com        Dollars (implemented)
http://cogsci.stackexchange.com     Dollars (implemented 2.1.1)
http://cs.stackexchange.com         Dollars,big O, ans-serif(implemented 2.2) 
http://chemistry.stackexchange.com          Dollars,SI,chem(implemented)

Answer 2

Full list of supported buttons:

Buttons used in many sites

Dollarify ($)

• Encloses selection in $...$
• Enabled on all supported sites
• Keyboard shortcut: Alt-M
• Works differently on electronics.SE (gives \$...$\ because these people talk about money as well and mathjax needs escaping)

Double Dollarify ($$)

• Encloses selection in $$...$$
• Enabled on all supported sites
• Keyboard shortcut: Alt-D

Exit math mode

• Not an actual button, only a hotkey
• Enabled on all supported sites
• Finds the next dollar symbol and puts the cursor ahead of it. Useful to keep the flow of typing.
• Keyboard shortcut: Alt-Z

SI-ify (SI)

• Encloses selection in \:\mathrm{...} (upright text with an extra separator space for SI units)
• Enabled on Physics, Chemistry, and Electronics
• Keyboard shortcut: Alt-S

Big O notation (only a hotkey)

• Encloses selection in $\mathcal{O}(...)$
• Enabled on Crypto.SE, CS.SE, and cstheory.SE only
• Keyboard shortcut: Alt-O

Sans-serif (NP)

• Encloses selection in $\mathsf{...}$
• Enabled on CS/CStheory.SE only
• Keyboard shortcut: Alt-S

---

Site-specific buttons

chem-ify (O2)

• Encloses selection in $\ce{...}$ (mhchem chemical equation formatter)
• Use the $ button on the \ce'd text to make this a block element (use Alt-M)
• Enabled on Chemistry only
• Keyboard shortcut: Alt-C

Vector Fields(E)

• Encloses selection in \mathbf{...}
• Enabled on Physics.SE only
• Keyboard shortcut: Alt-V

Dirac-ify (〈 | 〉)

• Encloses selection in \langle ... | or | ... \rangle
• Enabled on Physics.SE only
• Keyboard shortcuts: Alt-B for bra and Alt-K for ket

Answer 3

I'd like to report a bug. I think I pointed that out already earlier, but since we are at version 3 now I thought I give it another try. (I have no idea about scripting this in the first place.)

Buttons and preview disappear when running the script. Here is a screenshot to illustrate the problem:

I am running it on Windows 7, Chrome 41.something with Tampermonkey v3.10.60.

Answer 4

Great script! However, I've got a bug report:

On Electrical Engineering, where the $ button creates \$ braces (thanks for that exception, by the way), the SansSerif button still creates $ braces, which do not work.

I'm not sure what makes the Sans Serif font look so bad, it may be an issue with the configuration on my machine. Don't worry about that, it's not your problem.

This seems to be caused by line 108, the initialization for window.buttonconfig:

"6 (SansSerif)":['NP',clickButtonEventLambda("$\\mathsf{","}$"),"serify","","s",/(cstheory|cs\.stack)/ig,"","Enclose selection in $\\mathsf{..}$"],

A quick fix would be to add Electronics to the ignored sites for this button and create a new button for Electronics SansSerif:

-    "6 (SansSerif)":['NP',clickButtonEventLambda("$\\mathsf{","}$"),"serify","","s",/(cstheory|cs\.stack)/ig,"","Enclose selection in $\\mathsf{..}$"],
+    "6 (SansSerif)":['NP',clickButtonEventLambda("$\\mathsf{","}$"),"serify","","s",/(cstheory|cs\.stack)/ig,"/electronics/ig","Enclose selection in $\\mathsf{..}$"],
+    "7 (ElectronicsSansSerif)":['NP',clickButtonEventLambda("\\$\\mathsf{","}\\$"),"serify","","s",/electronics/ig,"","Enclose selection in \\$\\mathsf{..}\\$"],

I think I've got all the \ escapes correct there, but be sure to check before pushing the change.

---

Feel free to ignore what follows, just some rambling thoughts after reading the code:

If you want to fix this more thoroughly, then a refactoring of the code would be helpful. You have a ton of static strings in the script. This makes it harder to modify and makes it more difficult to deal with exceptions. If you modified the code to create a static string like inlineDelimiter and displayedDelimiter for $ and $$ respectively, you could select that delimiter in one place for each site and then use it in multiple places (like dollarify and serify). It could be used for both functions, for the callbacks, and for the tooltips. If you wanted to be extra future-proof, you could have right and left delimiters; MathJax supports eg. \( .. \) as delimiters. In fact, the defaults for MathJax are $$...$$ and \[...\]for displayed mathematics, and \(...\) for in-line mathematics per http://www.mathjax.org/docs/2.0/start.html?highlight=delimiters#tex-and-latex-input. The defaults are $$..$$ and $..$ for Stack Exchange.

This is natural in some languages like C and C++ where you have to allocate storage for a string, but more difficult in languages like Javascript which make it easy to declare a string anywhere. To be clear; I'm a C developer and this would be an antipattern in C. I have no idea if it's a good or bad idea in Javascript, the language certainly makes it easy to do, it's quite readable as written, and the costs of concatenating the strings at runtime and the extra download size from the added lines aren't issues in C. It's also quite likely that this sort of future-proofing is completely unnecessary for a little script like this. You may want to consult a Javascript developer (not me!) before proceeding.

Answer 5

Version history:

1.0

• 1.0.1: Fix the \ce{} highlighting bug. It now highlights properly even when you haven't selected anything. (Makes it useful to just hit Alt-C/whatever and start typing the formula)
• 1.0.2: Add electronics.SE (with config $,$$,SI--special treatment of $ due to EE.SE requiring backslashes). Also crypto.SE (config $,$$, O--big O notation)
• 1.0.3: Add stats.SE, quant.SE. Also a vector-field button to Physics.SE.

2.0

Now does not need to be updated, will fetch script once every day(it relies on your browser cache to not re-fetch, it reloads a new script by modifying a query string).

• 2.0.0: add dsp.SE ($,$$)
• 2.1: Tooltips huzzah!
• 2.1.1: add cogsci.SE (dollars)
• 2.2: Add an enter-exit math mode shortcut (Alt-Z). Extremely useful when keeping the flow of typing
• 2.2.0: Add cstheory.SE and CS.SE (dollars, $\mathsf{...}$, and big O)
• 2.2.1: Stupid firefox doesn't support window.location.origin
• 2.2.2: Add scicomp($,$$). Improve internals-- Inline math/block math delimiters are more easily specified. Also, the entire script is wrapped in the MathJaxButtons object, now nothing is directly in the window object.

Answer 6

Meta-notices for this:

(just for me to keep track)

• https://physics.meta.stackexchange.com/questions/1233/math-and-si-formatting-buttons
• https://chemistry.meta.stackexchange.com/questions/70/mathjax-formatting-buttons-for-you
• http://meta.math.stackexchange.com/questions/4111/mathjax-formatting-buttons-for-you-guys
• https://electronics.meta.stackexchange.com/questions/1106/mathjax-hotkeys-script-for-chrome-and-firefoxgreasemonkey (Slightly crazy, but nice)
• https://quant.meta.stackexchange.com/questions/297/mathjax-hotkeys-for-chome-and-firefox
• https://dsp.meta.stackexchange.com/questions/176/mathjax-buttons-hotkeys-script
• https://cogsci.meta.stackexchange.com/q/306/701
• https://cstheory.meta.stackexchange.com/q/1521/9327
• https://cs.meta.stackexchange.com/q/334/1400
• https://scicomp.meta.stackexchange.com/questions/285/mathjax-buttons-hotkeys-script
• https://mathematica.meta.stackexchange.com/questions/389/mathjax-buttons-hotkeys-script

Answer 7

I hope this isn't considered hijacking, but if you're just putting units and chemical formulas in plain text, you can use Unicode instead of MathJAX. In Windows, I use a lot of shortcuts in AutoHotkey to make it easy to type:

The resistor is 10 kohm +-10% becomes "The resistor is 10 kΩ ±10%" as I type.

I poured CuSOsub4 into Hsub2←O becomes "I poured CuSO₄ into H₂O".

I don't type chemical equations much, so this is a little clunky, but you could easily create shortcuts for common things, so that h2o instantly becomes "H₂O".

And this method works the same way in any text field in any application, not just on Stack Exchange.