Writing Gatsby Articles in Markdown and LaTeX
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
- Dog
- Cat
1. Dog
2. Cat
- Dog
- Cat
- Dog
- Cat
Images
![](./pic.jpg "Simba")
Styling with html and css
<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
[Google](https://www.google.com)
Click a referenced ref1 url
Click a referenced [ref1] url
[ref1]: https://www.google.com "Google"
[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:
$ a^2 + b^2 = c^2 $
Multiline
$$
a^2 + b^2 = c^2
$$
Calculus
$$
f(x) = \int_{-\infty}^\infty
\hat f(\xi)\,e^{2 \pi i \xi x}
\,d\xi
$$
\int u \frac{dv}{dx}\,dx=uv-\int \frac{du}{dx}v\,dx
\oint \vec{F} \cdot d\vec{s}=0
Fractions on fractions
\frac{\frac{1}{x}+\frac{1}{y}}{y-z}
Repeating Fractions
\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
Symbols
\surd\ \barwedge\ \veebar\ \odot\ \oplus\ \otimes
\oslash\ \circledcirc\ \boxdot\ \bigtriangleup
Lorenz Equations:
\begin{aligned}
\dot{x} & = \sigma(y-x) \\
\dot{y} & = \rho x - y - xz \\
\dot{z} & = -\beta z + xy
\end{aligned}
Maxwell's Equations
\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:
\begin{pmatrix}
a_{11} & a_{12} & a_{13}\\
a_{21} & a_{22} & a_{23}\\
a_{31} & a_{32} & a_{33}
\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}
\begin{bmatrix} 0 & \cdots & 0 \\ \vdots &
\ddots & \vdots \\ 0 & \cdots & 0 \end{bmatrix}
Inline Statements
can make use of statements. The formula is nicely produced within this text, as well as , $ and . Also and works well. Another example is or or or or . The inner product given is .
$\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
$$
\displaystyle\sum_{i=1}^{k+1}i
\displaystyle= \left(\sum_{i=1}^{k}i\right) +(k+1)
$$
Product Notation
$$
\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
\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
$$
\Leftarrow\ \Rightarrow\ \leftrightarrow\ \Leftrightarrow
\mapsto\ \hookleftarrow
\leftharpoonup\ \leftharpoondown\ \rightleftharpoons
\longleftarrow\ \Longleftarrow\ \longrightarrow
Accents
\hat{x}\ \vec{x}\ \ddot{x}
Evaluation at limits
\left.\frac{x^3}{3}\right|_0^1
Case Definitions
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) = \begin{cases} \frac{n}{2}, & \text{if } n\text{ is even}
\\ 3n+1, & \text{if } n\text{ is odd} \end{cases}
{n \choose k}
Punctuation
f(x) = \sqrt{1+x} \quad (x \ge -1)
f(x) \sim x^2 \quad (x\to\infty)
f(x) = \sqrt{1+x}, \quad x \ge -1
f(x) \sim x^2, \quad x\to\infty
\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 (\omega)=\frac{\alpha g^2}{\omega^5} \,
e ^{[-0.74\bigl\{\frac{\omega U_\omega 19.5}
{g}\bigr\}^{-4}]}
Notatition
: ants in Animal Kingdom // a elements belonging to A
: every element of B found in A (subset) // inclusion
: such that e.g.
: relation between x and y
: 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).
: a function maps or transforms
means defined as
Logical Symbols
: and (conjuction)
: or (disjucntion)
: some
: all
: negates
: implication ie. means if p is true, then q is also true
: bicondition ie. means both are jointly true or both are jointly false