Editing Tips for Ghost

See here for more Ghost editing tips: 👇

Using Ghost - Ran Ding

Notes on using Ghost platform.

Ran DingRan Ding

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.

<!-- 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

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…

Ran DingRan Ding

Code Blocks and Syntax Highlighting

Ref:

Ghost Docs

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

Ghost - The 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).

Ran DingRan Ding

Ghost Themes Local Development Setup

Ghost Themes Local Development Setup

Local development setup for Ghost themes.

Ran DingRan Ding

Floating Table of Content

Conditional Table of Contents in Ghost

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

Ran DingRan Ding

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.

Ran DingRan Ding