# MathJax Buttons

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 H2O 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: - Can I use this script on website other than stackexchange? What kind of modifications are needed if it is possible? – LifeH2O Nov 26 '13 at 11:29 @LifeH2OYou would need to find out another place for the buttons to be kept. In addition, you would have to remove the StackExchange specific code in the keyboard event handler. – Manishearth Nov 26 '13 at 12:59 Is there anyway I can just use editor on math.stackexchange on my site. Both PageDown/WMD and MathJax are available separately. Is the combination which is (probably) used on math.stackexchange available for to use? – LifeH2O Nov 26 '13 at 13:06 @LifeH2O No, I've used ... and$$..$$. For EE.SE the dollars must be slash-escaped. Re:Math.SE: I don't know, just loading PageDown/WMD/Mathjax should do – Manishearth Nov 26 '13 at 13:08 My apologies. I actually tested this kodershaven.blogspot.com/2011/10/adding-mathjax-toolbar.html and it has those issues. Now going to try yours. – LifeH2O Nov 26 '13 at 13:17 add comment ## 6 Answers 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)  - I shall make a matrix and add it to the Git Wiki once I finish processing these sites – Manishearth May 5 '12 at 15:46 add comment 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.

-
Aah. electroniCS.stack. Exactly why I kept the "stack" in the regex--"cs" is too short and will match half the SE universe (I'll improve the regex). EE.SE wasn't supposed to get the NP button(you can keep it if you guys do use mathsf like the CS folks though) –  Manishearth May 8 '12 at 2:20
Being an amateur programmer, any best-practice tips are really appreciated by me--I've never formally learnt programming(and never had a codereview) so my code tends to be icky sometimes. I never thought I'd need different dollar signs, since I never thought about SE sites that talk about both moolah and math ;-). Interesting concept, and definitely makes it more customizable. –  Manishearth May 8 '12 at 2:30
Later on I'll remove the dollar literals and add an if at the beginning which sets them based on the site. Also, I'm planning to remove everything from the window global object and adding it to some other MathJaxButtons object for cleanliness. Thanks for the code review !:D –  Manishearth May 8 '12 at 2:30
Oh, yeah, and the mathsf-looks-bad isn't your fault either, mathjax uses its own fonts. The font does look like that -- the CS folks use it in allcaps which looks OK. By the way, did you see what Alt-Z does? It may not be useful in your site (it's extremely useful in conjunction with the custom buttons), but since there is no button for, it may escape,your mind. Do you know any way to make this functionality (just a hotkey, no button) evident to others without cluttering the buttonbar with another button? –  Manishearth May 8 '12 at 2:37
Changes made. Now it supports random delimiters, and also I put everything in a wrapper object. –  Manishearth May 8 '12 at 11:35

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.
-

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
-

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.

-
Well, many SE sites have mathjax built in soit's easier to just use it. In fact, we convert subsups to mathjax--it's easier to read. Since everyone is using MJ anyway, it's better to make life easy for them. And trust me, these have been extremely useful to me on chem.SE :) –  Manishearth May 15 '12 at 18:31