# Editing Tips for Ghost

I recently switched to Ghost to host my blog, Here are some editing tips as I learn to use this platform.

See here for more Ghost editing tips: đź‘‡

## Rendering $\LaTeX$ with MathJax

Add the following in site header code injection

```
<script>
MathJax = {
tex: {
inlineMath: [['$', '$'], ['\\(', '\\)']], <!-- allow $ for inline math -->
tags: "ams" <!-- equation numbering -->
},
svg: {
fontCache: 'global'
}
};
</script>
<script type="text/javascript" id="MathJax-script" async
src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-svg.js">
</script>
```

## Defining New $\LaTeX$ Commands

You can define new comamnds as usual either in the head code injection for the whole site or on individual post pages, or inside the post text editor directly. It's just something MathJax will parse and understand.

$$ \newcommand{\argmin}{\mathop{\mathrm{argmin}}} \newcommand{\argmax}{\mathop{\mathrm{argmax}}} \renewcommand{\vec}[1]{\boldsymbol{#1}} $$```
<!-- define a few new tex commands -->
$$
\newcommand{\argmin}{\mathop{\mathrm{argmin}}}
\newcommand{\argmax}{\mathop{\mathrm{argmax}}}
\renewcommand{\vec}[1]{\boldsymbol{#1}}
$$
```

## Multiline Equations and Equation Numbering

We can define a multiple equation like this. Notice the `\split`

and `\label`

.

```
$$
\begin{equation}
\begin{split}
\hat\theta^t &= \argmax_{\theta} \mathcal L(q^t,\theta) \\\\
&= \argmax_{\theta} \sum_i \mathbb{E}_{z \sim Q^t} \left[\log\left(p(x_i,z;\theta) \right) \right] \\\\
&= \argmax_{\theta} \sum_i \int p(z\vert x_i; \hat\theta^{t-1}) \log\left(p(x_i,z;\theta)\right) dz \\\\
\end{split}
\label{eq:eq1}
\end{equation}
$$
```

And it looks like this

$$ \begin{equation} \begin{split} \hat\theta^t &= \argmax_{\theta} \mathcal L(q^t,\theta) \\\\ &= \argmax_{\theta} \sum_i \mathbb{E}_{z \sim Q^t} \left[\log\left(p(x_i,z;\theta) \right) \right] \\\\ &= \argmax_{\theta} \sum_i \int p(z\vert x_i; \hat\theta^{t-1}) \log\left(p(x_i,z;\theta)\right) dz \\\\ \end{split} \label{eq:eq1} \end{equation} $$Because we have `\label{eq:eq1}`

in the equation block above. We can refer to the Â equation by `$\ref{eq:eq1}$`

, and it will look like this Eq $\ref{eq:eq1}$

### Pro-Tip:

Note: In principle these LaTex blocks can be put in markdown cell or directly as plain text. However, Ghost editor will try to process it as markdown first, so `_{something}_`

might be mistaken as *{something} *(italic formatting). **So it is best to put these in an html cell to be safe.**

## Make Tables Wrap Text

Somehow the text in the table (by markdown) is not wrapping, you can overwrite it by injecting the following into the page's header.

```
<style>
table {
white-space: normal !important;
}
</style>
```

Example

## Code Blocks and Syntax Highlighting

Ref:

highlight.js seems to look better than prism.js

```
<!-- site header -->
<link rel="stylesheet"
href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/10.5.0/styles/atom-one-dark.min.css">
<!-- site footer -->
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/10.5.0/highlight.min.js"></script>
<script>hljs.initHighlightingOnLoad();</script>
```

## Disabling Homepage Banner (in Casper Theme)

Add in header code injection

I added a class `home-header-hide`

at https://github.com/dingran/casper-modified/blob/main/index.hbs#L9

Then added code injection to actually hide it.

`<style> .home-header-hide { display: none; } </style>`