Solution to cross reference for GitHub page and StackEdit

Cross reference

Posted by Jiayin Guo on February 18, 2019

Update: check my next post for better solution for the cross reference in StackEdit.

0. Introduction

As suggested by the title, this post is intended to solve the cross reference issue when I was writing my first post which is rendered on GitHub page and StackEdit.

For example, given the theorem and equation like this:

Theorem. Every linear space has a basis.

The workflow of this blog is that I edit a post in StackEdit as a Markdown file and then put this file in my GitHub page repository which is a blog generated by jekyll. The Markdown engine for GitHub is Kramdown and for StackEdit is Markdown Extra, I want to find a solution to this issue that one file can be rendered at both engines with durable effect.

One subproblem to that is to numbering the theorem and equations automatically, so that one can refer them by the numbers.

Before we go into the solution, if one does not insist working on both Kramdown and Markdown Extra. One may use some Markdown engine like Bookdown to solve the cross reference issue.

1. Automatic numbering and cross reference for equations

For the numbering and cross reference of equations, MathJax provides automatic numbering and cross reference here

Equations can be numbered in two ways: either number the AMSmath environments as LaTeX would, or number all displayed equations (the example above uses AMS-style numbering). Set autoNumber to “all” if you want every displayed equation to be numbered. You can use \notag or \nonumber to prevent individual equations from being numbered, and \tag{} can be used to override the usual equation number with your own symbol instead.

As noted here , \begin{equation}\end{equation} syntax has to be wrapped with two dollars as boundary in Kramdown. So I have to set "all" to the autoNumber option in order to run on both engines.

2. Automatic numbering and cross reference for theorems

Automatic numbering for theorems for both engines is still a problem to my knowledge.

DrZ.ac give some LaTex style treatment for theorem environment.In his post, Felix gives one improvement and Pierre-Olivier Parisé gives one way to automatic numbering the theorems using CSS. It works well on GitHub Page as below.

<div class="definition">
A set $C$ is *convex* if for all
$x,y \in C$ and for all
$\alpha \in [0,1]$ the point
$\alpha x + (1-\alpha) y \in C$.
</div>

But this can not be applied for the StackEdit, as StackEdit does not give access to modify CSS file. Theorem part is missing in StackEdit’s preview page. One compromise is to use the following style. which will work for both engines.

> **Theorem. **
>Every linear space has a basis.

Theorem. Every linear space has a basis.

For the cross reference issue, as suggested by Benweet in here, one may create a hidden tag by following code, which is a feature in Markdown Extra.

Refer the label like this(#somelabel)
Something.
###### {#somelabel}
>**Theorem**.
>Every linear space has a basis.

with effect as follows.

Refer the label like this

{#somelabel}

Theorem. Every linear space has a basis.

This solution solves the cross reference for StackEdit.

For the Kramdown in GitHub page, my personal treatment is to add the following code and save it as hideh6.css

.post-container h6{
  visibility: hidden;
}

And link this file in the head tag of root HTML file.

<link rel="stylesheet" href="/hideh6.css">

In the layout of this blog, I save hideh6.css in /css directory and add

<link rel="stylesheet" href="/blog/css/syntax.css">

in head tag of \_includes\head.html.