38

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:

enter image description here After: enter image description here

Dollarify

Before:

enter image description here

After: enter image description here

SI-ify

Before:

enter image description here

After (first dollarifying, then SI-ifying)

After: enter image description here

17
  • Can I use this script on website other than stackexchange? What kind of modifications are needed if it is possible?
    – LifeH2O
    Nov 26, 2013 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. Nov 26, 2013 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, 2013 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 Nov 26, 2013 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, 2013 at 13:17
  • Recently my chrome-browser refuses to enable the script, because it is not from the store. Browsing the google, did not find me a solution in how to use a custom built extension. Do you have any workaround for that? Or could you make it available via the chrome store? Jun 26, 2014 at 7:43
  • @Martin check the full step-by-step link in the installation portion of this post. I may make it a web store app once I clean up some of the code. Jun 26, 2014 at 8:55
  • @Manishearth The installation is absolutely not the problem. It is a new feature of chrome that hard-disables the script. When I try to run it with tempermonkey, the whole toolbar is gone. Jun 26, 2014 at 9:23
  • @Martin you have to install it in developer mode then. I'll try to get this on the store when my schedule settles down Jun 26, 2014 at 9:44
  • Well, i tried that, but chrome still refuses. Upon restart it was deactivated again even in developer mode. Jun 26, 2014 at 9:58
  • The spaces behind the thousand separators are not perfect, you can use {,} to avoid that space. Maybe the script could take care of that as well. Jul 24, 2014 at 19:50
  • 1
    No matter what you say, "Ugly" and "Pretty!" are both ugly. :P Sep 6, 2014 at 18:03
  • Is it planned to publish this on Chrome Webstore? Recently the similar thing for Mathematica.SE was published on Chrome Webstore.
    – user13993
    Jul 25, 2015 at 19:19
  • 1
    @Manishearth Please note that, according to the SI rules as well as ISO standards, where such separation into groups of three digits is used, the groups shall be separated by a small space ($350\,000\,000\:\mathrm{m/s}$) and not by a comma or by any other means.
    – user29677
    Sep 21, 2015 at 16:07
  • 1
    Manish, I'm having trouble getting this to work lately. Firefox 43.0.4 with Greasemonkey and Chrome 47.0.2526.106 with Tampermonkey both show no buttons at all on the editor (ubuntu 14.04). I don't really use it much anymore but it would be good to spiff the ad back up - if the script is still working.
    – E.P.
    Jan 18, 2016 at 20:21

7 Answers 7

3

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)
1
  • I shall make a matrix and add it to the Git Wiki once I finish processing these sites May 5, 2012 at 15:46
3

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
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:
screenshot with disappeared buttons and preview

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

3
  • I'm not sure why this happens, and it's been a while since I tested this script (also too busy to fix it). I suspect the fix can be done by using the improved code for adding buttons to the editor from here, which uses creation callbacks Apr 10, 2015 at 22:10
  • @Martin: Did you manage to get the script running?
    – lcnittl
    Feb 28, 2016 at 11:56
  • @lcnittl no. I use different commands all the time and as I have to type them out, I stopped looking into it. Feb 28, 2016 at 13:17
1

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.

enter image description here

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.

5
  • 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) May 8, 2012 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. May 8, 2012 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 May 8, 2012 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? May 8, 2012 at 2:37
  • Changes made. Now it supports random delimiters, and also I put everything in a wrapper object. May 8, 2012 at 11:35
1

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

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.

2
  • 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 :) May 15, 2012 at 18:31
  • The chemical equations part is no longer relevant, really. mhchem is 100x better than manually saving AHK inserts - in fact, \ce typesets chemical equations almost naturally as you would type them. It's briliant! :D Jun 14, 2018 at 6:16

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .