Enabling LaTeX support in Blogger or Any Website(MathJax)

2024-12-26 00:00:00 +0000 - Written by engineeringmathematicsbloggerwriterlatex

LaTeX is a powerful typesetting system that is widely used for writing mathematical and scientific documents. MathJax is a JavaScript library that allows you to display LaTeX equations on web pages. This guide will walk you through the steps to enable MathJax on your Blogger site and use LaTeX to write mathematical expressions.

Read this post in MY BLOG !

Enabling MathJax on Blogger

Step 1: Access Your Blogger Template

Log in to your Blogger account.
Go to the Dashboard.
Select the blog where you want to enable MathJax.
Click on Theme.
Click on arrow button that with the Customise.
Click on Edit HTML.

Step 2: Add MathJax Configuration

Add the following script after the <head> tag in your Blogger template:

<script async='async' id='MathJax-script' src='https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js' type='text/javascript'>
</script>
<script>
MathJax = {
  tex: {
    packages: [&#39;base&#39;],        // extensions to use
    inlineMath: [              // start/end delimiter pairs for in-line math
      [&#39;\\(&#39;, &#39;\\)&#39;]
    ],
    displayMath: [             // start/end delimiter pairs for display math
      [&#39;$$&#39;, &#39;$$&#39;],
      [&#39;\\[&#39;, &#39;\\]&#39;]
    ],
    processEscapes: true,      // use \$ to produce a literal dollar sign
    processEnvironments: true, // process \begin{xxx}...\end{xxx} outside math mode
    processRefs: true,         // process \ref{...} outside of math mode
    digits: /^(?:[0-9]+(?:\{,\}[0-9]{3})*(?:\.[0-9]*)?|\.[0-9]+)/,
                               // pattern for recognizing numbers
    tags: &#39;none&#39;,              // or &#39;ams&#39; or &#39;all&#39;
    tagSide: &#39;right&#39;,          // side for \tag macros
    tagIndent: &#39;0.8em&#39;,        // amount to indent tags
    useLabelIds: true,         // use label name rather than tag for ids
    maxMacros: 10000,          // maximum number of macro substitutions per expression
    maxBuffer: 5 * 1024,       // maximum size for the internal TeX string (5K)
    baseURL:                   // URL for use with links to tags (when there is a base tag in effect)
       (document.getElementsByTagName(&#39;base&#39;).length === 0) ?
        &#39;&#39; : String(document.location).replace(/#.*$/, &#39;&#39;)),
    formatError:               // function called when TeX syntax errors occur
        (jax, err) =&gt; jax.formatError(err)    
  },
  svg: {
    scale: 1,                      // global scaling factor for all expressions
    minScale: .5,                  // smallest scaling factor to use
    mtextInheritFont: false,       // true to make mtext elements use surrounding font
    merrorInheritFont: true,       // true to make merror text use surrounding font
    mathmlSpacing: false,          // true for MathML spacing rules, false for TeX rules
    skipAttributes: {},            // RFDa and other attributes NOT to copy to the output
    exFactor: .5,                  // default size of ex in em units
    displayAlign: &#39;center&#39;,        // default for indentalign when set to &#39;auto&#39;
    displayIndent: &#39;0&#39;,            // default for indentshift when set to &#39;auto&#39;
    fontCache: &#39;global&#39;,           // or &#39;global&#39; or &#39;none&#39;
    localID: null,                 // ID to use for local font cache (for single equation processing)
    internalSpeechTitles: true,    // insert title tags with speech content
    titleID: 0                     // initial id number to use for aria-labeledby titles
  },
  chtml: {
    scale: 1,                      // global scaling factor for all expressions
    minScale: .5,                  // smallest scaling factor to use
    mtextInheritFont: false,       // true to make mtext elements use surrounding font
    merrorInheritFont: true,       // true to make merror text use surrounding font
    mathmlSpacing: false,          // true for MathML spacing rules, false for TeX rules
    skipAttributes: {},            // RFDa and other attributes NOT to copy to the output
    exFactor: .5,                  // default size of ex in em units
    displayAlign: &#39;center&#39;,        // default for indentalign when set to &#39;auto&#39;
    displayIndent: &#39;0&#39;,            // default for indentshift when set to &#39;auto&#39;
    matchFontHeight: true,         // true to match ex-height of surrounding font
    fontURL: &#39;[mathjax]/components/output/chtml/fonts/woff-v2&#39;,   // The URL where the fonts are found
    adaptiveCSS: true              // true means only produce CSS that is used in the processed equations
  },
  options: {
   ignoreHtmlClass: &#39;tex2jax_ignore|editor-rich-text&#39;
  }
};
</script>
<script async='async' id='MathJax-script' src='https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-svg.js' type='text/javascript'>
</script>
<script async='async' id='MathJax-script' src='https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-chtml.js'>
</script>

Step 3: Save Your Changes

After adding the MathJax configuration, click on Save. Preview your blog to ensure that MathJax is working correctly.

Enabling LaTeX support in Blogger or Any Website(MathJax)

Writing LaTeX on Your Blogger Site

Inline Math

To write inline mathematical expressions, enclose your LaTeX code between single dollar signs ($) or backslashes and parentheses ( $ and $ ).

Input :$ x = \frac{-b \pm \sqrt{b^2 - 4ac}}{2a} $

Display Math

To write displayed mathematical expressions, enclose your LaTeX code between double dollar signs ($$) or backslashes and square brackets ( \[ and \] ).

Input : \[displaystyle R_{\mu\nu}-\frac{1}{2}R,g_{\mu\nu} + \Lambda,g_{\mu\nu} = \frac{8\pi G}{c^4}T_{\mu\nu} \]