Sanity-plugin-latex-input-next-compatible NPM

LaTeX input for Sanity

NOTE
This is the Sanity Studio v3 version of sanity-plugin-latex-input.
For the v2 version, please refer to the v2-branch.

What is it?

sanity-plugin-latex-input adds support for latex schema type, so it can be used in Portable Text Editor (PTE) in Sanity Studio.

$latex-input preview$

Installation

npm install --save sanity-plugin-latex-input@studio-v3

yarn add sanity-plugin-latex-input@studio-v3

Usage

Import and add the plugin to your studio config in sanity.config.ts (or .js):

import { latexBlock } from "sanity-plugin-latex-input";

export default createConfig({
  /* ... */

  plugins: [
      latexInput()
  ]
})

You may now use the type name latex in your schema, such as in portable text.

Import the CSS file (import 'katex/dist/katex.min.css?raw';) in your app.

E.g. for Next.js

// pages/_app.tsx
// app/layout.tsx

import 'katex/dist/katex.min.css?raw';

Example schema definition for portable text

import React from 'react'
const mathInlineIcon = () => (
  <span>
    <span style={{ fontWeight: 'bold' }}>∑</span>b
  </span>
)
const mathIcon = () => <span style={{ fontWeight: 'bold' }}>∑</span>

export default {
  name: 'portableTextWithLatex',
  type: 'array',
  title: 'Body',
  of: [
    {
      type: 'block',
      title: 'Block',
      of: [
        { type: 'latex', icon: mathInlineIcon, title: 'Inline math' },
      ],
    },
    { type: 'latex', icon: mathIcon, title: 'Math block' },
  ],
}

The Portable Text editor will render a preview of the contents with KaTeX.