Editing Tips for Ghost

•
Using 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: 👇

Link Preview Block Error

Link-preview block missing closing marker (:::)

Show malformed block 
:::link-preview
url="https://rd.me/tag/using-ghost/"
title="Using Ghost - Ran Ding"
description="Notes on using Ghost platform."
author="Ran Ding"
publisher="Ran Ding"
icon="/images/blog/editing-tips-for-ghost/0_favicon.png"
thumbnail="/images/blog/editing-tips-for-ghost/1_jean-philippe-delberghe-75xPHEQBmvA-unsplash.jpg"
:::

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

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

Link Preview Block Error

Link-preview block missing closing marker (:::)

Show malformed block 
:::link-preview
url="https://rd.me/recent-progress-in-language-modeling"
title="Recent Progress in Language Modeling"
description="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…"
author="Ran Ding"
publisher="Ran Ding"
icon="/images/blog/editing-tips-for-ghost/2_favicon.png"
thumbnail="/images/blog/editing-tips-for-ghost/3_photo-1497796742626-fe30f204ec54"
:::

Code Blocks and Syntax Highlighting

Ref:

Link Preview Block Error

Link-preview block missing closing marker (:::)

Show malformed block 
:::link-preview
url="https://ghost.org/docs/tutorials/code-syntax-highlighting/"
title="Ghost Docs"
description="Everything you need to know about working with the Ghost professional publishing platform."
author="Ghost - The Professional Publishing Platform"
thumbnail="https://ghost.org/images/meta/Ghost-Tutorials.jpg"
:::

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

Link Preview Block Error

Link-preview block missing closing marker (:::)

Show malformed block 
:::link-preview
url="https://rd.me/featured-first-post-order-in-ghost"
title="Featured-First Post Order in Ghost"
description="Making featured posts show up first in Ghost Casper theme (instead of the default reverse chronological order)."
author="Ran Ding"
publisher="Ran Ding"
icon="/images/blog/editing-tips-for-ghost/5_favicon.png"
thumbnail="/images/blog/editing-tips-for-ghost/6_photo-1589495374906-b7f5ca5de879"
:::

Ghost Themes Local Development Setup

Link Preview Block Error

Link-preview block missing closing marker (:::)

Show malformed block 
:::link-preview
url="https://rd.me/ghost-theme-local-development"
title="Ghost Themes Local Development Setup"
description="Local development setup for Ghost themes."
author="Ran Ding"
publisher="Ran Ding"
icon="/images/blog/editing-tips-for-ghost/7_favicon.png"
thumbnail="/images/blog/editing-tips-for-ghost/8_photo-1556075798-4825dfaaf498"
:::

Floating Table of Content

Link Preview Block Error

Link-preview block missing closing marker (:::)

Show malformed block 
:::link-preview
url="https://rd.me/conditional-table-of-contents-in-ghost"
title="Conditional Table of Contents in Ghost"
description="Automatically generated table of contents in Ghost, conditionally shown when it is not empty."
author="Ran Ding"
publisher="Ran Ding"
icon="/images/blog/editing-tips-for-ghost/9_favicon.png"
thumbnail="/images/blog/editing-tips-for-ghost/10_photo-1502680390469-be75c86b636f"
:::

Add Preview for Member-Only Content

Link Preview Block Error

Link-preview block missing closing marker (:::)

Show malformed block 
:::link-preview
url="https://rd.me/member-preview"
title="How to Enable Preview for Member-Only Content in Ghost"
description="Automatically add preview / teaser content for Member-Only posts in Ghost."
author="Ran Ding"
publisher="Ran Ding"
icon="/images/blog/editing-tips-for-ghost/11_favicon.png"
thumbnail="/images/blog/editing-tips-for-ghost/12_Screen-Recording-2021-01-24-at-05.05.09-PM.gif"
:::

, '$'], ['\\(', '\\)']], <!-- 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 MATH_PLACEHOLDER_11_END 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 -->

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 MATH_PLACEHOLDER_12_END , and it will look like this Eq MATH_PLACEHOLDER_13_END

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

Link Preview Block Error

Link-preview block missing closing marker (:::)

Show malformed block 
:::link-preview
url="https://rd.me/recent-progress-in-language-modeling"
title="Recent Progress in Language Modeling"
description="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…"
author="Ran Ding"
publisher="Ran Ding"
icon="/images/blog/editing-tips-for-ghost/2_favicon.png"
thumbnail="/images/blog/editing-tips-for-ghost/3_photo-1497796742626-fe30f204ec54"
:::

Code Blocks and Syntax Highlighting

Ref:

Link Preview Block Error

Link-preview block missing closing marker (:::)

Show malformed block 
:::link-preview
url="https://ghost.org/docs/tutorials/code-syntax-highlighting/"
title="Ghost Docs"
description="Everything you need to know about working with the Ghost professional publishing platform."
author="Ghost - The Professional Publishing Platform"
thumbnail="https://ghost.org/images/meta/Ghost-Tutorials.jpg"
:::

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

Link Preview Block Error

Link-preview block missing closing marker (:::)

Show malformed block 
:::link-preview
url="https://rd.me/featured-first-post-order-in-ghost"
title="Featured-First Post Order in Ghost"
description="Making featured posts show up first in Ghost Casper theme (instead of the default reverse chronological order)."
author="Ran Ding"
publisher="Ran Ding"
icon="/images/blog/editing-tips-for-ghost/5_favicon.png"
thumbnail="/images/blog/editing-tips-for-ghost/6_photo-1589495374906-b7f5ca5de879"
:::

Ghost Themes Local Development Setup

Link Preview Block Error

Link-preview block missing closing marker (:::)

Show malformed block 
:::link-preview
url="https://rd.me/ghost-theme-local-development"
title="Ghost Themes Local Development Setup"
description="Local development setup for Ghost themes."
author="Ran Ding"
publisher="Ran Ding"
icon="/images/blog/editing-tips-for-ghost/7_favicon.png"
thumbnail="/images/blog/editing-tips-for-ghost/8_photo-1556075798-4825dfaaf498"
:::

Floating Table of Content

Link Preview Block Error

Link-preview block missing closing marker (:::)

Show malformed block 
:::link-preview
url="https://rd.me/conditional-table-of-contents-in-ghost"
title="Conditional Table of Contents in Ghost"
description="Automatically generated table of contents in Ghost, conditionally shown when it is not empty."
author="Ran Ding"
publisher="Ran Ding"
icon="/images/blog/editing-tips-for-ghost/9_favicon.png"
thumbnail="/images/blog/editing-tips-for-ghost/10_photo-1502680390469-be75c86b636f"
:::

Add Preview for Member-Only Content

Link Preview Block Error

Link-preview block missing closing marker (:::)

Show malformed block 
:::link-preview
url="https://rd.me/member-preview"
title="How to Enable Preview for Member-Only Content in Ghost"
description="Automatically add preview / teaser content for Member-Only posts in Ghost."
author="Ran Ding"
publisher="Ran Ding"
icon="/images/blog/editing-tips-for-ghost/11_favicon.png"
thumbnail="/images/blog/editing-tips-for-ghost/12_Screen-Recording-2021-01-24-at-05.05.09-PM.gif"
:::

Copyright 2025, Ran Ding
Editing Tips for Ghost