The core of Marp converter.
In order to use on Marp tools, we have extended from the slide deck framework Marpit. You can use the practical Markdown syntax, advanced features, and official themes.
We provide Marp
class, that is inherited from Marpit.
import Marp from '@marp-team/marp-core'
// Convert Markdown slide deck into HTML and CSS
const marp = new Marp()
const { html, css } = marp.render('# Hello, marp-core!')
We will only explain features extended in marp-core. Please refer to @marp-team/marpit repository if you want to know the basic feature of Marpit framework.
Marp Markdown is based on Marpit and CommonMark, and there are these additional features:
- Marpit
- Enable inline SVG mode and loose YAML parsing by default.
- CommonMark
- For security reason, HTML tag only allows whitelisted elements by default.
- Support table and strikethrough syntax, based on GitHub Flavored Markdown.
- Line breaks in paragraph will convert to
<br>
tag. - Auto convert URL like text into hyperlink.
We provide bulit-in official themes for Marp. See more details in themes.
Default | Gaia | Uncover |
---|---|---|
<!-- theme: default --> |
<!-- theme: gaia --> |
<!-- theme: uncover --> |
Do you want a traditional 4:3 slide size? We've added the support of size
global directive only for Marp Core. Our extended theming system can use 960
x720
slide in built-in themes easier: size: 4:3
.
---
theme: gaia
size: 4:3
---
# A traditional 4:3 slide
If you want to use more size presets in your theme, you have to define @size
metadata(s) in theme CSS. Learn in the document of theme metadata for Marp Core.
Theme author does not have to worry an unintended design being used with unexpected slide size because user only can use pre-defined presets by author.
Emoji shortcode (like :smile:
) and Unicode emoji ๐ will convert into the SVG vector image provided by twemoji . It could render emoji with high resolution.
We have Pandoc's Markdown style math typesetting support. Surround your formula by $...$
to render math as inline, and $$...$$
to render as block.
Markdown | Rendered slide |
---|---|
|
You can choose a library for math from KaTeX and MathJax in the constructor option. By default, we prefer KaTeX for compatibility and performance, but MathJax has better syntax support than KaTeX.
Auto-scaling is available only if enabled Marpit's inlineSVG
mode and defined @auto-scaling
metadata in an using theme CSS.
/*
* @theme enable-all-auto-scaling
* @auto-scaling true
*/
Marp Core's scaling features will be realized by manipulating the original DOM to use inline SVG. So the theme author must take care of updated DOM in styling. Refer to the source code of offical themes.
@auto-scaling
meta can also pick the favorite features to enable by using keyword(s).
/*
* @theme enable-auto-scaling-for-fitting-header-and-math
* @auto-scaling fittingHeader,math
*/
โ ๏ธ In the math block and the code block, Marp Core won't detect whether they actually protrude from the slide. It might not work scaling correctly when there are many elements in a slide.
When the headings contains <!-- fit -->
comment, the size of headings will resize to fit onto the slide size.
# <!-- fit --> Fitting header
This syntax is similar to Deckset's [fit]
keyword, but we use HTML comment to hide a fit keyword on Markdown rendered as document.
โน๏ธ
@auto-scaling fittingHeader
is a keyword of the@auto-scaling
meta to enable fitting header.
We can scale-down the viewing size of KaTeX math block (surrounded by $$
) to fit a slide automatically.
Traditional rendering | Auto-scaling |
---|---|
โน๏ธ
@auto-scaling math
is a keyword of the@auto-scaling
meta to enable math block scaling.Please notice that the math block rendered by MathJax would always be scaled-down and cannot control whether scale via metadata.
Several themes also can scale-down the viewing size of the code block to fit a slide.
Traditional rendering | Auto-scaling |
---|---|
These features means that the contents on a slide are not cropped, and not shown unnecessary scrollbars in code.
โน๏ธ
@auto-scaling code
is a keyword of the@auto-scaling
meta to enable code block scaling.
uncover
theme has disabled code block scaling because we use elastic style that has not compatible with it.
You can customize a behavior of Marp parser by passing an options object to the constructor. You can also pass together with Marpit constructor options.
โน๏ธ Marpit's
markdown
option is accepted only object options because of always using CommonMark.
const marp = new Marp({
// marp-core constructor options
html: true,
emoji: {
shortcode: true,
unicode: false,
twemoji: {
base: '/resources/twemoji/',
},
},
math: 'mathjax',
minifyCSS: true,
script: {
source: 'cdn',
nonce: 'xxxxxxxxxxxxxxx',
},
// It can be included Marpit constructor options
looseYAML: false,
markdown: {
breaks: false,
},
})
Setting whether to render raw HTML in Markdown. It's an alias to markdown.html
(markdown-it option) but has additional feature about HTML whitelist.
true
: The all HTML will be allowed.false
: All HTML except supported in Marpit Markdown will be disallowed.
By passing object
, you can set the whitelist to specify allowed tags and attributes.
// Specify tag name as key, and attributes to allow as string array.
{
a: ['href', 'target'],
br: [],
}
// You may use custom attribute sanitizer by passing object.
{
img: {
src: (value) => (value.startsWith('https://') ? value : '')
}
}
Marp core allows only <br>
tag by default, that is defined in Marp.html
.
Whatever any option is selected, <!-- HTML comment -->
and <style>
tag are always parsed for directives / tweaking style.
Setting about emoji conversions.
shortcode
:boolean
|"twemoji"
unicode
:boolean
|"twemoji"
twemoji
:object
base
:string
- It is corresponded to twemoji'sbase
option. By default, marp-core will use online emoji images through MaxCDN (twemoji's default).ext
:"svg"
|"png"
- Setting the file type of twemoji images. (svg
by default)
For developers: When you setting
unicode
option astrue
, Markdown parser will convert Unicode emoji into tokens internally. The rendering result is same as infalse
.
Enable or disable math typesetting syntax. You can choose a library for math by passing katex
(default) or mathjax
, and modify more settings by passing an object of sub-options.
lib
:"katex"
|"mathjax"
- Choose a library for math typesetting. (
katex
by default)
- Choose a library for math typesetting. (
katexOption
:object
- The options passing to KaTeX. Please refer to KaTeX document.
katexFontPath
:string
|false
- By default, marp-core will use online web-font resources through jsDelivr CDN. You have to set path to fonts directory if you want to use local resources. If you set
false
, we will not manipulate the path (Use KaTeX's original path:fonts/KaTeX_***-***.woff2
).
- By default, marp-core will use online web-font resources through jsDelivr CDN. You have to set path to fonts directory if you want to use local resources. If you set
Enable or disable minification for rendered CSS. true
by default.
Setting about an injected helper script for the browser context. This script is necessary for applying WebKit polyfill and rendering auto-scaled elements correctly.
true
: Inject the inline helper script into after the last of slides. (default)false
: Not inject helper script. Developer must execute a helper script manually, exported in@marp-team/marp-core/browser
. Requires bundler such as webpack. It's suitable to the fully-controlled tool such as Marp Web.
You can control details of behavior by passing object
.
source
:string
- Choose the kind of script.inline
: Inject the inline script. It would work correctly also in the environment that there is not network. (default)cdn
: Inject script referred through jsDelivr CDN. It's better choice on the restricted environment by CSP.
nonce
:string
- Setnonce
attribute of<script>
.
Are you interested in contributing? Please see CONTRIBUTING.md and the common contributing guideline for Marp team.
Managed by @marp-team.
- Yuki Hattori (@yhatt)
This package releases under the MIT License.