{"id":15288221,"url":"https://github.com/isaul32/ckeditor5-math","last_synced_at":"2025-05-16T11:03:51.222Z","repository":{"id":40240421,"uuid":"205577741","full_name":"isaul32/ckeditor5-math","owner":"isaul32","description":"Math feature for CKEditor 5.","archived":false,"fork":false,"pushed_at":"2025-02-20T19:31:56.000Z","size":1282,"stargazers_count":90,"open_issues_count":29,"forks_count":47,"subscribers_count":8,"default_branch":"master","last_synced_at":"2025-05-06T00:01:54.376Z","etag":null,"topics":["ckeditor","ckeditor5","ckeditor5-math","hacktoberfest","katex","latex","mathjax","tex"],"latest_commit_sha":null,"homepage":"https://www.npmjs.com/package/ckeditor5-math","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"isc","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/isaul32.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2019-08-31T17:47:46.000Z","updated_at":"2025-03-16T18:13:22.000Z","dependencies_parsed_at":"2024-06-18T15:30:02.773Z","dependency_job_id":"7ef58bc3-6f1e-4658-b401-29f8e39f7171","html_url":"https://github.com/isaul32/ckeditor5-math","commit_stats":{"total_commits":313,"total_committers":6,"mean_commits":"52.166666666666664","dds":0.3610223642172524,"last_synced_commit":"c13fbfed71f144d551a76fbd34ee09de42822faa"},"previous_names":[],"tags_count":87,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/isaul32%2Fckeditor5-math","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/isaul32%2Fckeditor5-math/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/isaul32%2Fckeditor5-math/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/isaul32%2Fckeditor5-math/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/isaul32","download_url":"https://codeload.github.com/isaul32/ckeditor5-math/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254518384,"owners_count":22084374,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["ckeditor","ckeditor5","ckeditor5-math","hacktoberfest","katex","latex","mathjax","tex"],"created_at":"2024-09-30T15:44:47.681Z","updated_at":"2025-05-16T11:03:51.199Z","avatar_url":"https://github.com/isaul32.png","language":"TypeScript","funding_links":[],"categories":["Plugins"],"sub_categories":[],"readme":"# CKEditor 5 mathematical feature \u0026middot; [![GitHub license](https://img.shields.io/badge/license-ISC-blue.svg)](https://github.com/isaul32/ckeditor5-math/blob/master/LICENSE) [![npm version](https://img.shields.io/npm/v/@isaul32/ckeditor5-math.svg?style=flat)](https://www.npmjs.com/package/@isaul32/ckeditor5-math)\n\nckeditor5-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.\n\n[mathjax]: https://www.mathjax.org/\n[katex]: https://katex.org/\n\n## Table of contents\n\n-   [Features](#features)\n-   [Demos](#demos)\n-   [Screenshots](#screenshots)\n-   [Requirements](#requirements)\n-   [Examples](#examples)\n-   [Installation](#installation)\n    -   [Styles for Lark theme](#styles-for-lark-theme)\n-   [Configuration \u0026 Usage](#configuration--usage)\n    -   [Plugin options](#plugin-options)\n    -   [Available typesetting engines](#available-typesetting-engines)\n    -   [Supported input and output formats](#supported-input-and-output-formats)\n-   [Paste support](#paste-support)\n    -   [From plain text](#from-plain-text)\n-   [Autoformat support](#autoformat-support)\n-   [Preview workaround](#preview-workaround)\n\n## Features\n\n-   Written in TypeScript (as of v41.2.1)\n-   DLL build support (as of v36.0.3)\n-   TeX syntax\n-   Inline and display equations\n-   Preview view\n-   Multiple typesetting engines\n-   Have multiple input and output format\n-   Paste support\n    -   from plain text\n-   Autoformat support\n\n# Demos\n\n-   [Classic editor with MathJax](https://jsfiddle.net/isaul32/qktj9h7x/)\n-   [Classic editor with KaTex](https://jsfiddle.net/isaul32/3wjrkLdv/)\n-   [Balloon block editor with KaTex](https://jsfiddle.net/isaul32/q01mu8kp/)\n\n## Screenshots\n\n![Screenshot 1](/screenshots/1.png?raw=true \"Screenshot 1\")\n\n![Screenshot 2](/screenshots/2.png?raw=true \"Screenshot 2\")\n\n## Requirements\n\n-   Use same major version as your CKEditor 5 build\n\nIf you get duplicated modules error, you have mismatching versions.\n\n## Examples\n\n[Link to examples repository](https://github.com/isaul32/ckeditor5-math-examples)\n\n## Installation\n\nUse official classic or inline build as a base:\n\n-   [CKEditor 5 classic editor build](https://github.com/ckeditor/ckeditor5/tree/master/packages/ckeditor5-build-classic)\n-   [CKEditor 5 inline editor build](https://github.com/ckeditor/ckeditor5/tree/master/packages/ckeditor5-build-inline)\n\nInstall plugin with NPM or Yarn\n\n`npm install @isaul32/ckeditor5-math --save-dev`\n\n`yarn add @isaul32/ckeditor5-math --dev`\n\nAdd import into ckeditor.js file\n\n```js\nimport Math from '@isaul32/ckeditor5-math/src/math';\nimport AutoformatMath from '@isaul32/ckeditor5-math/src/autoformatmath';\n```\n\nAdd it to built-in plugins\n\n```js\nInlineEditor.builtinPlugins = [\n\t// ...\n\tMath,\n\tAutoformatMath\n];\n```\n\n**Add math button to toolbar**\n\n```js\nInlineEditor.defaultConfig = {\n\ttoolbar: {\n\t\titems: [\n\t\t\t// ...\n\t\t\t'math'\n\t\t]\n\t}\n};\n```\n\n### Styles for Lark theme\n\n**Copy theme/ckeditor5-math folder** from [https://github.com/isaul32/ckeditor5/tree/master/packages/ckeditor5-theme-lark](https://github.com/isaul32/ckeditor5/tree/master/packages/ckeditor5-theme-lark) to your lark theme repository\n\n### Using DLL builds\n\nUse the [official DLL build](https://ckeditor.com/docs/ckeditor5/latest/installation/advanced/alternative-setups/dll-builds.html) and additionally load the math plugin:\n\n```html\n\u003cscript src=\"path/to/node_modules/@isaul32/ckeditor5-math/build/math.js\"\u003e\u003c/script\u003e\n\u003cscript\u003e\nCKEditor5.editorClassic.ClassicEditor\n\t.create(editorElement, {\n\t\tplugins: [\n\t\t\tCKEditor5.math.Math,\n\t\t\t...\n\t\t],\n\t\t...\n\t});\n\u003c/script\u003e\n```\n\n## Configuration \u0026 Usage\n\n### Plugin options\n\n```js\nInlineEditor.defaultConfig = {\n\t// ...\n\tmath: {\n\t\tengine: 'mathjax', // or katex or function. E.g. (equation, element, display) =\u003e { ... }\n\t\tlazyLoad: undefined, // async () =\u003e { ... }, called once before rendering first equation if engine doesn't exist. After resolving promise, plugin renders equations.\n\t\toutputType: 'script', // or span\n\t\tclassName: 'math-tex', // class name to use with span output type, change e.g. MathJax processClass (v2) / processHtmlClass (v3) is set\n\t\tforceOutputType: false, // forces output to use outputType\n\t\tenablePreview: true, // Enable preview view\n\t\tpreviewClassName: [], // Class names to add to previews\n\t\tpopupClassName: [], // Class names to add to math popup balloon\n\t\tkatexRenderOptions: {}  // KaTeX only options for katex.render(ToString)\n\t}\n}\n```\n\n### Available typesetting engines\n\n**MathJax**\n\n-   Tested with **latest 2.7**\n-   Has experimental (**CHTML**, **SVG**) support for **3.0.0** or newer version\n\n[\u003cimg src=\"https://www.mathjax.org/badge/badge-square.svg\" width=\"130\" alt=\"KaTeX\"\u003e](https://www.mathjax.org/)\n\n**KaTeX**\n\n-   Tested with version **0.12.0**\n\n[\u003cimg src=\"https://katex.org/img/katex-logo-black.svg\" width=\"130\" alt=\"KaTeX\"\u003e](https://katex.org/)\n\n-   `katexRenderOptions` - pass [options](https://katex.org/docs/options.html).\n\n    ```js\n    InlineEditor.defaultConfig = {\n    \t// ...\n    \tmath: {\n    \t\tengine: 'katex'\n    \t\tkatexRenderOptions: {\n    \t\t\tmacros: {\n    \t\t\t\t\"\\\\neq\": \"\\\\mathrel{\\\\char`≠}\",\n    \t\t\t},\n    \t\t},\n    \t}\n    }\n    ```\n\n**Custom typesetting**\n\nCustom typesetting is possible to implement with engine config. For example, custom typesetting feature can be used when use back end rendering.\n\n```js\nInlineEditor.defaultConfig = {\n\t// ...\n\tmath: {\n\t\tengine: ( equation, element, display, preview ) =\u003e {\n\t\t\t// ...\n\t\t}\n\t}\n}\n```\n\n-   **equation** is equation in TeX format without delimiters.\n-   **element** is DOM element reserved for rendering.\n-   **display** is boolean. Typesetting should be inline when false.\n-   **preview** is boolean. Rendering in preview when true.\n\n### Supported input and output formats\n\nSupported input and output formats are:\n\n```html\n\u003c!-- MathJax style http://docs.mathjax.org/en/v2.7-latest/advanced/model.html#how-mathematics-is-stored-in-the-page --\u003e\n\u003cscript type=\"math/tex\"\u003e\\sqrt{\\frac{a}{b}}\u003c/script\u003e\n\u003cscript type=\"math/tex; mode=display\"\u003e\\sqrt{\\frac{a}{b}}\u003c/script\u003e\n\n\u003c!-- CKEditor 4 style https://ckeditor.com/docs/ckeditor4/latest/features/mathjax.html --\u003e\n\u003cspan class=\"math-tex\"\u003e\\( \\sqrt{\\frac{a}{b}} \\)\u003c/span\u003e\n\u003cspan class=\"math-tex\"\u003e\\[ \\sqrt{\\frac{a}{b}} \\]\u003c/span\u003e\n```\n\n### Paste support\n\n#### From plain text\n\nPaste TeX equations with **delimiters**. For example:\n\n```latex\n\\[ x=\\frac{-b\\pm\\sqrt{b^2-4ac}}{2a} \\]\n```\n\nor\n\n```latex\n\\( x=\\frac{-b\\pm\\sqrt{b^2-4ac}}{2a} \\)\n```\n\n### Autoformat support\n\n#### Inline mode\n\nCtrl+M can be used to add easily math formulas in inline mode.\n\n#### Display mode\n\nAutoformat 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.\n\nAdd following lines into your build\n\n```js\n// ...\nimport AutoformatMath from '@isaul32/ckeditor5-math/src/autoformatmath';\n\nInlineEditor.builtinPlugins = [\n\t// ...\n\tAutoformatMath\n];\n```\n\nor use it with DLL build\n\n```html\n\u003cscript src=\"path/to/node_modules/@isaul32/ckeditor5-math/build/math.js\"\u003e\u003c/script\u003e\n\u003cscript\u003e\nCKEditor5.editorInline.InlineEditorEditor\n\t.create(editorElement, {\n\t\tplugins: [\n\t\t\tCKEditor5.math.AutoformatMath,\n\t\t\t...\n\t\t],\n\t\t...\n\t});\n\u003c/script\u003e\n```\n\n## Preview workaround\n\n`.ck-reset_all *` css rules from ckeditor5-ui and ckeditor5-theme-lark break rendering in preview mode.\n\nMy 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.\n\n## Development\n\nContributions, improvements and bug fixes are welcome. To aid in this, try out\nour developer environment w/ live reload support and [CKEditor 5 inspector].\n\n![Development environment](/screenshots/development-environment.png?raw=true \"Screenshot of\ndevelopment environment\")\n\nTo enter a development loop with hot reload support:\n\n-   `git clone https://github.com/isaul32/ckeditor5-math.git`\n-   `cd ckeditor5-math`\n-   `yarn`\n-   `yarn start`\n-   http://localhost:8080\n\n[ckeditor 5 inspector]: https://ckeditor.com/docs/ckeditor5/latest/framework/guides/development-tools.html#ckeditor-5-inspector\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fisaul32%2Fckeditor5-math","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fisaul32%2Fckeditor5-math","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fisaul32%2Fckeditor5-math/lists"}