tiptex
v1.1.1-beta.7
Published
A simple JavaScript library for creating interactive LaTeX equations (using KaTeX) with tooltips (using Tippy.js).
Downloads
20
Maintainers
Readme
TipTex
TipTex is a simple JavaScript library that allows you to create interactive LaTeX equations using KaTeX with tooltips powered by Tippy.js. It's designed to make mathematical equations in web pages more interactive and informative.
Features
Simply render LaTeX equations with interactive tooltips.
Setup
Install TipTex via npm:
npm install tiptex
Or, if you prefer using Yarn:
yarn add tiptex
Usage
Note: v1.1+ introduces a new API that is more compatible with LaTeX.
Here's a quick example to get you started:
import {render} from 'tiptex';
const equation = render({
latex: `\\group{outer}{\\id{e}{e} = \\group{rhs}{\\id{m}{m}\\id{csq}{c^2}}}`,
interactiveElements: {
e: { href: "https://en.wikipedia.org/wiki/Mass%E2%80%93energy_equivalence", },
m: { label: 'mass'},
csq: { label: 'speed of light (squared)'},
},
groups: {
'outer': { label: 'Energy-mass equivalence'},
'rhs': { label: 'Inherent energy content of mass'},
},
enableCopy: true,
})
document.getElementById('equationContainer').appendChild(equation);
This will render the equation e=mc^2
with tooltips for m
and c^2
, and
make e
a clickable link.
Open test.html
to see the above in action.
API
The render
function accepts multiple objects as arguments, each representing a
part of the equation in sequential order.
These objects can have the following properties:
value
: The LaTeX string or plain text to be displayed.plainText
: Set totrue
ifval
is plain text. Defaults tofalse
.href
: URL to open when the part is clicked (optional).label
: Tooltip text to display when hovering over the part (optional).