Plugins

Math

This plugins adds support for KaTeX expressions.

Installation

npm i @cartamd/plugin-math

Setup

Styles

You need to get access to the katex stylesheet, to do so, you can either install katex using:

npm i katex

and then adding this import to your app:

import 'katex/dist/katex.css';

or by using a content delivery network:

<link
  rel="stylesheet"
  href="https://cdn.jsdelivr.net/npm/katex@0.16.7/dist/katex.min.css"
  integrity="sha384-3UiQGuEI4TTMaFmGIZumfRPtfKQ3trwQE2JgosJxCnGmQpL/lJdjpcHkaaFwHlcI"
  crossorigin="anonymous"
/>

Extension

<script lang="ts">
  import { Carta, MarkdownEditor } from 'carta-md';
  import { math } from '@cartamd/plugin-math';

  const carta = new Carta({
    extensions: [math()]
  });
</script>

<MarkdownEditor {carta} />

Usage

Inline mode: 
Pythagorean theorem: $a^2+b^2=c^2$

Pythagorean theorem: a2+b2=c2a^2+b^2=c^2

Block mode: 
**Laplace** transform:
$$
  \mathcal{L}\{f\}(s) = \int_0^{\infty} {f(t)e^{-st}dt}
$$

Laplace transform:

L{f}(s)=∫0∞f(t)e−stdt \mathcal{L}\{f\}(s) = \int_0^{\infty} {f(t)e^{-st}dt}

Options

You can pass options to the plugin by passing an object to the math function.

interface MathExtensionOptions {
  /**
   * Options for inline katex, eg: $a^2+b^2=c^2$
   */
  inline?: {
    /**
     * @default control+m
     */
    shortcut?: Set<string>;
  };
  /**
   * Option for block katex, eg:
   * $$
   * a^2+b^2=c^2
   * $$
   */
  block?: {
    /**
     * @default ctrl+shift+m
     */
    shortcut?: Set<string>;
  };
  /**
   * Options for remark-math
   */
  remarkMath?: RemarkMathOptions;
  /**
   * Options for rehype-katex
   */
  rehypeKatex?: RehypeKatexOptions;
  /**
   * Disable tab outs.
   */
  disableTabOuts?: boolean;
  /**
   * Disable the katex icon.
   */
  disableIcon?: boolean;
}
Created by BearToCode