Solved: Does Weebly support LaTeX?

bmfe2PnHS9K7mPs · ‎07-28-2021

Can I typeset mathematics using LaTeX code on my site? What options are there for a math blog that does suppost LaTeX? I have heard about MathJax for blogs but not sure if it can be used with a Weebly-made website.

PaulMathews · ‎07-29-2021

@bmfe2PnHS9K7mPs A caveat: I haven't actually tested this in a Weebly site but you can follow the directions below and let us know what you get.

MathJax provides a simple javascript rendering engine reference link to implement math formulae on a web page. The stripped down page code (MathJax script references indicated in red text; MathJax math formulae code indicated in green text) below renders the quadratic equation formula (you can copy the entire code below into a text editor, save the file as something like mathjax-sample.html, and launch it in your browser to test).

Code

<html>
<head>

<title>MathJax Example Quadratic Equation</title>
<script src="https://polyfill.io/v3/polyfill.min.js?features=es6"></script>
<script id="MathJax-script" async src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"></script>

</head>

<body>

<h2>Quadratic Equation expressed in MathJax</h2>
<p>
When \(a \ne 0\), there are two solutions to \(ax^2 + bx + c = 0\) determined by the Quadratic Equation:
</p>
<p style="font-size:1.5em;">
 \(x = {-b \pm \sqrt{b^2-4ac} \over 2a}\)
</p>

</body>
</html>

Produces the following on a web page:

(Note: since the test code doesn't implement any font styling, what you see above defaults to the Times New Roman default browser font family; in a Weebly site, your site paragraph font will apply.)

So, how do you go about implementing MathJax in a Weebly site? I'd isolate the MathJax script references solely to the blog page (no need to load the script on any site pages where you aren't implementing MathJax).

In the Weebly Site Editor, click on "Pages" in the navigation menu then click on your blog page in the left-hand sidebar.
Click on "SEO Settings" and scroll down to the "Header Code" input box. Copy and paste in the two highlighted red text script references in the code shown above.
Create a new blog post or edit an existing post. Drag and drop a Code Element into the post and copy and paste in the example quadratic equation code (the highlighted green text from the code above). Publish the post, republish the site.

Let us know how that works out.

View Best Answer >

PaulMathews · ‎07-29-2021

@bmfe2PnHS9K7mPs A caveat: I haven't actually tested this in a Weebly site but you can follow the directions below and let us know what you get.

MathJax provides a simple javascript rendering engine reference link to implement math formulae on a web page. The stripped down page code (MathJax script references indicated in red text; MathJax math formulae code indicated in green text) below renders the quadratic equation formula (you can copy the entire code below into a text editor, save the file as something like mathjax-sample.html, and launch it in your browser to test).

Code

<html>
<head>

<title>MathJax Example Quadratic Equation</title>
<script src="https://polyfill.io/v3/polyfill.min.js?features=es6"></script>
<script id="MathJax-script" async src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"></script>

</head>

<body>

<h2>Quadratic Equation expressed in MathJax</h2>
<p>
When \(a \ne 0\), there are two solutions to \(ax^2 + bx + c = 0\) determined by the Quadratic Equation:
</p>
<p style="font-size:1.5em;">
 \(x = {-b \pm \sqrt{b^2-4ac} \over 2a}\)
</p>

</body>
</html>

Produces the following on a web page:

(Note: since the test code doesn't implement any font styling, what you see above defaults to the Times New Roman default browser font family; in a Weebly site, your site paragraph font will apply.)

So, how do you go about implementing MathJax in a Weebly site? I'd isolate the MathJax script references solely to the blog page (no need to load the script on any site pages where you aren't implementing MathJax).

In the Weebly Site Editor, click on "Pages" in the navigation menu then click on your blog page in the left-hand sidebar.
Click on "SEO Settings" and scroll down to the "Header Code" input box. Copy and paste in the two highlighted red text script references in the code shown above.
Create a new blog post or edit an existing post. Drag and drop a Code Element into the post and copy and paste in the example quadratic equation code (the highlighted green text from the code above). Publish the post, republish the site.

Let us know how that works out.

bmfe2PnHS9K7mPs · ‎07-30-2021

@PaulMathews It works.

First, note that it does not preview - you have to publish the website to see the results typeset.

Second, in a blog post I would normally use the "Text" element from the page builder, not the "Embed Code" element. The difference seems to be in font color. The text I enter into a "Text" element shows up black while the text and math entered into the "Embed Code" element shows up grey. It looks like the same font, font weight, and spacing, but not entirely sure.

PaulMathews · ‎07-30-2021

@bmfe2PnHS9K7mPs It is frequently the case that coded elements will not appear in the preview but will appear in the published site. A little annoying but such is life.

I'm surprised that MathJax would work at all via the Text Element. That should render only static, regular text so I'd expect that the raw MathJax math language would show in a Text Element not the actual rendered math formulae. I would expect math formulae to appear only via a Code Element. That's pretty interesting if both Elements produce the math formulae with the only difference being font color. Would be curious to see the blog post where you did the test (with both Element types).

bmfe2PnHS9K7mPs · ‎07-30-2021

@PaulMathews You are correct - only the "Embed Code" element typesets the math after publishing.

I was mentioning the change in font color b/c writing math (in a blog post, in a textbook, in a research article, in educational material, etc.) is a usually a mixture of mathematical objects/abbreviations and English, and so I would want that all to appear with a black font. I mean I do not think I would enter a separate text only portion of a blog and then a math only portion, and if I did, I would want the font characteristics, including color, to be consistent across them both.

So would changing the font color for MathJax need to happen in the red header code or in the green "Embed Code" element like where we have <p style="font-size:1.5em;">?

Is there a way for it to automatically use the same font characteristics as a "Text" element?

PaulMathews · ‎07-30-2021

@bmfe2PnHS9K7mPs I didn't do a deep dive into the MathJax documentation and, in particular, styling. The javascript that renders the math formulae clearly brings along some of its own styling (via its own stylesheet).

As you mentioned, I was able to override the default, smaller font size of the rendered Quadratic equation with the use of a bit of inline css (in the formula's enclosing paragraph tag). I could also have modified the formula font color by additionally specifying that too: <p style="font-size:1.5em; color: red;">...Of course, we don't really want to use inline css on elements that will be used over multiple pages or posts. MathJax may have some documentation on its css but you could also write your own classes and apply them to the div, p, span tags that you use to enclose your MathJax language code. For example, if I modify the previously provided code to this:

<html>

<head>

<title>MathJax Example Quadratic Equation</title>
<script src="https://polyfill.io/v3/polyfill.min.js?features=es6"></script>
<script id="MathJax-script" async src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"></script>

<style>

.mjax * {
   color:red;
}

.mjax-text-md {
   font-size:1.5em;
}

</style>

</head>

<body>

<h2>Quadratic Equation expressed in MathJax</h2>

<p>This is an example of MathJax implemented on a web page</p>

<div class="mjax">

<p>
When \(a \ne 0\), we solve \(ax^2 + bx + c = 0\) using the Quadratic Equation:
</p>

<p class="mjax-text-md">
 \(x = {-b \pm \sqrt{b^2-4ac} \over 2a}\)
</p>

</div>

</body>
</html>

I can now discretely control the color and font size of MathJax elements as desired. The div that encloses the two MathJax-related paragraph tags has a custom css class that will change all font colors within the div to red. The quadratic formula paragraph uses a custom css class that increases the font size of the formula. In Weebly, you can add your custom classes to the site's css code (in the Site Editor, click Theme > Edit HTML/CSS and you'll be in the Code Editor where the site's css is the default code loaded in the code pane).

bmfe2PnHS9K7mPs · ‎07-30-2021

@PaulMathews Perfect.

I also experimented with the following. As before I put the red MathJax code in the Header Code section of the blog post page. But for the "Embed Code" element I put in just

<p>
When \(a \ne 0\), we solve \(ax^2 + bx + c = 0\) using the Quadratic Equation:
</p>

<p>
 \(x = {-b \pm \sqrt{b^2-4ac} \over 2a}\)
</p>

removing any inline CSS. It published in the same font, weight, and size as a "Text" element on the same page, but the color was the theme color listed under Theme > Change Fonts > Paragraph Text which is a grey color. What's bizarre is that I also have a "Text" element on the page for comparison and it is in black (otherwise identical font characteristics), so the font color for the "Text" element seems to be overriding the Themes' Paragrah Text font color which the "Embed Code" is using. Not sure where the "Text" element is getting its font color instructions from, but I could just change the font color to black at the theme level to get the "Embed Code" mathematics to print in black.