There are several ways you can do it.
First, you could put the \newcommand call within math delimiters at the top of the page (or anywhere before it is used), as in
\(\newcommand{ABC}{before}{after}\)
You can put that inside <div style="display:none">...</div> to prevent it from inserting any space into your document if you need to.
This requires the definition to be part of the page, but you can also arrange for it to be included as part of the configuration if you prefer.
Alternatively, you can use the Environment() command of the TeX input jax. This requires that you load the newcommand.js extension and wait for that to load before using the Enviroment() command (since it is part of that package). This is illustrated in the example below. Here, you pass the environment name, the before-text, the after-text and the number of arguments. Note that since these are javascript strings, you must double the backslashes in the before and after strings.
Hope that does the trick for you.
Davide
_____________________________
<!DOCTYPE html>
<html>
<head>
<title>Add new environments in-line and in configuration</title>
<script type="text/x-mathjax-config">
MathJax.Hub.Config({
TeX: {extensions: ["newcommand.js"]}
});
MathJax.Hub.Register.StartupHook("TeX newcommand Ready", function () {
var TEX = MathJax.InputJax.TeX; // makes it easier if you want to do several definitions
TEX.Environment("XYZ","XYZ_{\\rm before}(#1)","XYZ_{\\rm after}",1);
});
</script>
</head>
<body>
<div style="display:none">
\(\newenvironment{ABC}{ABX_{\rm before}}{ABC_{\rm after}}\)
</div>
\begin{ABC}-inbetween-\end{ABC}
\begin{XYZ}{argument}-inbetween-\end{XYZ}
</body>
</html>
_____________________________