打开它说的链接一看原来是因为有的数学公式太长了，解决方法的话就是用css让公式在水平方向浮动。把css代码往上一放问题果然得到了解决。

.formula{
  width: 100%;
  overflow-x: auto
但是还有个问题是总不能我每次markdown写公式的时候都先在外面套个div吧，虽然也不是不行但是实在太繁琐了，而且也不利于文章的迁移。看来要想个办法用JavaScript自动在公式外面套上这层div。
 
通过开发者工具我们可以找到mathjax生成的公式块所在的div都有“MathJax_Display"这个css类，config=TeX-AMS_HTML 是叫这个名字，其他的配置有其对应的类名可以自行查找，比如说config=TeX-AMS-SVG 对应就是MathJax_SVG_Display。最终写出来的JavaScript脚本如下所示，在console里面也测试通过了。
 
$(function () {
    $('.MathJax_Display').wrap("<div class='formula'></div>");
});
弄到这里我自以为已经完全解决这个问题了，然后就准备bundle exec jekyll server看看效果，结果发现div没有加上去。想了一下应该是因为document ready的时候mathjax还没有把公式渲染完，所以代码失效了。所以想要代码生效就需要在mathjax渲染后调用这个函数，然后我就在mathjax的文档里面找到这样一串东西，啊哈这就是我们需要的东西啦。
 
 
One of the uses of the MathJax queue is to allow you to synchronize an action with the startup process for MathJax. If you want to have a function performed after MathJax has become completely set up (and performed its initial typesetting of the page), you can push it onto the MathJax.Hub.queue so that it won’t be performed until MathJax finishes everything it has queued when it was loaded. For example,
 
<script type="text/javascript" src="/MathJax/MathJax.js"></script>
<script>
  MathJax.Hub.Queue(function () {
    // ... your startup commands here ...
  });
</script>
所以修改后的JavaScript代码就变成下面这个样子了，测试一下效果挺好的，这个问题就算解决了。
 
MathJax.Hub.Queue(function () {
    $('.MathJax_Display').wrap("<div class='official'></div>");
});
https://docs.mathjax.org/en/v2.7-latest/advanced/queues.html
 
博客原文：如何显示mathjax渲染的超长公式
                    起因之前Google发邮件告诉我说我的博客存在移动设备易用性问题：内容超过了屏幕显示范围。然后就想着自己动手解决一下，本以为很简单结果还是花费了一番功夫。解决过程打开它说的链接一看原来是因为有的数学公式太长了，解决方法的话就是用css让公式在水平方向浮动。把css代码往上一放问题果然得到了解决。.formula{  width: 100%;  overflow-x: auto}但是还有个问题是总不能我每次markdown写公式的时候都先在外面套个div吧，虽然也不是不行但是实在太繁琐了
安装mathjax-react软件包： 
npm install --save mathjax-react
 将MathJax-full安装为兄弟依赖项。 这使捆绑程序可以摇动mathjax-full树并减小捆绑程序大小。 
npm install --save mathjax-full
 或者，使用纱线： 
yarn add mathjax-react
yarn add mathjax-full
看看我们上的 
 import * as React from 'react'
import { MathComponent } from 'mathjax-react'
class Example extends React . Component {
  render 
 react-mathjax-preview提供了一个React组件来呈现MathML，TeX或ASCIImath公式。 参见。
安装react-mathjax-preview作为依赖项：
 yarn add react-mathjax-preview
导入程序包，并用一些包含您的形式的文本填充math属性。 用$或$$包裹TeX，用`包裹ASCIImath。 按原样粘贴MathML。
 import React , { Component } from 'react'
import { render } from 'react-dom'
import MathJax from 'react-mathjax-preview'
const asciimath = '`sum_(i=1)^n i^3=((n(n+1))/2)^2`' # Becau
				
第一步 在public index.js中引入 mathjax
<script type="text/javascript" async src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.5/MathJax.js?config=TeX-MML-AM_CHTML"></script>
第二步 创建 mathjax.js 文件
// MathJax.js
let isMathjaxConfig = false// 用于标识
				
MathJax是一款运行在浏览器中的开源的数学符号渲染引擎，使用MathJax可以方便的在浏览器中显示数学公式，不需要使用图片。目前，MathJax可以解析Latex、MathML和ASCIIMathML的标记语言。
 MathJax项目于2009年开始，发起人有American Mathematical Society, Design Science等，还有众多的支持者，个人感觉MathJax
<!-- 加载 MathJax 的 JavaScript 文件 -->
<script type="text/javascript" async
  src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.4/MathJax.js?config=TeX-MML-AM_CHTML">
</script>
<!-- 创建一个 input 框 -->
<input type="text" id="math-input">
<!-- 编写 JavaScript 脚本来渲染 MathJax -->
<script type="text/javascript">
  // 获取 input 框和 MathJax 的配置
  var input = document.getElementById('math-input');
  var config = MathJax.Hub.Config({
    tex2jax: {
      inlineMath: [['$','$'], ['\\(','\\)']],
      processEscapes: true
  // 手动启动 MathJax 并将渲染后的结果插入到 input 框中
  MathJax.Hub.Queue(['Typeset', MathJax.Hub, input]);
  MathJax.Hub.Queue(function () {
    input.value = input.value;
  // 监听 input 框的输入事件，手动重新渲染 MathJax
  input.addEventListener('input', function () {
    MathJax.Hub.Queue(['Typeset', MathJax.Hub, input]);
</script>
在上面的代码中，我们将 MathJax 的配置和 input 框传递给 `MathJax.Hub.Config()` 函数，并使用 `MathJax.Hub.Queue()` 函数手动启动 MathJax 并将渲染后的结果插入到 input 框中。我们还监听了 input 框的输入事件，当用户输入时手动重新渲染 MathJax 并更新 input 框的内容。
请注意，由于 `input` 框是只读的，用户无法在其中直接输入数学公式。如果您希望用户能够在其中输入数学公式，您可能需要使用一个富文本编辑器，例如 CKEditor 或 TinyMCE，它们支持 MathJax 渲染和输入。