tweakpane-latex

This is an latex plugin for Tweakpane. Basically allows you to write natural text, markdown, and latex for descriptions etc.

This implementation is heavily based on the doersino's infodump plugin. It's just that his doesn't have latex.

Installation

Browser

Download the most recent release from here.

<script src="tweakpane.min.js"></script>
<script src="tweakpane-latex.min.js"></script>
<script>
  const pane = new Tweakpane.Pane();
  pane.registerPlugin(TweakpaneLatexPlugin);
</script>

Package

npm i tweakpane-latex

then

import {Pane} from 'tweakpane';
import * as LatexPlugin from 'tweakpane-latex';

const pane = new Pane();
pane.registerPlugin(LatexPlugin);

Usage

No parsing

pane.addBlade({
  view: "latex",
  content: "No parsing",
});

No parsing + border

pane.addBlade({
  view: "latex",
  content: "No parsing + border",
  border: true,
});

Latex only. This uses Katex and the settings from latexSettings will be passed into katex's options

pane.addBlade({
  view: "latex",
  content: "\\begin{equation} \\int e^{-x^2} dx \\end{equation}",
  latex: true,
  latexSettings: {} // optional
});

Markdown. This uses markedjs and a katex extension so you have both Markdown + Latex. The settings you pass into latexSettings will be passed into katex's options like above. The settings you pass into markedSettings will be passed into marked.js's options

pane.addBlade({
      view: "latex",
      markdown: true,
      markdownSettings: {} // optional
      content: `
        # Header

        $$\\int x^2 dx$$

        [a link](http://www.google.com).
      `
})

Development

Quick start

Clone this repository, then:

• Install dependencies:

  $ npm install
  

• Build source codes and watch changes:

  $ npm start
  

• Open test/browser.html to see the result or run npm run budo for a commonjs environment version

• Cutting a release:

  $ npm run assets
  

  Then upload the resulting ZIP file to GitHub.

File structure

|- src
|  |- sass ............ Plugin CSS
|  |- index.ts ........ Entrypoint
|  |- plugin.ts ....... Plugin
|  |- controller.ts ... Controller for the custom view
|  `- view.ts ......... Custom view
|- dist ............... Compiled files
`- test
   `- browser.html .... Plugin lab