Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/teammeow/vscode-math-to-image

📐 Render LaTeX math equations in any Markdown file!
https://github.com/teammeow/vscode-math-to-image

latex vscode-extension

Last synced: 3 months ago
JSON representation

📐 Render LaTeX math equations in any Markdown file!

Host: GitHub
URL: https://github.com/teammeow/vscode-math-to-image
Owner: TeamMeow
License: mit
Archived: true
Created: 2020-08-01T08:31:21.000Z (over 4 years ago)
Default Branch: master
Last Pushed: 2022-04-11T11:42:40.000Z (over 2 years ago)
Last Synced: 2024-09-20T02:12:00.881Z (3 months ago)
Topics: latex, vscode-extension
Language: TypeScript
Homepage:
Size: 1.75 MB
Stars: 148
Watchers: 3
Forks: 13
Open Issues: 9
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE

Awesome Lists containing this project

README

        




Math » Image


📐 We can help you render LaTeX math equations in any Markdown file! 

[![Azure DevOps builds (branch)](https://img.shields.io/azure-devops/build/MeowTeam/9f842be1-8208-4cb2-ab10-228d34a2c525/1/master?color=578a8a&label=azure%20pipelines&logo=azure-pipelines)](https://dev.azure.com/MeowTeam/vscode-math-to-image/_build/latest?definitionId=1&branchName=master)

[![Visual Studio Marketplace](https://img.shields.io/visual-studio-marketplace/v/MeowTeam.vscode-math-to-image?color=db8465&label=vs%20marketplace&logo=visual-studio)](https://marketplace.visualstudio.com/items?itemName=MeowTeam.vscode-math-to-image)

![Visual Studio Marketplace Downloads](https://img.shields.io/visual-studio-marketplace/d/MeowTeam.vscode-math-to-image?label=downloads&color=82a0ba)

![Visual Studio Marketplace Rating (Stars)](https://img.shields.io/visual-studio-marketplace/stars/MeowTeam.vscode-math-to-image?color=e89927)



This is a VS Code extension to help you convert a standard LaTeX math equation like `$E=mc^2$` to an image like  (remote) or a local SVG which can be embedded inside Markdown files or websites that doesn't support rendering LaTeX yet. ~~(That's you GitHub!)~~

Read more about _Math to Image_ here:

-  **少数派：**[不支持 LaTeX 也能插入数学公式，这个小插件帮你实现「徒手渲染」](https://sspai.com/post/61877)。

-  **Medium:** [VS Code Math to Image: Write LaTeX Math Equations in GitHub Markdown the Easy Way!](https://medium.com/spencerweekly/vs-code-math-to-image-write-latex-math-equations-in-github-markdown-the-easy-way-9fa8b81dc910?source=friends_link&sk=cff035b443fb81f5b20a47370f23aed3)

Table of Contents


- [Demo](#demo)

- [Features](#features)

  - [Rendering remotely](#rendering-remotely)

  - [Rendering locally](#rendering-locally)

- [Extension Settings](#extension-settings)

- [Change Log](#change-log)

## Demo

![](assets/vscode-math-to-image.gif)

## Features

There are two modes in which we will render your math equations in Markdown:

* Locally (with MathJax and sourcing relative SVG), and...

* Remotely (with GitHub's LaTeX rendering server).

### Rendering remotely

This is actually a hack. GitHub won't render LaTeX equations inside normal places like GitHub README, but it can render them in Jupyter notebooks, so we took advantage of this feature, utilizing GitHub's equation rendering server to embed SVG equations in GitHub. (See here for details: [A hack for showing LaTeX formulas in GitHub markdown](https://gist.github.com/a-rodin/fef3f543412d6e1ec5b6cf55bf197d7b).)

Basically we can convert a standard LaTeX math equation like the *Gaussian Normal Distribution*...

```latex

$$

P(x) = \frac{1}{\sigma\sqrt{2\pi}} e^{\frac{-(x-\mu)^2}{2\sigma^2}}

$$

```

... to a rendered image tag with the help of GitHub's math rendering server:

```html



```



In addition to GitHub's rendering server, we also newly added support for CodeCogs' rendering server:

```html



```



### Rendering locally

Not everywhere accept external SVGs. To circumvent this type of scenario, we can render math equations directly to local SVGs (with MathJax), and embed these local SVGs into our Markdown as a workaround.

We can convert the same LaTeX math equation:

```latex

$$

P(x) = \frac{1}{\sigma\sqrt{2\pi}} e^{\frac{-(x-\mu)^2}{2\sigma^2}}

$$

```

To a local SVG like: `svg/e40qQ5G9jw.svg`, which will be saved to a dedicate folder called `svg`, and sourced inside the Markdown file that requires math-embedding.

> 🌸 NOTE: There used to be a demo SVG here, but Visual Studio Marketplace won't allow us to add local SVGs inside their README.

If you are reading this on GitHub, you can see that both of these methods work when we need to add math equations to READMEs or other Markdown files on GitHub.

See [examples](examples/example.md) for more math equation rendering scenarios, i.e, inline math, aligned environments...

## Extension Settings

You can specify the path to save the locally rendered SVG image. The settings are self-explanatory.

* **vscode-math-to-image.svgSavePath**:

  * `Current file directory`: Generated SVG files will be put in a folder under current file's directory.

  * `Current workspace directory`: Generated SVG files will be put in a folder under current workspace directory.

* **vscode-math-to-image.remoteRenderEngine**:

  * `GitHub`: Equations will be rendered with GitHub's rendering engine remotely.

  * `CodeCogs`: Equations will be rendered with CodeCogs' rendering engine remotely.

* **vscode-math-to-image.inlineSvgStyle**: Optional style for rendered inline SVG equations. Defaults to `transform: translateY(0.1em); background: white;`. Note: Not supported with Markdown-insertionType.

* **vscode-math-to-image.displaySvgStyle**: Optional style for rendered display SVG equations. Defaults to `background: white;`. Note: Not supported with Markdown-insertionType.

* **vscode-math-to-image.insertionType**: Choose whether to insert the rendered equations as HTML (default) or Markdown. Note that Markdown doesn't support styling.

## Change Log

For version updates and bug fixes, please see: [CHANGELOG](CHANGELOG.md).

---

📐 **Math » Image** © TeamMeow. Released under the MIT License.

Authored and maintained by TeamMeow members.

> 🦁 We build things that go "meow" · [@GitHub](https://github.com/TeamMeow) · [@Members](https://github.com/orgs/TeamMeow/people?type=source)