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.

Editing Tips for Ghost
See here for more Ghost editing tips: 👇
Using Ghost - Ran Ding
Notes on using Ghost platform.

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

Recent Progress in Language Modeling
OverviewThis page is a high-level summary / notes of various recent results in languagemodeling with little explanations. Papers to cover are as follows: [1] AWD Language Model * Merity, Stephen, Nitish Shirish Keskar, and Richard Socher. “Regularizing and optimizing LSTM language models.” a…

Code Blocks and Syntax Highlighting

Ref:

Ghost Docs
Everything you need to know about working with the Ghost professional publishing platform.

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>

Featured-First Post Order in Ghost

Featured-First Post Order in Ghost
Making featured posts show up first in Ghost Casper theme (instead of the default reverse chronological order).

Ghost Themes Local Development Setup

Ghost Themes Local Development Setup
Local development setup for Ghost themes.

Floating Table of Content

Conditional Table of Contents in Ghost
Automatically generated table of contents in Ghost, conditionally shown when it is not empty.

Add Preview for Member-Only Content

How to Enable Preview for Member-Only Content in Ghost
Automatically add preview / teaser content for Member-Only posts in Ghost.