Write
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.
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: ['base'], // extensions to use
inlineMath: [ // start/end delimiter pairs for in-line math
['\\(', '\\)']
],
displayMath: [ // start/end delimiter pairs for display math
['$$', '$$'],
['\\[', '\\]']
],
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: 'none', // or 'ams' or 'all'
tagSide: 'right', // side for \tag macros
tagIndent: '0.8em', // 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('base').length === 0) ?
'' : String(document.location).replace(/#.*$/, '')),
formatError: // function called when TeX syntax errors occur
(jax, err) => 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: 'center', // default for indentalign when set to 'auto'
displayIndent: '0', // default for indentshift when set to 'auto'
fontCache: 'global', // or 'global' or 'none'
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: 'center', // default for indentalign when set to 'auto'
displayIndent: '0', // default for indentshift when set to 'auto'
matchFontHeight: true, // true to match ex-height of surrounding font
fontURL: '[mathjax]/components/output/chtml/fonts/woff-v2', // The URL where the fonts are found
adaptiveCSS: true // true means only produce CSS that is used in the processed equations
},
options: {
ignoreHtmlClass: 'tex2jax_ignore|editor-rich-text'
}
};
</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.
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} \)Output:
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} \]Output :
Additional Resources
- Enabling LaTeX support in Blogger or Any Website(MathJax)
- Stack Exchange: How to use MathJax on Blogger
- TeX Stack Exchange: MathJax in Blogger
- MathJax in Blogger (Old Guide)
- MathJax v2.7 Documentation: tex2jax Preprocessor
- MathJax v3 Documentation: Getting Started
- MathJax v3 Documentation: Configuration
- MathJax Configuration Converter
- Beautiful Jekyll Issue: MathJax Configuration
- Write LaTeX using MathJax
By following these steps, you should be able to successfully implement LaTeX on your Blogger site using MathJax.