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

@dmoosocool/ckeditor5-math

v41.1.0

Published

Math feature for CKEditor 5.

Downloads

4

Readme

CKEditor 5 mathematical feature · GitHub license npm version

ckeditor5-math is a TeX-based mathematical plugin for CKEditor 5. You can use it to insert, edit, and view mathematical equations and formulas. This plugin supports MathJax, KaTeX and custom typesetting engines.

Table of contents

Features

  • TeX syntax
  • Inline and display equations
  • Preview view
  • Multiple typesetting engines
  • Have multiple input and output format
  • Paste support
    • from plain text
  • Autoformat support

Demos

Screenshots

Screenshot 1

Screenshot 2

Requirements

  • Use same major version as your CKEditor 5 build

If you get duplicated modules error, you have mismatching versions.

Examples

Link to examples repository

Installation

Use official classic or inline build as a base:

Install plugin with NPM or Yarn

npm install @isaul32/ckeditor5-math --save-dev

yarn add @isaul32/ckeditor5-math --dev

Add import into ckeditor.js file

import Math from '@isaul32/ckeditor5-math/src/math';
import AutoformatMath from '@isaul32/ckeditor5-math/src/autoformatmath';

Add it to built-in plugins

InlineEditor.builtinPlugins = [
	// ...
	Math,
	AutoformatMath
];

Add math button to toolbar

InlineEditor.defaultConfig = {
	toolbar: {
		items: [
			// ...
			'math'
		]
	}
};

Styles for Lark theme

Copy theme/ckeditor5-math folder from https://github.com/isaul32/ckeditor5/tree/master/packages/ckeditor5-theme-lark to your lark theme repository

Using DLL builds

Use the official DLL build and additionally load the math plugin:

<script src="path/to/node_modules/@isaul32/ckeditor5-math/build/math.js"></script>
<script>
CKEditor5.editorClassic.ClassicEditor
	.create(editorElement, {
		plugins: [
			CKEditor5.math.Math,
			...
		],
		...
	});
</script>

Configuration & Usage

Plugin options

InlineEditor.defaultConfig = {
	// ...
	math: {
		engine: 'mathjax', // or katex or function. E.g. (equation, element, display) => { ... }
		lazyLoad: undefined, // async () => { ... }, called once before rendering first equation if engine doesn't exist. After resolving promise, plugin renders equations.
		outputType: 'script', // or span
		className: 'math-tex', // class name to use with span output type, change e.g. MathJax processClass (v2) / processHtmlClass (v3) is set
		forceOutputType: false, // forces output to use outputType
		enablePreview: true, // Enable preview view
		previewClassName: [], // Class names to add to previews
		popupClassName: [], // Class names to add to math popup balloon
		katexRenderOptions: {}  // KaTeX only options for katex.render(ToString)
	}
}

Available typesetting engines

MathJax

  • Tested with latest 2.7
  • Has experimental (CHTML, SVG) support for 3.0.0 or newer version

KaTeX

  • Tested with version 0.12.0

  • katexRenderOptions - pass options.

    InlineEditor.defaultConfig = {
    	// ...
    	math: {
    		engine: 'katex'
    		katexRenderOptions: {
    			macros: {
    				"\\neq": "\\mathrel{\\char`≠}",
    			},
    		},
    	}
    }

Custom typesetting

Custom typesetting is possible to implement with engine config. For example, custom typesetting feature can be used when use back end rendering.

InlineEditor.defaultConfig = {
	// ...
	math: {
		engine: ( equation, element, display, preview ) => {
			// ...
		}
	}
}
  • equation is equation in TeX format without delimiters.
  • element is DOM element reserved for rendering.
  • display is boolean. Typesetting should be inline when false.
  • preview is boolean. Rendering in preview when true.

Supported input and output formats

Supported input and output formats are:

<!-- MathJax style http://docs.mathjax.org/en/v2.7-latest/advanced/model.html#how-mathematics-is-stored-in-the-page -->
<script type="math/tex">\sqrt{\frac{a}{b}}</script>
<script type="math/tex; mode=display">\sqrt{\frac{a}{b}}</script>

<!-- CKEditor 4 style https://ckeditor.com/docs/ckeditor4/latest/features/mathjax.html -->
<span class="math-tex">\( \sqrt{\frac{a}{b}} \)</span>
<span class="math-tex">\[ \sqrt{\frac{a}{b}} \]</span>

Paste support

From plain text

Paste TeX equations with delimiters. For example:

\[ x=\frac{-b\pm\sqrt{b^2-4ac}}{2a} \]

or

\( x=\frac{-b\pm\sqrt{b^2-4ac}}{2a} \)

Autoformat support

Inline mode

Ctrl+M can be used to add easily math formulas in inline mode.

Display mode

Autoformat for math can be used to add formula in display mode on a new line by adding \[ or $$. This feature requires additional autoformat plugin to be added.

Add following lines into your build

// ...
import AutoformatMath from '@isaul32/ckeditor5-math/src/autoformatmath';

InlineEditor.builtinPlugins = [
	// ...
	AutoformatMath
];

or use it with DLL build

<script src="path/to/node_modules/@isaul32/ckeditor5-math/build/math.js"></script>
<script>
CKEditor5.editorInline.InlineEditorEditor
	.create(editorElement, {
		plugins: [
			CKEditor5.math.AutoformatMath,
			...
		],
		...
	});
</script>

Preview workaround

.ck-reset_all * css rules from ckeditor5-ui and ckeditor5-theme-lark break rendering in preview mode.

My solution for this is use rendering element outside of CKEditor DOM and place it to right place by using absolute position. Alternative solution could be using iframe, but then typesetting engine's scripts and styles have to copy to child document.

TypeScript users

ckeditor5-math does not have typings yet. TypeScript builds of CKEditor will see this:

src/ckeditor.ts:63:18 - error TS7016: Could not find a declaration file for module '@isaul32/ckeditor5-math/src/math'.
'/path/to/your/project/node_modules/@isaul32/ckeditor5-math/src/math.js' implicitly has an 'any' type.

Try `npm i --save-dev @types/isaul32__ckeditor5-math` if it exists or add a new declaration (.d.ts) file containing
`declare module '@isaul32/ckeditor5-math/src/math';`

Workaround for typings

  1. Create a d.ts declaration file, e.g. typings/ckeditor5-math.d.ts

    declare module '@isaul32/ckeditor5-math';
    declare module '@isaul32/ckeditor5-math/src/math';
    declare module '@isaul32/ckeditor5-math/src/autoformatmath';
  2. In your tsconfig.json's root-level include option, make sure your declaration file is covered, e.g.

    {
      "extends": "ckeditor5/tsconfig.json",
      "include": [
        "src",
        "typings",
        "../../typings"
       ]
    }

Development

Contributions, improvements and bug fixes are welcome. To aid in this, try out our developer environment w/ live reload support and CKEditor 5 inspector.

Development environment

To enter a development loop with hot reload support:

  • git clone https://github.com/isaul32/ckeditor5-math.git
  • cd ckeditor5-math
  • yarn
  • yarn start
  • http://localhost:8080