Writing Gatsby Articles in Markdown and LaTeX

2020, Mar 04

Markdown is designed to be an easy-to-read and easy-to-write markup language. This is not always the case, as it can be a daunting challenge to write and style a markdown article that has a mix of both code and maths. In this article, I have put together the commonly used syntax for scientific writing in markdown.

Install

npm install --save gatsby-transformer-remark gatsby-remark-katex katex

gatsby-config.js

plugins:[ { resolve: `gatsby-transformer-remark`, options: {
		plugins: [{ resolve: `gatsby-remark-katex`, options: {	
			strict: `ignore`	}  }]
		}} ]

App.js

require(katex/dist/katex.min-css)

Jump to:

Python, javascript, html and bash code in Markdown

Python

	def add(x,y):
		return x+y

'''python def add(x, y): return x+y '''

Replace the python keyword with js, html, or bash for javascript, html or bash code respectively.

Javascript

console.log("Hello World!!!");

Html

<b> Bold text </b>

Bash

55

Writing in Pure Markdown

Headers

Header 1

Header 5
# Header 1 
###### Header 5

# escaping header

\# escaping header

Bold and Italic

bold

**bold**
__bold__

italic

*italic*
_italic_

bold and italic

***bold and italic***

Strike thru

~~Strike thru~~

Paragraph, blockquote and horizontal line

paragraph 1

paragragh 2

paragragh 1

paragraph 2
blank line also means break to new line

This is a blockquote

This is a deeper blockquote

This is a deepest blockquote

> blockquote
>> deeper blockquote
>>> deepest blockquote
---
___

***

Ordered and unordered Lists

  1. Dog
  2. Cat
1. Dog
2. Cat
  • Dog
  • Cat
- Dog
- Cat

Images

pic 

![](./pic.jpg "Simba")

Styling with html and css

pic 
<div class="blogimage" style="float:right; width:50px;height:50px;margin:5px 0 5px 5px;">
    <img src="./pic.jpg" />
</div>

Anchor, navigation and reference links

https://www.google.com

https://www.google.com

Google

[Google](https://www.google.com)

Click a referenced ref1 url

Click a referenced [ref1] url

[ref1]: https://www.google.com "Google"

Title Link (hyphen)

[Title Link (hyphen)](#id-1)
"" 
<nav> 
	<a href="https://www.google.com"> google </a> |
	<a href="https://www.amazon.com"> amazon </a>
</nav>

Table of Contents

Chapter 1 Content one
Chapter 2 Content two
#### Table of Contents
* [Chapter 1](#chap-1)
* [Chapter 2](#chap-2)

##### Chapter 1 <a name="chap-1"></a> Content one 
##### Chapter 2 <a name="chap-2"></a> Content two

Todo

  • Task 1
  • Task 2
- [x] Task 1
- [] Task 2

Table

Key Value Type
name Simba str
age 18 int

""

|Key |Value| Type |
|----|:---:|-----:|
|name   |Simba| str |
|age  | 18 | int  |

Color and font

green text

<span style="color: green">green text</span>

text : 23

<span style="color: blue; font-family: 'Bebas Neue'; font-size: 2em;">
text : 23</span>

Highlight some text 

<code style="background:yellow; color: red">
Highlight some text </code>

LaTeX : Math Notation

inline: a2+b2=c2a^2 + b^2 = c^2

$ a^2 + b^2 = c^2 $

Multiline

a2+b2=c2a^2 + b^2 = c^2 
$$
a^2 + b^2 = c^2 
$$

Calculus

f(x)=∫−infty∞f^(ξ) e2πiξx dξf(x) = \int_{-infty}^\infty \hat f(\xi)\,e^{2 \pi i \xi x} \,d\xi 
$$	
f(x) = \int_{-\infty}^\infty
\hat f(\xi)\,e^{2 \pi i \xi x}
 \,d\xi
$$
∫udvdx dx=uv−∫dudxv dx\int u \frac{dv}{dx}\,dx=uv-\int \frac{du}{dx}v\,dx 
\int u \frac{dv}{dx}\,dx=uv-\int \frac{du}{dx}v\,dx
∮F⃗⋅ds⃗=0\oint \vec{F} \cdot d\vec{s}=0 
\oint \vec{F} \cdot d\vec{s}=0

Fractions on fractions

1x+1yy−z\frac{\frac{1}{x}+\frac{1}{y}}{y-z} 
\frac{\frac{1}{x}+\frac{1}{y}}{y-z}

Repeating Fractions

1(ϕ5−ϕ)e25π=1+e−2π1+e−4π1+e−6π1+e−8π1+⋯ \frac{1}{\Bigl(\sqrt{\phi \sqrt{5}}-\phi\Bigr) e^{\frac25 \pi}} = 1+\frac{e^{-2\pi}} {1+\frac{e^{-4\pi}} {1+\frac{e^{-6\pi}} {1+\frac{e^{-8\pi}} {1+\cdots} } } } 
\frac{1}{\Bigl(\sqrt{\phi \sqrt{5}}-\phi\Bigr) e^{\frac25 \pi}} = 
1+\frac{e^{-2\pi}} {1+\frac{e^{-4\pi}} {1+\frac{e^{-6\pi}} 
{1+\frac{e^{-8\pi}} {1+\cdots} } } }

Greek Letters:

Γ Δ Θ Λ Ξ Π Σ Υ Φ Ψ Ω \Gamma\ \Delta\ \Theta\ \Lambda\ \Xi\ \Pi\ \Sigma\ \Upsilon\ \Phi\ \Psi\ \Omega α β γ δ ϵ ζ η θ ι κ λ μ ν ξ ο π ρ σ τ υ ϕ χ ψ ω ε ϑ ϖ ϱ ς φ \alpha\ \beta\ \gamma\ \delta\ \epsilon\ \zeta\ \eta\ \theta\ \iota\ \kappa\ \lambda\ \mu\ \nu\ \xi\ \omicron\ \pi\ \rho\ \sigma\ \tau\ \upsilon\ \phi\ \chi\ \psi\ \omega\ \varepsilon\ \vartheta\ \varpi\ \varrho\ \varsigma\ \varphi 
\Gamma\ \Delta\ \Theta\ \Lambda\ \Xi\ \Pi\ \Sigma\
 \Upsilon\ \Phi\ \Psi\ \Omega
\alpha\ \beta\ \gamma\ \delta\ \epsilon\ \zeta\ \eta\ 
\theta\ \iota\ \kappa\ \lambda\ \mu\ \nu\ \xi\ \omicron\
\pi\ \rho\ \sigma\ \tau\ \upsilon\ \phi\ \chi\ \psi\ \omega\
 \varepsilon\ \vartheta\ \varpi\ \varrho\ \varsigma\ \varphi

Symbols

√ ⊼ ⊻ ⊙ ⊕ ⊗⊘ ⊚ ⊡ △\surd\ \barwedge\ \veebar\ \odot\ \oplus\ \otimes \oslash\ \circledcirc\ \boxdot\ \bigtriangleup 
\surd\ \barwedge\ \veebar\ \odot\ \oplus\ \otimes
 \oslash\ \circledcirc\ \boxdot\ \bigtriangleup

Lorenz Equations:

x˙=σ(y−x)y˙=ρx−y−xzz˙=−βz+xy \begin{aligned} \dot{x} & = \sigma(y-x) \\ \dot{y} & = \rho x - y - xz \\ \dot{z} & = -\beta z + xy \end{aligned} 
\begin{aligned}
\dot{x} & = \sigma(y-x) \\
\dot{y} & = \rho x - y - xz \\
\dot{z} & = -\beta z + xy
\end{aligned}

Maxwell's Equations

∇×B⃗− 1c ∂E⃗∂t=4πcj⃗∇⋅E⃗=4πρ∇×E⃗ + 1c ∂B⃗∂t=0⃗∇⋅B⃗=0\begin{aligned} \nabla \times \vec{\mathbf{B}} -\, \frac1c\, \frac{\partial\vec{\mathbf{E}}}{\partial t} & = \frac{4\pi}{c}\vec{\mathbf{j}} \\[1em] \nabla \cdot \vec{\mathbf{E}} & = 4 \pi \rho \\[0.5em] \nabla \times \vec{\mathbf{E}}\, +\, \frac1c\, \frac{\partial\vec{\mathbf{B}}}{\partial t} & = \vec{\mathbf{0}} \\[1em] \nabla \cdot \vec{\mathbf{B}} & = 0 \end{aligned} 
\begin{aligned}
\nabla \times \vec{\mathbf{B}} -\, \frac1c\, 
\frac{\partial\vec{\mathbf{E}}}{\partial t} & = 
\frac{4\pi}{c}\vec{\mathbf{j}} \\[1em]
\nabla \cdot \vec{\mathbf{E}} & = 4 \pi \rho \\[0.5em]
\nabla \times \vec{\mathbf{E}}\, +\, \frac1c\, 
\frac{\partial\vec{\mathbf{B}}}{\partial t} & = 
\vec{\mathbf{0}} \\[1em]
\nabla \cdot \vec{\mathbf{B}} & = 0 \end{aligned}

Matrices:

(a11a12a13a21a22a23a31a32a33)\begin{pmatrix} a_{11} & a_{12} & a_{13}\\ a_{21} & a_{22} & a_{23}\\ a_{31} & a_{32} & a_{33} \end{pmatrix} 
\begin{pmatrix}
a_{11} & a_{12} & a_{13}\\ 
a_{21} & a_{22} & a_{23}\\ 
a_{31} & a_{32} & a_{33}
\end{pmatrix}
[A1,1A1,2A2,1A2,2A3,1A3,2]+[B1,1B1,2B2,1B2,2B3,1B3,2]=[A1,1+B1,1A1,2+B1,2A2,1+B2,1A2,2+B2,2A3,1+B3,1A3,2+B3,2]{}() \begin{bmatrix} A_{1,1} & A_{1,2} \\ \colorbox{blue} A_{2,1} & \color{blue}A_{2,2} \\ A_{3,1} & A_{3,2} \end{bmatrix}+ \begin{bmatrix} B_{1,1} & B_{1,2} \\ B_{2,1} & B_{2,2} \\ B_{3,1} & B_{3,2} \end{bmatrix}= \begin{bmatrix} A_{1,1} + B_{1,1} & A_{1,2} + B_{1,2} \\ A_{2,1} + B_{2,1} & A_{2,2} + B_{2,2} \\ A_{3,1} + B_{3,1} & A_{3,2} + B_{3,2} \end{bmatrix} \begin{Bmatrix} \end{Bmatrix} \begin{pmatrix} \end{pmatrix} 
 \begin{bmatrix} A_{1,1} & A_{1,2} \\ \colorbox{blue} A_{2,1} &  \color{blue} A_{2,2} \\ A_{3,1} & A_{3,2} \end{bmatrix}+ 
 \begin{bmatrix} B_{1,1} & B_{1,2} \\ B_{2,1} & B_{2,2} \\ B_{3,1} & B_{3,2} \end{bmatrix}= 
 \begin{bmatrix} A_{1,1} + B_{1,1} & A_{1,2} + B_{1,2} \\ A_{2,1} + B_{2,1} & A_{2,2} + B_{2,2} \\ A_{3,1} + B_{3,1} & A_{3,2} + B_{3,2} \end{bmatrix} 
\begin{Bmatrix} \end{Bmatrix} 
\begin{pmatrix} \end{pmatrix}
[0⋯0⋮⋱⋮0⋯0]\begin{bmatrix} 0 & \cdots & 0 \\ \vdots & \ddots & \vdots \\ 0 & \cdots & 0 \end{bmatrix} 
\begin{bmatrix} 0 & \cdots & 0 \\ \vdots & 
\ddots & \vdots \\ 0 & \cdots & 0 \end{bmatrix}

Inline Statements

You\huge You can also\tiny also make use of inline\Large inline statements. The formula eπi+1=0e^{\pi i} + 1 = 0 is nicely produced within this text, as well as 5+5 =  105 + 5 \: = \; 10, $Aij+Bi,j=Ci,jA_{ij} + B{i,j} = C_{i,j} and ∑i=0ni2=(n2+n)(2n+1)6\sum_{i=0}^n i^2 = \frac{(n^2+n)(2n+1)}{6}. Also x1x_1 and x33∣01\left.\frac{x^3}{3}\right|_0^1 works well. Another example is lim⁡x→∞exp⁡(−x)=0\lim_{x \to \infty} \exp(-x) = 0 or 1x+1yy−z\frac{\frac{1}{x}+\frac{1}{y}}{y-z} or cos⁡(2θ)=cos⁡2θ−sin⁡2θ\cos (2\theta) = \cos^2 \theta - \sin^2 \theta or x33∣01\left.\frac{x^3}{3}\right\vert_0^1 or P(A=2|A2B>4)P\left(A=2\middle\vert\frac{A^2}{B}>4\right). The inner product given x,y∈Rnx, y \in \mathbb R^n is x′y=∑i=1nxiyix'y = \sum_{i=1}^n x_i y_i.

$\huge You $ can $\tiny also $ make use of $\Large inline $ statements. The formula $$ e^{\pi i} + 1 = 0 $$ is nicely produced within this text, as well as $$ 5 + 5 \: =  \; 10 $$, $$ $A_{ij} + B{i,j} = C_{i,j} $$ and  $$\sum_{i=0}^n i^2 = \frac{(n^2+n)(2n+1)}{6}$$. Also $$x_1$$ and $$\left.\frac{x^3}{3}\right|_0^1$$ works well. Another example is $$ \lim_{x \to \infty} \exp(-x) = 0$$ or $$\frac{\frac{1}{x}+\frac{1}{y}}{y-z}$$ or $$\cos (2\theta) = \cos^2 \theta - \sin^2 \theta$$ or $$\left.\frac{x^3}{3}\right\vert_0^1$$ or $$P\left(A=2\middle\vert\frac{A^2}{B}>4\right)$$.The inner product given $x, y \in \mathbb R^n$ is $xy = \sum_{i = 1}^n x_i y_i$.

Sum of Series

∑i=1k+1i=(∑i=1ki)+(k+1)\displaystyle\sum_{i=1}^{k+1}i \displaystyle= \left(\sum_{i=1}^{k}i\right) +(k+1) 
$$
\displaystyle\sum_{i=1}^{k+1}i
\displaystyle= \left(\sum_{i=1}^{k}i\right) +(k+1)
$$

Product Notation

1+q2(1−q)+q6(1−q)(1−q2)+⋯=∏j=0∞1(1−q5j+2)(1−q5j+3), for ∣q∣<1.\displaystyle1 + \frac{q^2}{(1-q)}+\frac{q^6}{(1-q)(1-q^2)}+\cdots = \displaystyle \prod_{j=0}^{\infty}\frac{1}{(1-q^{5j+2})(1-q^{5j+3})}, \displaystyle\text{ for }\lvert q\rvert < 1. 
$$
\displaystyle1 +  \frac{q^2}{(1-q)}+\frac{q^6}{(1-q)(1-q^2)}+\cdots
= \displaystyle \prod_{j=0}^{\infty}\frac{1}{(1-q^{5j+2})(1-q^{5j+3})},
\displaystyle\text{ for }\lvert q\rvert < 1.
$$

Cross Product

V1×V2∣ijk∂X∂u∂Y∂u0∂X∂v∂Y∂v0∣\mathbf{V}_1 \times \mathbf{V}_2 \begin{vmatrix} \mathbf{i} & \mathbf{j} & \mathbf{k} \\ \frac{\partial X}{\partial u} & \frac{\partial Y}{\partial u} & 0 \\ \frac{\partial X}{\partial v} & \frac{\partial Y}{\partial v} & 0 \end{vmatrix} 
\mathbf{V}_1 \times \mathbf{V}_2 =  \begin{vmatrix}
\mathbf{i} & \mathbf{j} & \mathbf{k} \\
\frac{\partial X}{\partial u} &  \frac{\partial Y}{\partial u} & 0 \\
\frac{\partial X}{\partial v} &  \frac{\partial Y}{\partial v} & 0
\end{vmatrix}

Arrows

← → ← → ↑ ⇑ ↓ ⇓ ↕ ⇕\gets\ \to\ \leftarrow\ \rightarrow\ \uparrow\ \Uparrow\ \downarrow\ \Downarrow\ \updownarrow\ \Updownarrow 
$$
\gets\ \to\ \leftarrow\ \rightarrow\ \uparrow\ \Uparrow\ 
\downarrow\ \Downarrow\ \updownarrow\ \Updownarrow
$$
⇐ ⇒ ↔ ⇔↦ ↩\Leftarrow\ \Rightarrow\ \leftrightarrow\ \Leftrightarrow \mapsto\ \hookleftarrow 
\Leftarrow\ \Rightarrow\ \leftrightarrow\ \Leftrightarrow 
\mapsto\ \hookleftarrow
↼ ↽ ⇌ ⟵ ⟸ ⟶\leftharpoonup\ \leftharpoondown\ \rightleftharpoons\ \longleftarrow\ \Longleftarrow\ \longrightarrow 
\leftharpoonup\ \leftharpoondown\ \rightleftharpoons
 \longleftarrow\ \Longleftarrow\ \longrightarrow

Accents

x^ x⃗ x¨\hat{x}\ \vec{x}\ \ddot{x} 
\hat{x}\ \vec{x}\ \ddot{x}

Evaluation at limits

x33∣01\left.\frac{x^3}{3}\right|_0^1 
\left.\frac{x^3}{3}\right|_0^1

Case Definitions

f(n)={n2,if n is even3n+1,if n is oddf(n) = \begin{cases} \frac{n}{2}, & \text{if } n\text{ is even} \\ 3n+1, & \text{if } n\text{ is odd} \end{cases} 
f(n) = \begin{cases} \frac{n}{2}, & \text{if } n\text{ is even} 
\\ 3n+1, & \text{if } n\text{ is odd} \end{cases}

Statistics

f(n)={n2,if n is even3n+1,if n is oddf(n) = \begin{cases} \frac{n}{2}, & \text{if } n\text{ is even} \\ 3n+1, & \text{if } n\text{ is odd} \end{cases} 
f(n) = \begin{cases} \frac{n}{2}, & \text{if } n\text{ is even} 
\\ 3n+1, & \text{if } n\text{ is odd} \end{cases}
(nk){n \choose k} 
{n \choose k}

Punctuation

f(x)=1+x(x≥−1)f(x) = \sqrt{1+x} \quad (x \ge -1) 
f(x) = \sqrt{1+x} \quad (x \ge  -1)
f(x)∼x2(x→∞)f(x) \sim x^2 \quad (x\to\infty) 
f(x) \sim x^2 \quad (x\to\infty)
f(x)=1+x,x≥−1f(x) = \sqrt{1+x}, \quad x \ge -1 
f(x) = \sqrt{1+x}, \quad x \ge -1
f(x)∼x2,x→∞f(x) \sim x^2, \quad x\to\infty 
f(x) \sim x^2, \quad x\to\infty
LT(λ⃗)=∑(x,s)∈Tlog⁡P(s∣x)−∑i=1mλi22σ2\mathcal L_{\mathcal T}(\vec{\lambda}) = \sum_{(\mathbf{x},\mathbf{s})\in \mathcal T} \log P(\mathbf{s}\mid\mathbf{x}) - \sum_{i=1}^m \frac{\lambda_i^2}{2\sigma^2} 
\mathcal L_{\mathcal T}(\vec{\lambda})
    = \sum_{(\mathbf{x},\mathbf{s})\in \mathcal T}
       \log P(\mathbf{s}\mid\mathbf{x}) - \sum_{i=1}^m
       \frac{\lambda_i^2}{2\sigma^2}
S(ω)=αg2ω5 e[−0.74{ωUω19.5g}−4]S (\omega)=\frac{\alpha g^2}{\omega^5} \, e ^{[-0.74\bigl\{\frac{\omega U_\omega 19.5} {g}\bigr\}^{-4}]} 
S (\omega)=\frac{\alpha g^2}{\omega^5} \,
e ^{[-0.74\bigl\{\frac{\omega U_\omega 19.5}
{g}\bigr\}^{-4}]}

Notatition

a ∈ Aa \: \in \: A : ants in Animal Kingdom // a elements belonging to A

B⊂AB \subset A : every element of B found in A (subset) // inclusion

:or∣  : or | \; : such that e.g. B={a ∈ A:a is ants}B = \begin{Bmatrix} a \: \in \: A : a \: is \: ants \end{Bmatrix}

(x R y)\begin{pmatrix} x \: R \: y \end{pmatrix} : relation between x and y

dom R={x: for some y (x R y)}dom \: R = \begin{Bmatrix} x : \: for \: some \: y \: \begin{pmatrix} x \: R \: y \end{pmatrix} \end{Bmatrix} : a domain relation formed by a set of input values of x, at least one value of x has a relation to y // domain (inputs) and range (outputs).

f: X→Y    or    f(x) = y    or    (x,y) ∈ ff : \: X \rightarrow Y \; \; or \; \; f(x) \: = \: y \; \; or \; \; \begin{pmatrix} x, y \end{pmatrix} \: \in \: f : a function maps or transforms

:=:= means defined as

Logical Symbols

∧\wedge : and (conjuction)

∨\vee : or (disjucntion)

∃\exists : some

∀\forall : all

¬\neg : negates

→\rightarrow : implication ie. p→qp \rightarrow q means if p is true, then q is also true

↔\leftrightarrow : bicondition ie. p↔qp \leftrightarrow q means both are jointly true or both are jointly false

Further Reading

# Syntax# Markdown# Latex