4

I have tried loading MathJax through a Google Sites HTML Box. But I can't get the JS to load.

Does anyone have another solution for getting the JS to load or LaTeX into Google Sites?

2
  • 2
    Google Sites does not allow us to load raw JavaScript. Jacob's answer might be the solution to create formula's and equations.
    – Ifan Iqbal
    Commented Feb 27, 2013 at 23:55
  • It does allow some things, see my comment below.
    – user159612
    Commented Jan 27, 2022 at 1:08

4 Answers 4

3

My first attempt to Google on this topic yielded in a first hit: search result LATEX Google Sites.

On the following two websites, it is explained how to show the LATEX on Google Sites:

  1. Use LaTeX on Google Site
  2. Google's LaTeX

See snapshot of last reference:

enter image description here

2
  • Seems hackish, but you have no choice since Google does not allow you to load raw JS in Google Sites (only allowed in Blogger).
    – Hydra
    Commented Feb 24, 2013 at 1:55
  • I looked at it, this is very underground and U-boot, cannot recommend it. See my comment below, it is possible it seems.
    – user159612
    Commented Jan 27, 2022 at 1:09
5

Google sites seems to be displaying typeset math from Jupyter notebook saved as html now (March 22, 2020):

I saved a Jupyter notebook as html today. I opened my Google sites in New mode (not classic I believe) and selected (by double tapping white space on the open page in edit mode) "embed" (think that was it, not too many options, e.g., text, image and insert html which was labelled "embed" I think). I had an option to link to some online code or insert the html directly, which latter option I selected.

I opened the saved html file of my notebook from Jupyter in another browser window (a Firefox browser actually, I was working in Chrome on sites), selected "see source" and then copied that html source and pasted it into the Google sites insert window/box. It took it and I expanded the insert window somewhat (was a little small default).

I then previewed it and was amazed to see all the LaTex (Jupyter version, MathJax really) in the html file displaying typeset math perfectly. I though, ok, this must be Chrome using my local Mathjax support, so I published the site, closed the browsers, cleared caches and went back online to look at the page url without being signed in.

It displayed typeset MathJax perfectly: MSW graphing code

I note that the first link in the accepted answer no longer is active, i.e., Use Latex on Google Site now responds with a 404 error.

I looked at the html that the Jupyter notebook produced and discovered that it loads js in the head and then loads MathJax from a cloud source. I won't reproduce all that here, but if you go to my MSW graphing code link above and view page source you can obtain the js and MathJax loader, may be more interesting to many than the process by which I arrived at the successful display.

2

Inspired by Dalton's answer, here I just try to provide a minimal working embedded code in google site. But still it does not allow directly using LaTeX in its generic components such as Text box.

<!DOCTYPE html>
<html>
<head><meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title></title><script src="https://cdnjs.cloudflare.com/ajax/libs/require.js/2.1.10/require.min.js"></script>

<!-- Load mathjax -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.7/latest.js?config=TeX-MML-AM_CHTML-full,Safe"> </script>
    <!-- MathJax configuration -->
    <script type="text/x-mathjax-config">
    init_mathjax = function() {
        if (window.MathJax) {
        // MathJax loaded
            MathJax.Hub.Config({
                TeX: {
                    equationNumbers: {
                    autoNumber: "AMS",
                    useLabelIds: true
                    }
                },
                tex2jax: {
                    inlineMath: [ ['$','$'], ["\\(","\\)"] ],
                    displayMath: [ ['$$','$$'], ["\\[","\\]"] ],
                    processEscapes: true,
                    processEnvironments: true
                },
                displayAlign: 'center',
                CommonHTML: {
                    linebreaks: { 
                    automatic: true 
                    }
                },
                "HTML-CSS": {
                    linebreaks: { 
                    automatic: true 
                    }
                }
            });
        
            MathJax.Hub.Queue(["Typeset", MathJax.Hub]);
        }
    }
    init_mathjax();
    </script>
    <!-- End of mathjax configuration --></head>

<p>$x^2 +y^2+z^2=1$</p>
</html>
0

The following code seems to work and NOT work. The NOT is this: In Edge, it is loading with white background, just perfect. In Opera this (Script1) is loading either with white (sporadic?) or black background (iframe..). Font size and color can be changed no problem with div-style for Opera. It works 100% in Chrome tab "Incognito".

Script1

<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>

<div style="background-color:white;color:black;font-size:18px;">

<p><span class="math display">\[\begin{array}{l}
\operatorname{rot} \mathfrak{F}=-\frac{1}{c} \frac{\partial \mathfrak{B}}{\partial
t}, \\
\operatorname{rot} \mathfrak{S}=\frac{1}{c} \frac{\partial
\mathfrak{D}}{\partial t}, \\
\operatorname{div} \mathfrak{D}=0, \\
\operatorname{div} \mathfrak{B}=0 .
\end{array}\]</span></p>

</div>

I also tried the following hack, however for Opera doesn't seem to make a difference, unless Incognito mode. Various settings in Edge show all fine, with or without the hack in Script2.

Script2

<script>
var iframe = document.getElementsByTagName('iframe')[0];
iframe.style.background = 'white';
iframe.contentWindow.document.body.style.backgroundColor = 'white';
</script>

The following Script3 works in Opera non-Incognito (only this):

Script3

<script>
var iframe = document.getElementsByTagName('iframe')[0];
iframe.style.background = 'white';
iframe.contentWindow.document.body.style.backgroundColor = 'white';
</script>

<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>

<div style="color:black;font-size:45px;">

<p><span class="math display">\[\begin{array}{l}
\operatorname{rot} \mathfrak{F}=-\frac{1}{c} \frac{\partial \mathfrak{B}}{\partial
t}, \\
\operatorname{rot} \mathfrak{S}=\frac{1}{c} \frac{\partial
\mathfrak{D}}{\partial t}, \\
\operatorname{div} \mathfrak{D}=0, \\
\operatorname{div} \mathfrak{B}=0 .
\end{array}\]</span></p>

</div>

Can anyone confirm or verify the finding and elaborate?

Related problems:

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.