ไธญๆๆๆกฃ | Demo | VSCode Extension | Logseq Plugin
Transform your Markdown experience with mmarked - a powerful TypeScript library designed for educational and mathematical content. Built for real-time rendering of complex LaTeX formulas, theorem blocks, and custom educational syntax.
Perfect for:
- ๐ Educators creating math course materials
- ๐ Students writing technical notes and assignments
- ๐ Researchers authoring academic papers
- ๐ป Developers building educational platforms
- ๐ก Anyone working with mathematical notation in Markdown
- โ Full CommonMark Support - Complete compatibility with standard Markdown syntax
- ๐ Easy Integration - Works seamlessly in Node.js and browser environments
- ๐ฆ Lightweight Core - Minimal dependencies, extensible architecture
- โก High Performance - Optimized rendering pipeline for fast output
- ๐งฎ Advanced LaTeX Rendering - Powered by MathJax for professional-quality formulas
- ๐ TeX to SVG Conversion - High-quality SVG output for equations
- ๐ข Auto-Numbered Footnotes - Easy-to-use reference system with automatic numbering
- ๐ Theorem-Like Blocks - Dedicated syntax for theorems, lemmas, definitions, and examples
- Auto-numbering support
- Cross-reference linking with
[~id]syntax - Customizable titles
- ๐ Collapsible Solution Blocks - Hide/show answers and proofs with toggle functionality
- ๐ฏ Syntax Highlighting - Code blocks enhanced by highlight.js
- ๐ผ๏ธ Enhanced Images - Flexible sizing with simple
=WIDTHxHEIGHTsyntax - ๐น Video Support - Same sizing options for video elements
- ๐จ Extensible - Built on marked.js for easy customization
npm install @mathcrowd/mmarked mathjax-full highlight.jsimport { renderMarkdown } from '@mathcrowd/mmarked'
// Render markdown with LaTeX support
const result = renderMarkdown(`
# Pythagorean Theorem
\`\`\`[theorem,pythagoras,Pythagorean Theorem]
For a right triangle with sides $a$, $b$ and hypotenuse $c$:
$$a^2 + b^2 = c^2$$
\`\`\`
This fundamental theorem (see [~pythagoras]) relates the sides of right triangles.
`)
console.log(result.parsed) // HTML output
console.log(result.time) // Rendering time in msImportant: License validation is only required for Node.js server-side usage. Browser environments do not require license configuration.
For commercial use in Node.js applications, you must configure a valid license:
import { configureLicense, renderMarkdown } from '@mathcrowd/mmarked'
// Configure your license (do this once at application startup)
configureLicense({
apiKey: 'MMARKED-XXXX-XXXX-XXXX-XXXX'
})
// Now you can use the library
const result = renderMarkdown('# Hello World')Without license configuration in Node.js:
import { renderMarkdown } from '@mathcrowd/mmarked'
// This will work but show a warning in console
const result = renderMarkdown('# Hello')
// Console output:
// โ ๏ธ No valid license configured for Node.js server-side usage.
// For commercial use, please configure a license using configureLicense().
// Contact charles@mathcrowd.cn for commercial licensing.
// Browser usage does not require a license.Requirements:
- Node.js 18+ for remote license validation (uses fetch API)
Get Your License:
- ๐ง Email: charles@mathcrowd.cn
- ๐ Visit: lab.mathcrowd.cn
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>mmarked Demo</title>
</head>
<body>
<div id="content"></div>
<script type="module">
import { renderMarkdown } from 'https://cdn.jsdelivr.net/npm/@mathcrowd/mmarked/dist/index.mjs'
const markdown = `
# Einstein's Mass-Energy Equivalence
The famous equation $E = mc^2$ relates energy and mass.
**Where:**
- $E$ is energy
- $m$ is mass
- $c$ is the speed of light
`
document.getElementById('content').innerHTML = renderMarkdown(markdown).parsed
</script>
</body>
</html>\`\`\`[theorem,fermat,Fermat's Last Theorem]
No three positive integers $a$, $b$, and $c$ satisfy the equation
$a^n + b^n = c^n$ for any integer value of $n > 2$.
\`\`\`
\`\`\`[lemma,helper,Helper Lemma]
This lemma supports the proof of [~fermat].
\`\`\`Supported block types: theorem, lemma, corollary, axiom, definition, example
Custom blocks: Use any keyword for custom theorem-like blocks with independent numbering.
Hide numbering: Add * after the keyword (e.g., theorem*) to hide the number while maintaining sequence.
**Problem:** Solve the quadratic equation $x^2 - 5x + 6 = 0$
~~~[solution]
**Solution:**
Factoring the equation:
$$(x-2)(x-3) = 0$$
Therefore, the solutions are:
- $x = 2$
- $x = 3$
~~~
~~~[proof]
**Verification:** Substituting $x=2$: $(2)^2 - 5(2) + 6 = 4 - 10 + 6 = 0$ โ
~~~
The Riemann Hypothesis[^riemann] is one of the most important unsolved problems.
Another famous conjecture is the Twin Prime Conjecture[^twin].
[^riemann]: Proposed by Bernhard Riemann in 1859.
[^twin]: States that there are infinitely many twin primes.Configure license for commercial use in Node.js environments. Must be called before using render functions.
Parameters:
interface LicenseConfig {
apiKey: string // Your license key (format: MMARKED-XXXX-XXXX-XXXX-XXXX)
}Example:
// Minimal configuration (recommended)
configureLicense({
apiKey: 'MMARKED-XXXX-XXXX-XXXX-XXXX'
})Renders Markdown to HTML with full feature support.
License: Requires valid license for commercial use in Node.js. Free in browsers.
Returns:
{
parsed: string, // HTML output
lexed: Token[], // Marked.js tokens
time: number // Rendering time in milliseconds
}Example:
const { parsed, time } = renderMarkdown('# Hello $x^2$')
console.log(`Rendered in ${time}ms`)Renders Markdown without wrapping <p> tags, ideal for inline content.
License: Requires valid license for commercial use in Node.js. Free in browsers.
Returns: Same structure as renderMarkdown()
Use case: Rendering single-line content without block-level elements.
const { parsed } = renderMarkdownCompact('**Bold** and $x^2$ inline')
// Output: <strong>Bold</strong> and <svg>...</svg> inlineConverts LaTeX expressions to SVG within HTML content.
Parameters:
html: HTML string containing LaTeX expressions ($...$for inline,$$...$$for block)
Returns: HTML with LaTeX converted to SVG graphics
Example:
const html = '<p>Einstein: $E=mc^2$</p>'
const withSvg = tex2svg(html)Always sanitize HTML output using DOMPurify before inserting into the DOM:
import DOMPurify from 'dompurify'
import { renderMarkdown } from '@mathcrowd/mmarked'
// Safe rendering of user input
const userMarkdown = getUserInput()
const { parsed } = renderMarkdown(userMarkdown)
const safeHtml = DOMPurify.sanitize(parsed)
document.getElementById('content').innerHTML = safeHtmlEnhance your editing experience with official integrations:
- VSCode Extension - Real-time preview with theme support
- Logseq Plugin - Seamless integration for note-taking
- ๐ Product Homepage - Official product page
- ๐ Complete Documentation - Full syntax guide (Chinese)
- ๐ฎ Interactive Demo - Try it live with quick reference built-in
- marked.js - Fast Markdown parser
- MathJax - Beautiful math rendering
- highlight.js - Syntax highlighting
Mathcrowd is revolutionizing mathematics education in China through innovative technology. Founded by experienced developers and math educators, we're building tools and communities that make math learning more accessible and engaging.
- ๐ Mathcrowd Labs: lab.mathcrowd.cn
- ๐ฌ Join Discord: discord.gg/6VMUVA5Yq2
Licensed under CC BY-NC 4.0 - Free for non-commercial use.
For commercial licensing, contact: charles@mathcrowd.cn
- ๐ก Feature Requests: GitHub Discussions
Made with โค๏ธ by the Mathcrowd team