mirror of
https://github.com/foo-dogsquared/hugo-theme-contentful.git
synced 2025-02-07 12:19:17 +00:00
236 lines
19 KiB
HTML
236 lines
19 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en-us"><title>MathJax Support for Markdown</title>
|
|
<link rel="stylesheet" href="https://foo-dogsquared.github.io/hugo-theme-contentful/css/index.min.11618edd7e3b000c8d9629ad7f78c9229d907cb12f420c0242dfb9185eb5ff8e.css" /><meta name="generator" content="Hugo 0.98.0" />
|
|
<meta charset="utf-8">
|
|
<meta name="author" content="John Doe" />
|
|
|
|
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
|
<meta name="referrer" content="no-referrer" />
|
|
<meta name="description" content="This is just an article for testing MathJax in Markdown files.
|
|
You can use this as a testing template for all of your LaTeX math needs.
|
|
Basics This should be an inline math content \(\LaTeX\) with the LaTeX symbol.
|
|
The following block content should contain a sentence with the LaTeX symbol.
|
|
$$\LaTeX\text{ is awesome.}$$
|
|
Whitespace LaTeX treats whitespace characters such as tabs and spaces uniformly as one unit of space. A text that is composed of two tabs and 10 spaces consecutively is one space." /><meta name="twitter:card" content="summary"/>
|
|
<meta name="twitter:title" content="MathJax Support for Markdown"/>
|
|
<meta name="twitter:description" content="This is just an article for testing MathJax in Markdown files.
|
|
You can use this as a testing template for all of your LaTeX math needs.
|
|
Basics This should be an inline math content \(\LaTeX\) with the LaTeX symbol.
|
|
The following block content should contain a sentence with the LaTeX symbol.
|
|
$$\LaTeX\text{ is awesome.}$$
|
|
Whitespace LaTeX treats whitespace characters such as tabs and spaces uniformly as one unit of space. A text that is composed of two tabs and 10 spaces consecutively is one space."/>
|
|
<meta property="og:title" content="MathJax Support for Markdown" />
|
|
<meta property="og:description" content="This is just an article for testing MathJax in Markdown files.
|
|
You can use this as a testing template for all of your LaTeX math needs.
|
|
Basics This should be an inline math content \(\LaTeX\) with the LaTeX symbol.
|
|
The following block content should contain a sentence with the LaTeX symbol.
|
|
$$\LaTeX\text{ is awesome.}$$
|
|
Whitespace LaTeX treats whitespace characters such as tabs and spaces uniformly as one unit of space. A text that is composed of two tabs and 10 spaces consecutively is one space." />
|
|
<meta property="og:type" content="article" />
|
|
<meta property="og:url" content="https://foo-dogsquared.github.io/hugo-theme-contentful/articles/mathjax-support-for-markdown/" /><meta property="article:section" content="articles" />
|
|
<meta property="article:published_time" content="2019-08-28T00:09:56+08:00" />
|
|
<meta property="article:modified_time" content="2022-05-13T18:08:06+08:00" />
|
|
|
|
<meta itemprop="name" content="MathJax Support for Markdown">
|
|
<meta itemprop="description" content="This is just an article for testing MathJax in Markdown files.
|
|
You can use this as a testing template for all of your LaTeX math needs.
|
|
Basics This should be an inline math content \(\LaTeX\) with the LaTeX symbol.
|
|
The following block content should contain a sentence with the LaTeX symbol.
|
|
$$\LaTeX\text{ is awesome.}$$
|
|
Whitespace LaTeX treats whitespace characters such as tabs and spaces uniformly as one unit of space. A text that is composed of two tabs and 10 spaces consecutively is one space."><meta itemprop="datePublished" content="2019-08-28T00:09:56+08:00" />
|
|
<meta itemprop="dateModified" content="2022-05-13T18:08:06+08:00" />
|
|
<meta itemprop="wordCount" content="1008">
|
|
<meta itemprop="keywords" content="markdown,mathjax,guide," /><link rel="canonical" type="text/html" href="https://foo-dogsquared.github.io/hugo-theme-contentful/articles/mathjax-support-for-markdown/" />
|
|
|
|
|
|
<body><nav aria-label="Primary navigation">
|
|
<a class="site__title" href="https://foo-dogsquared.github.io/hugo-theme-contentful/">Contentful</a>
|
|
<div class="site__links">
|
|
|
|
|
<a href="https://foo-dogsquared.github.io/hugo-theme-contentful/about/">About</a> |
|
|
<a href="https://foo-dogsquared.github.io/hugo-theme-contentful/categories/">Categories</a> |
|
|
<a href="https://foo-dogsquared.github.io/hugo-theme-contentful/recipes/">Recipes</a> |
|
|
<a href="https://foo-dogsquared.github.io/hugo-theme-contentful/tags/">Tags</a> |
|
|
|
|
</div>
|
|
</nav>
|
|
|
|
|
|
<article>
|
|
<header>
|
|
<h1>MathJax Support for Markdown</h1>
|
|
</header>
|
|
<div class="post__meta--single">
|
|
|
|
|
|
|
|
<p data-content-publication-date="2019-08-28 00:09:56 +0800 +0800">Created: <time datetime="2019-08-28">2019-08-28</time></p>
|
|
|
|
|
|
<p data-content-modification-date="2022-05-13 18:08:06 +0800 +0800">Updated: <time datetime="2022-05-13">2022-05-13</time></p>
|
|
|
|
|
|
</div>
|
|
<hr>
|
|
|
|
|
|
|
|
|
|
<main>
|
|
<p>This is just an article for testing MathJax in Markdown files.</p>
|
|
<p>You can use this as a testing template for all of your LaTeX math needs.</p>
|
|
<h2 id="basics">Basics</h2>
|
|
<p>This should be an inline math content \(\LaTeX\) with the LaTeX symbol.</p>
|
|
<p>The following block content should contain a sentence with the LaTeX symbol.</p>
|
|
<p>$$\LaTeX\text{ is awesome.}$$</p>
|
|
<h3 id="whitespace">Whitespace</h3>
|
|
<p>LaTeX treats whitespace characters such as tabs and spaces uniformly as one unit
|
|
of space.
|
|
A text that is composed of two tabs and 10 spaces consecutively is one space.</p>
|
|
<p>This is especially prominent in math mode (which MathJax is… always).</p>
|
|
<p>Try to render this, for example.</p>
|
|
<div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;"><code class="language-latex" data-lang="latex"><span style="display:flex;"><span>This is a LaTeX sentence (or I guess in MathJax).
|
|
</span></span></code></pre></div><p>And it’ll render as the following:</p>
|
|
<p>$$ This is a LaTeX sentence (or I guess in MathJax). $$</p>
|
|
<p>Since MathJax is in… perpetual math mode and specifically made for rendering
|
|
math formulae, we shouldn’t have a problem with maintaining it.</p>
|
|
<p>Just a heads up.</p>
|
|
<h3 id="commands">Commands</h3>
|
|
<p>One of the main syntax you should mind in MathJax are the LaTeX commands.
|
|
Think of it like the HTML tags in LaTeX (although not really).</p>
|
|
<p>Here’s the basic construct of a LaTeX command:</p>
|
|
<div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;"><code class="language-latex" data-lang="latex"><span style="display:flex;"><span><span style="color:#66d9ef">\commandname</span><span style="color:#a6e22e">[option1,option2,...]</span>{argument1}{argument2}...
|
|
</span></span></code></pre></div><p>Within commands and if allowed, you can nest commands.
|
|
Take this example for example:</p>
|
|
<div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;"><code class="language-latex" data-lang="latex"><span style="display:flex;"><span><span style="color:#66d9ef">\sum</span>_{i=0}^{6} = <span style="color:#66d9ef">\frac</span>{i^{2}}{ 2 <span style="color:#66d9ef">\bmod</span> (i * 4)} + i^{3}
|
|
</span></span></code></pre></div><p>$$ \sum_{i=0}^{6} = \frac{i^{2}}{ 2 \bmod (i * 4)} + i^{3} $$</p>
|
|
<h3 id="reserved-characters">Reserved characters</h3>
|
|
<p>The following characters have special meaning to LaTeX.</p>
|
|
<pre tabindex="0"><code># $ % ^ & _ { } ~ \
|
|
</code></pre><p>$$ # $ % ^ & _ { } ~ \ $$</p>
|
|
<p>As you can see, if rendered, it should result in an error.</p>
|
|
<p>In order to render them in text, you need to add an escape character.
|
|
In this case, it’s a backslash.</p>
|
|
<div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;"><code class="language-latex" data-lang="latex"><span style="display:flex;"><span><span style="color:#66d9ef">\#</span> <span style="color:#66d9ef">\$</span> <span style="color:#66d9ef">\%</span> <span style="color:#66d9ef">\^</span> <span style="color:#66d9ef">\&</span> <span style="color:#66d9ef">\_</span> <span style="color:#66d9ef">\{</span> <span style="color:#66d9ef">\}</span> <span style="color:#66d9ef">\~</span> <span style="color:#66d9ef">\\</span>
|
|
</span></span></code></pre></div><p>In the case of rendering it from Markdown, double slashes might be needed.</p>
|
|
<p>$$ \# \$ % \^ \& \_ \{ \} \~ \ $$</p>
|
|
<h2 id="text-formatting">Text formatting</h2>
|
|
<p>You can do a little text formatting in a LaTeX math content (though it’s pointless
|
|
to do so).</p>
|
|
<h3 id="literal-text">Literal text</h3>
|
|
<p>You can make a text with <code>\text{}</code>.</p>
|
|
<div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;"><code class="language-latex" data-lang="latex"><span style="display:flex;"><span><span style="color:#66d9ef">\text</span>{The quick brown fox jumps over the lazy dog.}
|
|
</span></span></code></pre></div><p>$$\text{The quick brown fox jumps over the lazy dog.}$$</p>
|
|
<h3 id="boldface-text">Boldface text</h3>
|
|
<p>You can make a text boldface with <code>\textbf{}</code>.</p>
|
|
<div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;"><code class="language-latex" data-lang="latex"><span style="display:flex;"><span><span style="color:#66d9ef">\textbf</span>{The quick brown fox jumps over the lazy dog.}
|
|
</span></span></code></pre></div><p>$$\textbf{The quick brown fox jumps over the lazy dog.}$$</p>
|
|
<h3 id="italic-text">Italic text</h3>
|
|
<p>To make a text block italic, enclose it with a <code>\textit{}</code> command.</p>
|
|
<div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;"><code class="language-latex" data-lang="latex"><span style="display:flex;"><span><span style="color:#66d9ef">\textit</span>{The quick brown fox jumps over the lazy dog.}
|
|
</span></span></code></pre></div><p>$$\textit{The quick brown fox jumps over the lazy dog.}$$</p>
|
|
<h3 id="monospaced-text">Monospaced text</h3>
|
|
<p>In order for the text to be monospaced, enclose it with a <code>\texttt{}</code> (text teletype) command.</p>
|
|
<div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;"><code class="language-latex" data-lang="latex"><span style="display:flex;"><span><span style="color:#66d9ef">\texttt</span>{The quick brown fox jumps over the lazy dog.}
|
|
</span></span></code></pre></div><p>$$\texttt{The quick brown fox jumps over the lazy dog.}$$</p>
|
|
<h3 id="text-in-sans-serif-font-equivalent">Text in sans-serif font equivalent</h3>
|
|
<p>Most importantly, you can make a text rendered in sans-serif with <code>\textsf{}</code> command.</p>
|
|
<div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;"><code class="language-latex" data-lang="latex"><span style="display:flex;"><span><span style="color:#66d9ef">\textsf</span>{The quick brown fox jumps over the lazy dog.}
|
|
</span></span></code></pre></div><p>$$\textsf{The quick brown fox jumps over the lazy dog.}$$</p>
|
|
<h3 id="more-options">More options</h3>
|
|
<p>You can see a lot more options from <a href="https://en.wikibooks.org/wiki/LaTeX/Fonts">this reference</a>.</p>
|
|
<h2 id="math-formatting">Math formatting</h2>
|
|
<p>This is what you mostly came for, right?</p>
|
|
<p>All righty then.
|
|
Let’s see what MathJax in Markdown (M in M?) can do.</p>
|
|
<h3 id="fractions">Fractions</h3>
|
|
<p>For rendering fractions, you need to use the <code>\frac</code> command.
|
|
The command simply needs two positional arguments.</p>
|
|
<div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;"><code class="language-latex" data-lang="latex"><span style="display:flex;"><span><span style="color:#66d9ef">\frac</span>{NUMERATOR}{DENOMINATOR}
|
|
</span></span></code></pre></div><p>For a bit of an example:</p>
|
|
<div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;"><code class="language-latex" data-lang="latex"><span style="display:flex;"><span><span style="color:#66d9ef">\frac</span>{x_1 + y_2}{x_2 + y_1}
|
|
</span></span></code></pre></div><p>$$ \frac{x_1 + y_2}{x_2 + y_1} $$</p>
|
|
<h3 id="roots">Roots</h3>
|
|
<p>In order to create roots, you need the <code>\sqrt</code> command.
|
|
It only needs the content to be put inside of it as the argument.</p>
|
|
<div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;"><code class="language-latex" data-lang="latex"><span style="display:flex;"><span><span style="color:#66d9ef">\sqrt</span>{2a + b}
|
|
</span></span></code></pre></div><p>$$ \sqrt{2a + b} $$</p>
|
|
<p>Yes, you can nest some stuff.</p>
|
|
<div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;"><code class="language-latex" data-lang="latex"><span style="display:flex;"><span><span style="color:#66d9ef">\sqrt</span>{<span style="color:#66d9ef">\frac</span>{2a + b}{a^2 - b^2}}
|
|
</span></span></code></pre></div><p>$$ \sqrt{\frac{2a + b}{a^2 - b^2}} $$</p>
|
|
<p>You can specify an optional argument to change the magnitude.</p>
|
|
<div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;"><code class="language-latex" data-lang="latex"><span style="display:flex;"><span><span style="color:#66d9ef">\sqrt</span><span style="color:#a6e22e">[\frac{1}{2}]</span>{2a + b}
|
|
</span></span></code></pre></div><p>$$ \sqrt[\frac{1}{2}]{2a + b} $$</p>
|
|
<h3 id="superscripts">Superscripts</h3>
|
|
<p>In order to make superscripts, place it next to a caret character (<code>^</code>).
|
|
To render it in more than one character, enclose it in curly brackets (<code>{}</code>).</p>
|
|
<div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;"><code class="language-latex" data-lang="latex"><span style="display:flex;"><span>2^2 * 2^{23} = 2^{25}
|
|
</span></span></code></pre></div><p>$$2^2 * 2^{23} = 2^{25}$$</p>
|
|
<p>You can also nest it within a superscript like so.</p>
|
|
<div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;"><code class="language-latex" data-lang="latex"><span style="display:flex;"><span>2^{2^{10}} * 2^{23^2} = <span style="color:#66d9ef">\infty</span>
|
|
</span></span></code></pre></div><p>$$ 2^{2^{10}} * 2^{23^2} = \infty $$</p>
|
|
<p>OK, I’ve gone overboard with the scale so I just put infinity as the
|
|
answer instead.</p>
|
|
<h3 id="subscripts">Subscripts</h3>
|
|
<p>For making subscripts, place it next to the underscore (<code>_</code>).
|
|
Like the superscript command, if you include more than one character,
|
|
enclose it in a pair of curly brackets (<code>{}</code>).</p>
|
|
<div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;"><code class="language-latex" data-lang="latex"><span style="display:flex;"><span>a_1 + a_2 + a_3 + ... + a_{14} = <span style="color:#66d9ef">\frac</span>{a_1 * a_{14}}{2}
|
|
</span></span></code></pre></div><p>$$ a_1 + a_2 + a_3 + … + a_{14} = \frac{a_1 * a_{14}}{2} $$</p>
|
|
<p>Wait… That doesn’t look right.</p>
|
|
<p>That’s because in Markdown, underscores denote italics so
|
|
be sure to escape them with a single backslash.</p>
|
|
<p>So now, the result is this:</p>
|
|
<div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;"><code class="language-latex" data-lang="latex"><span style="display:flex;"><span>a<span style="color:#66d9ef">\_</span>1 + a<span style="color:#66d9ef">\_</span>2 + a<span style="color:#66d9ef">\_</span>3 + ... + a<span style="color:#66d9ef">\_</span>{14} = <span style="color:#66d9ef">\frac</span>{a<span style="color:#66d9ef">\_</span>1 * a<span style="color:#66d9ef">\_</span>{14}}{2}
|
|
</span></span></code></pre></div><p>$$ a_1 + a_2 + a_3 + … + a_{14} = \frac{a_1 * a_{14}}{2} $$</p>
|
|
<p>Like superscripts and most of the commands, you can nest subscripts
|
|
to another subscript (and other commands).</p>
|
|
<div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;"><code class="language-latex" data-lang="latex"><span style="display:flex;"><span>a<span style="color:#66d9ef">\_</span>{2<span style="color:#66d9ef">\_</span>{1}} + a<span style="color:#66d9ef">\_</span>{2<span style="color:#66d9ef">\_</span>{2}} = b<span style="color:#66d9ef">\_</span>{2<span style="color:#66d9ef">\_</span>{1}} + b<span style="color:#66d9ef">\_</span>{2<span style="color:#66d9ef">\_</span>{2}}
|
|
</span></span></code></pre></div><p>$$ a_{2_{1}} + a_{2_{2}} = b_{2_{1}} + b_{2_{2}} $$</p>
|
|
<h3 id="greek-letters">Greek letters</h3>
|
|
<p>You can render Greek letters with the appropriate command.</p>
|
|
<p><code>\alpha</code> for lowercase Greek letter alpha,
|
|
<code>\beta</code> for lowercase Greek letter beta,
|
|
<code>\gamma</code> for lowercase Greek letter gamma,
|
|
<code>\Gamma</code> for uppercase Greek letter gamma,
|
|
you get the point.</p>
|
|
<div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;"><code class="language-latex" data-lang="latex"><span style="display:flex;"><span><span style="color:#66d9ef">\alpha</span>, <span style="color:#66d9ef">\beta</span>, <span style="color:#66d9ef">\gamma</span>, <span style="color:#66d9ef">\Gamma</span>, <span style="color:#66d9ef">\pi</span>, <span style="color:#66d9ef">\Pi</span>, <span style="color:#66d9ef">\phi</span>, <span style="color:#66d9ef">\varphi</span>, <span style="color:#66d9ef">\mu</span>, <span style="color:#66d9ef">\Phi</span>
|
|
</span></span></code></pre></div><p>$$\alpha, \beta, \gamma, \Gamma, \pi, \Pi, \phi, \varphi, \mu, \Phi$$</p>
|
|
<h3 id="a-lot-more">A lot more!</h3>
|
|
<p>You have a whole slew of mathematical symbols available.
|
|
Please refer to <a href="https://oeis.org/wiki/List_of_LaTeX_mathematical_symbols">this list of LaTeX mathematical symbols</a>.
|
|
Though I don’t know what’s missing symbols and whatnot (since I don’t MathJax often) but
|
|
it should be enough.</p>
|
|
<p>You can also go to
|
|
<a href="https://math-on-quora.surge.sh/">this web page that details using MathJax on Quora</a>
|
|
by Gilles Castel.
|
|
It is specifically made for writing \(\LaTeX\) on Quora but it
|
|
can be used as a general MathJax guide, anyways.</p>
|
|
|
|
</main>
|
|
</article>
|
|
|
|
<hr>
|
|
<footer>
|
|
|
|
<p><a href="https://foo-dogsquared.github.io/hugo-theme-contentful/">Back to home</a></p>
|
|
</footer>
|
|
|
|
|
|
|
|
<p>Available in other languages:
|
|
<span class="site__languages">|
|
|
|
|
<a href="/hugo-theme-contentful/en">English</a> |
|
|
|
|
<a href="/hugo-theme-contentful/tl">Tagalog</a> |
|
|
|
|
</span>
|
|
</p>
|
|
|
|
|
|
|
|
<p>© 2022 Contentful</p>
|
|
</body>
|
|
</html>
|