tweakpane-latex v0.1.1
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 'curtisjhu/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.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
7 months ago