aaroncql / katex-github-chrome-extension

A Chrome extension to display LaTeX flavoured math in GitHub Markdown previews.

KaTeX GitHub Chrome Extension

Display LaTeX flavoured math in GitHub Markdown previews.

If this is installed correctly, the following should show a properly rendered equation in the centre of the page:

$$ \nabla L_D(\vec{w}) = \left[ \frac{\partial L_D}{\partial w_0},\dots, \frac{\partial L_D}{\partial w_n} \right] $$

Features

• Only targets Markdown previews: code blocks and code previews will not be affected
• Fast and efficient rendering using KaTeX
• Supports current GitHub website: including internal navigations, and when previewing an edited Markdown file

Installing

Install via the Chrome Web Store.

Developer guide

Dependencies

rollup-plugin-chrome-extension

This project is bootstrapped using rollup-plugin-chrome-extension. All code is written in the src folder, and the main point of entry is the src/index.js file.

KaTeX

The auto-render extension is used to recursively search for all text nodes and replace them with the corresponding rendered math.

As per the docs, the css and font files must be included in dist. As such, rollup-plugin-copy is used to copy the KaTeX fonts and css located in node_modules to the src/assets folder. These files are referenced in src/manifest.json, and will be automatically included in dist after running yarn build.

Note: files in the src/assets folder SHOULD NOT be modified. Any modifications will be overwritten when building the files anyway.

Local development

# install all dependencies
$ yarn
# build non-minified bundle to /dist
$ yarn build
# watch for changes and build non-minified bundle to /dist; use this for developing
$ yarn watch

Head over to chrome://extensions/, and load the dist folder.

Publishing

# build minified bundle and zip it for chrome store upload
$ yarn build:prod

After running the above command, the built .zip file should be located in the /releases directory, which can then be uploaded to the Chrome webstore.

Edit version in package.json; edit chrome extension's name and description in manifest.json.

Known issues

(FIXED) Newlines using double backslashes \\ may not render correctly

FIX: custom macros are provided to the katex options such that every single backslash is macroed to a double backslash.

GitHub's Markdown automatically escapes the double backslash, resulting in only a single backslash in the output HTML.

% in original Markdown file:
$$
x = 23 \\
x + 2 = 25
$$

% would result in HTML as:
$$ x = 23 \ x + 2 = 25 $$

Examples

Raw	Rendered	Working?
$1 \\ 2$	$1 \ 2$	✔️
$1\\ 2$	$1\ 2$	✔️
$1\\2$	$1\2$	✔️

(FIXED) Subscripts using _ may not render correctly

FIX: see #2

% in original Markdown file:
$ \text{H}_h + X_\text{x} $

% would result in HTML as:
$ \text{H}<em>h + X</em>\text{x} $

Examples

Raw	Rendered	Working?
$H_h + X_x$	$H_h + X_x$	✔️
$\text{H}_h + X_\text{x}$	$\text{H}h + X\text{x}$	✔️

Contributing

Feature requests, bug reports, and PRs are welcome!

License

MIT License

katex-github-chrome-extension's Issues

Parenthesis and underscore doesn't work?

Hi, this is an extension that I wanted, awesome.

I tested this in my notes and it works here: ( sorry for Japanese text )
https://github.com/mathmathniconico/Notes/blob/master/Manifold/Tangent.md

but it doesn't work here:
https://github.com/mathmathniconico/Notes/blob/master/ConvergentSpace/Conv.md

So, I think the problem is not just underscore, but '}_' or something.

I hope you will fix this problem, thank you.

Issues rendering `\{` and `\}`

If I write \{0, \dots, k-1\}, then the render omits the \{ and \} and only shows 0, \dots, k-1. Any help or workarounds?

Another subscripting issue.

Thanks for fixing the issue. You helped me a lot!

And I came across another, but similar bug. So I report this. The sentence below has the same <em> tag.

$(f_{i})_{\ast}\mathscr{H}\rightarrow f_{i}(z)$

New <em> tag problem.

Thank you for your tough work. The last issue was fixed but I noticed some new problems, they might appear from v0.3.1. Below I took examples from my repository. All of them is similar, <em> tag, problem. \mathscr{...} is problematic?

$\bigcap_{\lambda\in\Lambda}\mathscr{F}_{\lambda}$
$(Y_{i}, \mathscr{G}_{i})$
$f_{i}\colon X\rightarrow Y_{i}$
$h^{-1}(f_{i}^{-1}(G_{i}))\in\mathscr{H}$
$(f_{i}\circ h)^{-1}(G_{i})\in\mathscr{H}$
$(\prod Y_{i}, \prod\mathscr{G}_{i})$
$\lbrace g_{ij}\circ f_{i} : i\in I, j\in J_{i} \rbrace$
$V\cap W\in\mathscr{A}_{\neg S}$
$\mathscr{V}\neq\mathscr{U}_{j}$
$\mathscr{U}_{j}$
$U_{j}\in\mathscr{U}_{j}$
$U\in\mathscr{U}_{1}\cap\dotsb\cap\mathscr{U}_{n}\subset\mathscr{V}$

GitHub wiki pages support

Hi, does this extension support GitHub wiki pages? If not, would it be possible for this to be added?

Unexpected behavior(GitHub now use MathJax)

I don't know if it was a Chrome update or something from Github, but a strange behavior caused my equations to disappear, here's an example below, where in the first equation I leave a blank line before the equation, in the second equation I don't leave an empty line, I put a text before and that makes the equation appear

First equation

$$\huge
G_{\mu\nu}=8\pi G(T_{\mu\nu}+\rho_{\Lambda}g_{\mu\nu})
$$

Second equation
$$\huge
\int_{a}^{b} f'(x)dx=f(b)-f(a)
$$

First equation

$$\huge G_{\mu\nu}=8\pi G(T_{\mu\nu}+\rho_{\Lambda}g_{\mu\nu}) $$

Second equation
$$\huge
\int_{a}^{b} f'(x)dx=f(b)-f(a)
$$

Underscores problem in math expression

I encountered new problem.

$$
\begin{aligned}
(a/\theta)+_{\theta}(b/\theta) &:=(a+b)/\theta \\
(a/\theta)\cdot_{\theta}(b/\theta) &:=ab/\theta
\end{aligned}
$$

This doesn't work. One line is OK. So I think two underscores after + and \cdot do bad thing.

Feature Request: Add support for Github Issues

It would be very handy if the renderer also worked in GitHub Issues

Example (this should render in this issue)

$e^{i\pi} + 1 = 0$

Thanks for your work, your extension has been very useful to me.

GitHub PR support

Hi, Would it be possible to add support for PR?

Regression of #21?

I think I found a case where #21 causes problems.

When I access this URL, (https://github.com/AaronCQL/katex-github-chrome-extension/issues/20#issuecomment-1068045560) math rendering would have occurred infinitely. if the URL doesn't include hash, it's fine.

can you reproduce this?