Hide render statusbar

You can turn off the messages at the bottom of the page by using

<script type="text/x-mathjax-config">
MathJax.Hub.Config({
  messageStyle: "none"
});
</script>

prior to the script tag that loads MathJax.js in your page.

The grey text comes from the preview that tex2jax sets up during the pre-processing phase. You can prevent that using

<script type="text/x-mathjax-config">
MathJax.Hub.Config({
  tex2jax: {preview: "none"}
});
</script>

Note that you can combine these into a single block:

<script type="text/x-mathjax-config">
MathJax.Hub.Config({
  messageStyle: "none",
  tex2jax: {preview: "none"}
});
</script>

Note, however, that the original math will be visible (in black) until MathJax loads and runs. That is because the math is part of the text of the page until MathJax's tex2jax preprocessor removes it and converts it to the internal structure that MathJax will eventually typeset. So it will be visible as part of the page until then.

To avoid that, you would either have to put the math into MathJax's internal format initially (so that it is not part of the text of the document that gets displayed), or put it in wrapper elements that have CSS that hide the math until MathJax is done typesetting (at which point you change the CSS so it is displayed), or you hide the entire page until the math is typeset. See the processing model documentation for details about the first of these. For an example of the third form, see this example, but note that this is useful only if the page doesn't contain much math (otherwise the page will be blank for a long time before it shows up).

Hope that helps.

Davide