完全なメモ。CSSで次をあてるといける。

p.mathjax--block {
  overflow-x: auto;
}

ソース見たらすぐわかることですがgravのmathjaxプラグインではmarkdownからhtmlにレンダリングする段階で次の3種を使うようです。

p.mathjax {}
span.mathjax {}
p.mathjax--block {}
span.mathjax--inline {}

まあだからインライン数式にmathjax--inline、ディスプレイ数式にmathjax--blockを貼ります。また数式のインラインorディスプレイに関わらず.mathjaxというクラスをつけてます。なるべくいらん要素に効かないように上記ではp.mathjax--blockを使いました。

当然背景なんかもカスタマイズできますね。これを使うと。

あとはMathjaxのレンダリング後のタグdiv.MathJax_SVG_Displayにあてるというのもありますが、SVGとかついてるあたり見るからにMathjaxの設定変えるとあたらなくなるのでやめました。

gravのCSSのあてかた

gravでカスタムCSSをあてるには、user/themes/themename/cssに例えばcustom.cssなんかがあればこれに追加の書き込みをします。当然themenameはアクティブなテーマの名前です。gravではAssetsのストリーム化をOnにしておくと全てのcssをCMS側でまとめて1つのCSSにするのでソース見てもcustom.cssでそこだけ変えている感は出ません。

bootstrapを使っていてSCSSからカスタマイズをしているならそのscssに追記してからコンパイルしてアップロードしても良いでしょう。

以上。