npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

tex2svg

v1.0.2

Published

Compiles (La)TeX code to responsive SVGs

Downloads

6

Readme

tex2svg

tex2svg is a Node.JS library for compiling the (La)Tex code blocks to SVGs.

Features

  1. Generates truly responsive SVGs, which automatically scale and align respecting both the font size and the baseline.
  2. Can generate both, inline SVGs and SVGs being loaded with img tag.
  3. Supports math and tikz environments by default and is easily extendable.
  4. Combines all the required blocks into one TeX file, therefore makes minimum exec calls.
  5. Optimizes the resulting SVG with SVGO.

Installation

npm i tex2svg

latex and dvisvgm executables should be available in the PATH. LaTeX preview package should be installed (in most cases, it's installed by default).

Usage

The library provides three slightly different compilers one can choose from

import { Tex2Svg, Tex2SvgFile, Tex2SvgImgTag } from "tex2svg";

// The basic compiler
const basicCompiler = new Tex2Svg({
  tmpdir: "/tmp", // the dir for temporary files
  precision: 2, // the integer from 1 to 6, defines the number of digits after the comma
  inline: true, // generate inline SVG code
  minifyids: false, // minify IDs, use carefully when having several inline SVGs on one page
  prefixids: false, // prefix function for IDs
  preamble: [], // additional preamble, e.g. "\usepackage{cmbright}"
  dvisvgm: "dvisvgm", // dvisvgm command, e.g. "dvisvgm --optimize=remove-clippath --exact-bbox"
});

// The compiler which writes the resulting SVG in files.
// Will read from file instead of recompiling if the file already exists.
// Therefore it's useful for incremental builds.
const fileCompiler = new Tex2SvgFile({
  outdir, // the dir for SVG files, tmpdir by default
  name, // function returning the target file name, md5sum of the code by default
});

// Same as previous one, but returns <img> tags instead of SVG code.
// Useful when inline SVG inside HTML is unwanted
const imgTagCompiler = new Tex2SvgImgTag({
  imgtag, // function returning the img tag, the minimal implementation by default
});

Each compiler has a compile method, which receives the array of blocks. One can easily create the block manually, but the library provides two useful helpers for that

import { math, tikz } from "tex2svg";

// math for using as inline element
const inlineMath = math(
  "\\zeta(s) = \\sum\\limits_{n=1}^\\infty 1 / n^s",
  true
);
// math for using as block element
const displaystyleMath = math(
  "\\zeta(s) = \\sum\\limits_{n=1}^\\infty 1 / n^s"
);
// tikz with basic macros only
const basicTikz = tikz(
  "\\node (a) {A}; \\node (b) at (1,0) {B};\\draw [<->] (a) -- (b);"
);
// tikz with arrows library
const extraLibraryTikz = tikz(
  "\\node (a) {A}; \\node (b) at (1,0) {B};\\draw [open triangle 45-triangle 45] (a) -- (b);",
  ["arrows"]
);
// custom block
const simpleTextBlock = {
  code: "\\LaTeX",
  depth: true, // the block with depth can be vertically aligned
};

compiler.compile([
  inlineMath,
  displaystyleMath,
  basicTikz,
  extraLibraryTikz,
  simpleTextBlock,
]); // returns Promise with the array of strings

Examples

Check generated example pages with inline and external SVGs.