The mathjax env is not working with the list env

[quxiaofeng]

The tufte-jekyll theme is not working well when there are both list and mathjax equations in the same post.

Here is an example.

http://www.quxiaofeng.me/optimization/2015/07/17/augmented-lagrangian-method/

And the source:

https://raw.githubusercontent.com/quxiaofeng/optimization/master/_posts/2015-07-17-augmented-lagrangian-method.md

The major problem is that the width of mathjax div is 100% of the page.

And the sitenote in the last paragraph is out of the page below the footer.

Could you please help me check this?

[clayh53]

I will check it out and see if I can fix it. I suspect that as you mentioned, the mathjax div is 100% and it is pushing everything else down. I may need to create a wrapper div for the mathjax expressions.

[quxiaofeng]

I have tested for different conditions. There are problems in following conditions in this post: https://github.com/quxiaofeng/optimization/blame/master/_posts/2015-07-17-augmented-lagrangian-method.md.

Rendered result: http://www.quxiaofeng.me/optimization/2015/07/17/augmented-lagrangian-method/

1. When the {% m %}f{% em %} env is the starting env of a sentence, the following sentence will start in a new line.

   Example: line 10: f(x)

2. When the {% math %}{% endmath %} env is not following other content (following a blank new line), the width of the mathjax equation is not right. And the font size is not right.

   Example: line 18: {\bf 0}=\nabla f({\bf x})

3. The above situation is changed, when there is a sidenote on the right. The width is reduced but is not perfect. And the font is still not right.

   Example: line 26: \mathcal{L}_\rho ({\bf x},{\bf \lambda}) after the line 24: sidenote 1

4. If the math env is following a paragraph of a list, the width and the font are both right. However, the alignment symbol & is displaying as amp;.

   Example: the align env started from line 49: {%math%}

5. The sidenote could flow over the page.

For now, with the following constrains, the page could be rendered a little better.

• Start a sentence with some words, not m env.
• Write some sentences before the math env.
• When using the align env, add a blank line before the math env, and enclose the math env with <p>...</p>.

Example: http://www.quxiaofeng.me/optimization/2015/07/18/alternating-direction-method-multipliers/

[quxiaofeng]

By adding <p>...</p> to the math env, the 2, 3, 4 problems can be fixed, though the fix is not pretty. The code can be found in this commit: https://github.com/quxiaofeng/optimization/commit/26513a7fe96c612bcadb5c3fc7b8f5bca4c929cb.

But the problem 1, 5 still exist.

[quxiaofeng]

The problem 5 can be fixed by adding a property display: inline-block to the article tag. I do not know whether it will mess up other tags in the article. But this fix seems working for now.

The code can be found in this commit: https://github.com/quxiaofeng/optimization/commit/652c6251410b18abc1d88ade7897a14215932416 .

The example can be found here: http://www.optimizations.ml/2015/07/17/augmented-lagrangian-method/ .

Another problem is that the width of the article should be set to width: 100%; as https://github.com/quxiaofeng/optimization/commit/ac32876e82727e37fe5acdcdd98437aa57ec07bb to avoid some weired errors.

The problem 1 has not been fixed.

[clayh53]

I modified the mathjax liquid tag plugin with a stupid hack that fixes this, at least in my testing. I added a zero-space html entity code in front of the script tag to force it to treat both inline and block level math as html in whatever context it was written. The code, FWIW is ​

[clayh53]

Please see if changing the plugin code fixes your layout issues.

[clayh53]

I tested everything mentioned with the revised CSS (thanks!) and the modified mathjax plugin and it all seems to work fine now.

[quxiaofeng]

Thank you for the update.

[clayh53]

Short answer: Take out the blank lines between your list items.

Okay, this is a really strange thing about the Jekyll Markdown engine I have never noticed before. If you have a list, and you put a blank line between the items like this:

+ list item 1

+ list item 2

It will create an html tag structure like this:

<ul>
   <li>
      <p>list item 1</p>
  </li>
  <li>
      <p>list item 2</p>
   </li>
</ul>

Which totally goofs up the layout CSS.

However, if your Markdown is this:

+ list item 1
+ list item 2

It will create a tag structure like this:

<ul>
   <li>list item 1</li>
   <li>list item 2</li>
</ul>