@marp-team/marp-core 2.1.0 → 3.0.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +75 -56
- package/lib/browser.cjs.js +1 -1
- package/lib/browser.js +1 -1
- package/lib/marp.js +1 -1
- package/package.json +38 -40
- package/types/src/auto-scaling/code-block.d.ts +3 -0
- package/types/src/auto-scaling/fitting-header.d.ts +3 -0
- package/types/src/{fitting/fitting.d.ts → auto-scaling/index.d.ts} +0 -1
- package/types/src/auto-scaling/utils.d.ts +2 -0
- package/types/src/custom-elements/browser/index.d.ts +3 -0
- package/types/src/custom-elements/browser/marp-auto-scaling.d.ts +20 -0
- package/types/src/custom-elements/browser/marp-custom-element.d.ts +312 -0
- package/types/src/custom-elements/definitions.d.ts +81 -0
- package/types/src/custom-elements/index.d.ts +1 -0
- package/types/src/custom-elements/postcss-plugin.d.ts +2 -0
- package/types/src/math/math.d.ts +1 -1
- package/types/src/fitting/data.d.ts +0 -5
- package/types/src/fitting/observer.d.ts +0 -1
package/README.md
CHANGED
|
@@ -9,12 +9,32 @@
|
|
|
9
9
|
|
|
10
10
|
In order to use on Marp tools, we have extended from the slide deck framework **[Marpit](https://github.com/marp-team/marpit)**. You can use the practical Markdown syntax, advanced features, and official themes.
|
|
11
11
|
|
|
12
|
+
### Document version
|
|
13
|
+
|
|
14
|
+
**This document is targeted for Marp Core v3.x.** You can see the document of stable v2 release in [`v2-stable`](https://github.com/marp-team/marp-core/tree/v2-stable) branch.
|
|
15
|
+
|
|
16
|
+
> **⚡️ Release Candidate:** Marp Core v3 is the state of release candidate now. Some of downstream Marp tools still may be based on [the stable v2 release](https://github.com/marp-team/marp-core/tree/v2-stable).
|
|
17
|
+
|
|
18
|
+
## Install
|
|
19
|
+
|
|
20
|
+
```bash
|
|
21
|
+
# npm
|
|
22
|
+
npm install --save @marp-team/marp-core@next
|
|
23
|
+
```
|
|
24
|
+
|
|
25
|
+
```bash
|
|
26
|
+
# yarn
|
|
27
|
+
yarn add @marp-team/marp-core@next
|
|
28
|
+
```
|
|
29
|
+
|
|
30
|
+
During the latest version is release candidate, it is available in `next` dist tag.
|
|
31
|
+
|
|
12
32
|
## Usage
|
|
13
33
|
|
|
14
34
|
We provide `Marp` class, that is inherited from [Marpit](https://github.com/marp-team/marpit).
|
|
15
35
|
|
|
16
36
|
```javascript
|
|
17
|
-
import Marp from '@marp-team/marp-core'
|
|
37
|
+
import { Marp } from '@marp-team/marp-core'
|
|
18
38
|
|
|
19
39
|
// Convert Markdown slide deck into HTML and CSS
|
|
20
40
|
const marp = new Marp()
|
|
@@ -23,20 +43,24 @@ const { html, css } = marp.render('# Hello, marp-core!')
|
|
|
23
43
|
|
|
24
44
|
## Features
|
|
25
45
|
|
|
26
|
-
_We will only explain features extended in marp-core._ Please refer to [
|
|
46
|
+
_We will only explain features extended in marp-core._ Please refer to [Marpit framework](https://marpit.marp.app) if you want to know the basic features.
|
|
47
|
+
|
|
48
|
+
---
|
|
27
49
|
|
|
28
50
|
### Marp Markdown
|
|
29
51
|
|
|
30
|
-
Marp Markdown is based on [Marpit](https://
|
|
52
|
+
**Marp Markdown** is a custom Markdown flavor based on [Marpit](https://marpit.marp.app) and [CommonMark](https://commonmark.org/). Following are principle differences from the original:
|
|
31
53
|
|
|
32
54
|
- **Marpit**
|
|
33
|
-
-
|
|
55
|
+
- Enabled [inline SVG slide](https://marpit.marp.app/inline-svg) and [loose YAML parsing](https://marpit-api.marp.app/marpit#Marpit) by default.
|
|
34
56
|
|
|
35
57
|
* **CommonMark**
|
|
36
|
-
- For
|
|
58
|
+
- For making secure, we will deny most of HTML tags used in Markdown (`<br>` is only allowed by default).
|
|
37
59
|
- Support [table](https://github.github.com/gfm/#tables-extension-) and [strikethrough](https://github.github.com/gfm/#strikethrough-extension-) syntax, based on [GitHub Flavored Markdown](https://github.github.com/gfm/).
|
|
38
60
|
- Line breaks in paragraph will convert to `<br>` tag.
|
|
39
|
-
-
|
|
61
|
+
- Convert URL-like text into hyperlink automatically.
|
|
62
|
+
|
|
63
|
+
---
|
|
40
64
|
|
|
41
65
|
### [Built-in official themes][themes]
|
|
42
66
|
|
|
@@ -49,9 +73,11 @@ We provide bulit-in official themes for Marp. See more details in [themes].
|
|
|
49
73
|
|
|
50
74
|
[themes]: ./themes/
|
|
51
75
|
|
|
76
|
+
---
|
|
77
|
+
|
|
52
78
|
### `size` global directive
|
|
53
79
|
|
|
54
|
-
Do you want a traditional 4:3 slide size?
|
|
80
|
+
Do you want a traditional 4:3 slide size? Marp Core adds the support of `size` global directive. The extended theming system can switch the slide size easier.
|
|
55
81
|
|
|
56
82
|
```markdown
|
|
57
83
|
---
|
|
@@ -62,16 +88,24 @@ size: 4:3
|
|
|
62
88
|
# A traditional 4:3 slide
|
|
63
89
|
```
|
|
64
90
|
|
|
65
|
-
|
|
91
|
+
[Bulit-in themes for Marp][themes] have provided `16:9` (1280x720) and `4:3` (960x720) preset sizes.
|
|
92
|
+
|
|
93
|
+
#### Define size presets in custom theme CSS
|
|
94
|
+
|
|
95
|
+
If you want to use more size presets in your own theme, you have to define `@size` metadata(s) in theme CSS. [Learn in the document of theme metadata for Marp Core][metadata].
|
|
66
96
|
|
|
67
97
|
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.
|
|
68
98
|
|
|
69
99
|
[metadata]: ./themes#metadata-for-additional-features
|
|
70
100
|
|
|
101
|
+
---
|
|
102
|
+
|
|
71
103
|
### Emoji support
|
|
72
104
|
|
|
73
105
|
Emoji shortcode (like `:smile:`) and Unicode emoji 😄 will convert into the SVG vector image provided by [twemoji](https://github.com/twitter/twemoji) <img src="https://twemoji.maxcdn.com/2/svg/1f604.svg" alt="😄" width="16" height="16" />. It could render emoji with high resolution.
|
|
74
106
|
|
|
107
|
+
---
|
|
108
|
+
|
|
75
109
|
### Math typesetting
|
|
76
110
|
|
|
77
111
|
We have [Pandoc's Markdown style](https://pandoc.org/MANUAL.html#math) math typesetting support. Surround your formula by `$...$` to render math as inline, and `$$...$$` to render as block.
|
|
@@ -102,24 +136,24 @@ $$
|
|
|
102
136
|
</td>
|
|
103
137
|
<td>
|
|
104
138
|
|
|
105
|
-
|
|
106
140
|
|
|
107
141
|
</td>
|
|
108
142
|
</tbody>
|
|
109
143
|
</table>
|
|
110
144
|
|
|
111
|
-
You can choose using library for math from [
|
|
145
|
+
You can choose using library for math from [MathJax](https://www.mathjax.org/) and [KaTeX](https://khan.github.io/KaTeX/) in [`math` global directive](#math-global-directive) (or [JS constructor option](#math-constructor-option)). By default, we prefer MathJax for better rendering and syntax support, but KaTeX is faster rendering if you had a lot of formulas.
|
|
112
146
|
|
|
113
147
|
#### `math` global directive
|
|
114
148
|
|
|
115
149
|
Through `math` global directive, Marp Core is supporting to declare math library that will be used within current Markdown.
|
|
116
150
|
|
|
117
|
-
Set **`
|
|
151
|
+
Set **`mathjax`** or **`katex`** in the `math` global directive like this:
|
|
118
152
|
|
|
119
153
|
```markdown
|
|
120
154
|
---
|
|
121
|
-
# Declare to use
|
|
122
|
-
math:
|
|
155
|
+
# Declare to use KaTeX in this Markdown
|
|
156
|
+
math: katex
|
|
123
157
|
---
|
|
124
158
|
|
|
125
159
|
$$
|
|
@@ -130,35 +164,35 @@ x &= 1+1 \tag{1} \\
|
|
|
130
164
|
$$
|
|
131
165
|
```
|
|
132
166
|
|
|
133
|
-
If not declared, Marp Core will use the default library to render math (
|
|
167
|
+
If not declared, Marp Core will use the default library to render math. (MathJax in v3)
|
|
134
168
|
|
|
135
|
-
|
|
169
|
+
To prevent breaking the slide in upcoming updates, recommend to declare the library whenever to use math typesetting.
|
|
136
170
|
|
|
137
171
|
> :warning: The declaration of math library is given priority over [`math` JS constructor option](#math-constructor-option), but you cannot turn on again via `math` global directive if disabled math typesetting by the constructor.
|
|
138
172
|
|
|
173
|
+
---
|
|
174
|
+
|
|
139
175
|
### Auto-scaling features
|
|
140
176
|
|
|
141
|
-
|
|
177
|
+
Marp Core has some auto-scaling features:
|
|
178
|
+
|
|
179
|
+
- [**Fitting header**](#fitting-header): Get bigger heading that fit onto the slide by `# <!--fit-->`.
|
|
180
|
+
- [**Auto-shrink the code block and KaTeX block**](#auto-shrink-block): Prevent sticking out the block from the right of the slide.
|
|
181
|
+
|
|
182
|
+
Auto-scaling is available if defined [`@auto-scaling` metadata][metadata] in an using theme CSS.
|
|
142
183
|
|
|
143
184
|
```css
|
|
144
185
|
/*
|
|
145
|
-
* @theme
|
|
186
|
+
* @theme foobar
|
|
146
187
|
* @auto-scaling true
|
|
147
188
|
*/
|
|
148
189
|
```
|
|
149
190
|
|
|
150
|
-
Marp Core's
|
|
191
|
+
All of [Marp Core's built-in themes][themes] are ready to use full-featured auto scalings. If you're the theme author, you can control target elements which enable auto-scaling [by using metadata keyword(s).][metadata]
|
|
151
192
|
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
```css
|
|
155
|
-
/*
|
|
156
|
-
* @theme enable-auto-scaling-for-fitting-header-and-math
|
|
157
|
-
* @auto-scaling fittingHeader,math
|
|
158
|
-
*/
|
|
159
|
-
```
|
|
193
|
+
This feature depends to inline SVG, so note that it will not working if disabled [Marpit's `inlineSVG` mode](https://github.com/marp-team/marpit#inline-svg-slide-experimental) by setting `inlineSVG: false` in constructor option.
|
|
160
194
|
|
|
161
|
-
> :warning:
|
|
195
|
+
> :warning: Auto-scaling is designed for horizontal scaling. In vertical, the scaled element still may stick out from top and bottom of slide if there are a lot of contents around it.
|
|
162
196
|
|
|
163
197
|
#### Fitting header
|
|
164
198
|
|
|
@@ -170,33 +204,18 @@ When the headings contains `<!-- fit -->` comment, the size of headings will res
|
|
|
170
204
|
|
|
171
205
|
This syntax is similar to [Deckset's `[fit]` keyword](https://docs.decksetapp.com/English.lproj/Formatting/01-headings.html), but we use HTML comment to hide a fit keyword on Markdown rendered as document.
|
|
172
206
|
|
|
173
|
-
|
|
174
|
-
|
|
175
|
-
#### KaTeX Math block
|
|
176
|
-
|
|
177
|
-
We can scale-down the viewing size of KaTeX math block (surrounded by `$$`) to fit a slide automatically.
|
|
207
|
+
#### Auto-shrink the block
|
|
178
208
|
|
|
179
|
-
|
|
180
|
-
| :----------------------------------------------: | :-------------------------------------: |
|
|
181
|
-
|  |  |
|
|
209
|
+
Some of blocks will be shrunk to fit onto the slide. It is useful preventing stuck out the block from the right of the slide.
|
|
182
210
|
|
|
183
|
-
|
|
184
|
-
|
|
185
|
-
|
|
211
|
+
| | Traditional rendering | Auto-scaling |
|
|
212
|
+
| :------------------: | :----------------------------------------------: | :-------------------------------------: |
|
|
213
|
+
| **Code block** |  |  |
|
|
214
|
+
| **KaTeX math block** |  |  |
|
|
186
215
|
|
|
187
|
-
|
|
216
|
+
> :information_source: MathJax math block will always be scaled without even setting `@auto-scaling` metadata.
|
|
188
217
|
|
|
189
|
-
|
|
190
|
-
|
|
191
|
-
| Traditional rendering | Auto-scaling |
|
|
192
|
-
| :----------------------------------------------: | :-------------------------------------: |
|
|
193
|
-
|  |  |
|
|
194
|
-
|
|
195
|
-
These features means that the contents on a slide are not cropped, and not shown unnecessary scrollbars in code.
|
|
196
|
-
|
|
197
|
-
> :information_source: `@auto-scaling code` is a keyword of the `@auto-scaling` meta to enable code block scaling.
|
|
198
|
-
>
|
|
199
|
-
> `uncover` theme has disabled code block scaling because we use elastic style that has not compatible with it.
|
|
218
|
+
---
|
|
200
219
|
|
|
201
220
|
## Constructor options
|
|
202
221
|
|
|
@@ -215,7 +234,7 @@ const marp = new Marp({
|
|
|
215
234
|
base: '/resources/twemoji/',
|
|
216
235
|
},
|
|
217
236
|
},
|
|
218
|
-
math: '
|
|
237
|
+
math: 'katex',
|
|
219
238
|
minifyCSS: true,
|
|
220
239
|
script: {
|
|
221
240
|
source: 'cdn',
|
|
@@ -258,7 +277,7 @@ By passing `object`, you can set the allowlist to specify allowed tags and attri
|
|
|
258
277
|
|
|
259
278
|
Marp core allows only `<br>` tag by default, that is defined in [`Marp.html`](https://github.com/marp-team/marp-core/blob/5c3593320f1c1234f3b2556ecd1ff1f91d69c77a/src/marp.ts#L45).
|
|
260
279
|
|
|
261
|
-
Whatever any option is selected, `<!-- HTML comment -->` and `<style>`
|
|
280
|
+
> Whatever any option is selected, `<!-- HTML comment -->` and `<style>` tags are always parsed by Marpit for directives / tweaking style.
|
|
262
281
|
|
|
263
282
|
### `emoji`: _`object`_
|
|
264
283
|
|
|
@@ -279,14 +298,14 @@ Setting about emoji conversions.
|
|
|
279
298
|
|
|
280
299
|
> **For developers:** When you setting `unicode` option as `true`, Markdown parser will convert Unicode emoji into tokens internally. The rendering result is same as in `false`.
|
|
281
300
|
|
|
282
|
-
### `math`: _`boolean` | `"
|
|
301
|
+
### `math`: _`boolean` | `"mathjax"` | `"katex"` | `object`_ <a name="math-constructor-option" id="math-constructor-option"></a>
|
|
283
302
|
|
|
284
303
|
Enable or disable [math typesetting](#math-typesetting) syntax and [`math` global directive](#math-global-directive).
|
|
285
304
|
|
|
286
|
-
You can choose the default library for math by passing **`"
|
|
305
|
+
You can choose the default library for math by passing **`"mathjax"`** (default) or **`"katex"`**, and modify more settings by passing an object of sub-options.
|
|
287
306
|
|
|
288
|
-
- **`lib`**: _`"
|
|
289
|
-
- Choose the default library for math typesetting. _(`
|
|
307
|
+
- **`lib`**: _`"mathjax"` | `"katex"`_
|
|
308
|
+
- Choose the default library for math typesetting. _(`mathjax` by default)_
|
|
290
309
|
|
|
291
310
|
* **`katexOption`**: _`object`_
|
|
292
311
|
- Options that will be passed to KaTeX. Please refer to [KaTeX document](https://khan.github.io/KaTeX/docs/options.html).
|
package/lib/browser.cjs.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});const t="
|
|
1
|
+
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});const t={h1:{proto:()=>HTMLHeadingElement,attrs:{role:"heading","aria-level":"1"},style:"display: block; font-size: 2em; margin-block-start: 0.67em; margin-block-end: 0.67em; margin-inline-start: 0px; margin-inline-end: 0px; font-weight: bold;"},h2:{proto:()=>HTMLHeadingElement,attrs:{role:"heading","aria-level":"2"},style:"display: block; font-size: 1.5em; margin-block-start: 0.83em; margin-block-end: 0.83em; margin-inline-start: 0px; margin-inline-end: 0px; font-weight: bold;"},h3:{proto:()=>HTMLHeadingElement,attrs:{role:"heading","aria-level":"3"},style:"display: block; font-size: 1.17em; margin-block-start: 1em; margin-block-end: 1em; margin-inline-start: 0px; margin-inline-end: 0px; font-weight: bold;"},h4:{proto:()=>HTMLHeadingElement,attrs:{role:"heading","aria-level":"4"},style:"display: block; margin-block-start: 1.33em; margin-block-end: 1.33em; margin-inline-start: 0px; margin-inline-end: 0px; font-weight: bold;"},h5:{proto:()=>HTMLHeadingElement,attrs:{role:"heading","aria-level":"5"},style:"display: block; font-size: 0.83em; margin-block-start: 1.67em; margin-block-end: 1.67em; margin-inline-start: 0px; margin-inline-end: 0px; font-weight: bold;"},h6:{proto:()=>HTMLHeadingElement,attrs:{role:"heading","aria-level":"6"},style:"display: block; font-size: 0.67em; margin-block-start: 2.33em; margin-block-end: 2.33em; margin-inline-start: 0px; margin-inline-end: 0px; font-weight: bold;"},span:{proto:()=>HTMLSpanElement},pre:{proto:()=>HTMLElement,style:"display: block; font-family: monospace; white-space: pre; margin: 1em 0; --marp-auto-scaling-white-space: pre;"}},e="data-marp-auto-scaling-svg",i="data-marp-auto-scaling-container";class n extends HTMLElement{constructor(){super(),this.svgPreserveAspectRatio="xMinYMid meet",this.attachShadow({mode:"open"}),this.containerObserver=new ResizeObserver((([t])=>{const{width:e,height:i}=t.contentRect;this.containerSize={width:e,height:i},this.updateSVGRect()})),this.wrapperObserver=new ResizeObserver((([t])=>{const{width:e,height:i}=t.contentRect;this.wrapperSize={width:e,height:i},this.updateSVGRect()}))}static get observedAttributes(){return["data-downscale-only"]}connectedCallback(){var t,n,r,s,o;this.shadowRoot.innerHTML=`\n<style>\n svg[${e}] { display: block; width: 100%; height: auto; vertical-align: top; }\n span[${i}] { display: table; white-space: var(--marp-auto-scaling-white-space, nowrap); width: max-content; }\n</style>\n<div data-marp-auto-scaling-wrapper>\n <svg part="svg" ${e}>\n <foreignObject><span ${i}><slot></slot></span></foreignObject>\n </svg>\n</div>\n `.split(/\n\s*/).join(""),this.wrapper=null!==(t=this.shadowRoot.querySelector("div[data-marp-auto-scaling-wrapper]"))&&void 0!==t?t:void 0;const a=this.svg;this.svg=null!==(r=null===(n=this.wrapper)||void 0===n?void 0:n.querySelector(`svg[${e}]`))&&void 0!==r?r:void 0,this.svg!==a&&(this.svgComputedStyle=this.svg?window.getComputedStyle(this.svg):void 0),this.container=null!==(o=null===(s=this.svg)||void 0===s?void 0:s.querySelector(`span[${i}]`))&&void 0!==o?o:void 0,this.observe()}disconnectedCallback(){this.svg=void 0,this.svgComputedStyle=void 0,this.wrapper=void 0,this.container=void 0,this.observe()}attributeChangedCallback(){this.observe()}observe(){this.containerObserver.disconnect(),this.wrapperObserver.disconnect(),this.wrapper&&this.wrapperObserver.observe(this.wrapper),this.container&&this.containerObserver.observe(this.container),this.svgComputedStyle&&this.observeSVGStyle(this.svgComputedStyle)}observeSVGStyle(t){const e=()=>{const i=(()=>{const e=t.getPropertyValue("--preserve-aspect-ratio");if(e)return e.trim();return`x${(({textAlign:t,direction:e})=>{if(t.endsWith("left"))return"Min";if(t.endsWith("right"))return"Max";if("start"===t||"end"===t){let i="rtl"===e;return"end"===t&&(i=!i),i?"Max":"Min"}return"Mid"})(t)}YMid meet`})();i!==this.svgPreserveAspectRatio&&(this.svgPreserveAspectRatio=i,this.updateSVGRect()),t===this.svgComputedStyle&&requestAnimationFrame(e)};e()}updateSVGRect(){var t,e,i,n,r;if(!this.containerSize)return;let s=Math.ceil(this.containerSize.width);const o=Math.ceil(this.containerSize.height);void 0!==this.dataset.downscaleOnly&&(s=Math.max(s,null!==(e=null===(t=this.wrapperSize)||void 0===t?void 0:t.width)&&void 0!==e?e:1));const a=null===(i=this.svg)||void 0===i?void 0:i.querySelector(":scope > foreignObject");if(null==a||a.setAttribute("width",`${s}`),null==a||a.setAttribute("height",`${o}`),null===(n=this.svg)||void 0===n||n.setAttribute("viewBox",`0 0 ${s} ${o}`),null===(r=this.svg)||void 0===r||r.setAttribute("preserveAspectRatio",this.svgPreserveAspectRatio),this.container){const t=this.svgPreserveAspectRatio.toLowerCase();this.container.style.marginLeft=t.startsWith("xmid")||t.startsWith("xmax")?"auto":"0",this.container.style.marginRight=t.startsWith("xmi")?"auto":"0"}}}const r=(t,{attrs:e={},style:i})=>class extends t{constructor(...t){super(...t);for(const[t,i]of Object.entries(e))this.hasAttribute(t)||this.setAttribute(t,i);this.attachShadow({mode:"open"})}static get observedAttributes(){return["data-auto-scaling"]}connectedCallback(){this._update()}attributeChangedCallback(){this._update()}_update(){const t=i?`<style>:host { ${i} }</style>`:"";let e="<slot></slot>";const{autoScaling:n}=this.dataset;if(void 0!==n){e=`<marp-auto-scaling exportparts="svg:auto-scaling" ${"downscale-only"===n?"data-downscale-only":""}>${e}</marp-auto-scaling>`}this.shadowRoot.innerHTML=t+e}};let s;const o=Symbol(),a="marpitSVGPolyfill:setZoomFactor,",l=Symbol();let c,d;function p(t){const e="object"==typeof t&&t.target||document,i="object"==typeof t?t.zoom:t;window[l]||(Object.defineProperty(window,l,{configurable:!0,value:!0}),window.addEventListener("message",(({data:t,origin:e})=>{if(e===window.origin)try{if(t&&"string"==typeof t&&t.startsWith(a)){const[,e]=t.split(","),i=Number.parseFloat(e);Number.isNaN(i)||(d=i)}}catch(t){console.error(t)}})));let n=!1;Array.from(e.querySelectorAll("svg[data-marpit-svg]"),(t=>{var e,r,s,o;t.style.transform||(t.style.transform="translateZ(0)");const a=i||d||t.currentScale||1;c!==a&&(c=a,n=a);const l=t.getBoundingClientRect(),{length:p}=t.children;for(let i=0;i<p;i+=1){const n=t.children[i],c=n.getScreenCTM();if(c){const t=null!==(r=null===(e=n.x)||void 0===e?void 0:e.baseVal.value)&&void 0!==r?r:0,i=null!==(o=null===(s=n.y)||void 0===s?void 0:s.baseVal.value)&&void 0!==o?o:0,d=n.firstElementChild,{style:p}=d;p.transformOrigin||(p.transformOrigin=`${-t}px ${-i}px`),p.transform=`scale(${a}) matrix(${c.a}, ${c.b}, ${c.c}, ${c.d}, ${c.e-l.left}, ${c.f-l.top}) translateZ(0.0001px)`}}})),!1!==n&&Array.from(e.querySelectorAll("iframe"),(({contentWindow:t})=>{null==t||t.postMessage(`${a}${n}`,"null"===window.origin?"*":window.origin)}))}function h({once:t=!1,target:e=document}={}){const i="Apple Computer, Inc."===navigator.vendor?[p]:[];let n=!t;const r=()=>{for(const t of i)t({target:e});n&&window.requestAnimationFrame(r)};return r(),()=>{n=!1}}c=1,d=void 0;const g=Symbol(),m=(e=document)=>{if("undefined"==typeof window)throw new Error("Marp Core's browser script is valid only in browser context.");if(e[g])return e[g];((e=document)=>{const i=window[o];i||customElements.define("marp-auto-scaling",n);for(const n of Object.keys(t)){const o=`marp-${n}`,a=t[n].proto();null!=s||(s=!!document.createElement("div",{is:"marp-auto-scaling"}).outerHTML.startsWith("<div is")),s&&a!==HTMLElement?i||customElements.define(o,r(a,{style:t[n].style}),{extends:n}):(i||customElements.define(o,r(HTMLElement,t[n])),e.querySelectorAll(`${n}[is="${o}"]`).forEach((t=>{t.outerHTML=t.outerHTML.replace(new RegExp(`^<${n}`,"i"),`<${o}`).replace(new RegExp(`</${n}>$`,"i"),`</${o}>`)})))}window[o]=!0})(e);const i=h({target:e}),a=()=>{i(),delete e[g]};return Object.defineProperty(e,g,{configurable:!0,value:a}),a};exports.browser=m,exports.default=m,exports.observer=h;
|
package/lib/browser.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
!function(){"use strict";const t="
|
|
1
|
+
!function(){"use strict";const t={h1:{proto:()=>HTMLHeadingElement,attrs:{role:"heading","aria-level":"1"},style:"display: block; font-size: 2em; margin-block-start: 0.67em; margin-block-end: 0.67em; margin-inline-start: 0px; margin-inline-end: 0px; font-weight: bold;"},h2:{proto:()=>HTMLHeadingElement,attrs:{role:"heading","aria-level":"2"},style:"display: block; font-size: 1.5em; margin-block-start: 0.83em; margin-block-end: 0.83em; margin-inline-start: 0px; margin-inline-end: 0px; font-weight: bold;"},h3:{proto:()=>HTMLHeadingElement,attrs:{role:"heading","aria-level":"3"},style:"display: block; font-size: 1.17em; margin-block-start: 1em; margin-block-end: 1em; margin-inline-start: 0px; margin-inline-end: 0px; font-weight: bold;"},h4:{proto:()=>HTMLHeadingElement,attrs:{role:"heading","aria-level":"4"},style:"display: block; margin-block-start: 1.33em; margin-block-end: 1.33em; margin-inline-start: 0px; margin-inline-end: 0px; font-weight: bold;"},h5:{proto:()=>HTMLHeadingElement,attrs:{role:"heading","aria-level":"5"},style:"display: block; font-size: 0.83em; margin-block-start: 1.67em; margin-block-end: 1.67em; margin-inline-start: 0px; margin-inline-end: 0px; font-weight: bold;"},h6:{proto:()=>HTMLHeadingElement,attrs:{role:"heading","aria-level":"6"},style:"display: block; font-size: 0.67em; margin-block-start: 2.33em; margin-block-end: 2.33em; margin-inline-start: 0px; margin-inline-end: 0px; font-weight: bold;"},span:{proto:()=>HTMLSpanElement},pre:{proto:()=>HTMLElement,style:"display: block; font-family: monospace; white-space: pre; margin: 1em 0; --marp-auto-scaling-white-space: pre;"}},e="data-marp-auto-scaling-wrapper",i="data-marp-auto-scaling-svg",n="data-marp-auto-scaling-container";class o extends HTMLElement{constructor(){super(),this.svgPreserveAspectRatio="xMinYMid meet",this.attachShadow({mode:"open"}),this.containerObserver=new ResizeObserver((([t])=>{const{width:e,height:i}=t.contentRect;this.containerSize={width:e,height:i},this.updateSVGRect()})),this.wrapperObserver=new ResizeObserver((([t])=>{const{width:e,height:i}=t.contentRect;this.wrapperSize={width:e,height:i},this.updateSVGRect()}))}static get observedAttributes(){return["data-downscale-only"]}connectedCallback(){var t,o,s,r,a;this.shadowRoot.innerHTML=`\n<style>\n svg[${i}] { display: block; width: 100%; height: auto; vertical-align: top; }\n span[${n}] { display: table; white-space: var(--marp-auto-scaling-white-space, nowrap); width: max-content; }\n</style>\n<div ${e}>\n <svg part="svg" ${i}>\n <foreignObject><span ${n}><slot></slot></span></foreignObject>\n </svg>\n</div>\n `.split(/\n\s*/).join(""),this.wrapper=null!==(t=this.shadowRoot.querySelector(`div[${e}]`))&&void 0!==t?t:void 0;const l=this.svg;this.svg=null!==(s=null===(o=this.wrapper)||void 0===o?void 0:o.querySelector(`svg[${i}]`))&&void 0!==s?s:void 0,this.svg!==l&&(this.svgComputedStyle=this.svg?window.getComputedStyle(this.svg):void 0),this.container=null!==(a=null===(r=this.svg)||void 0===r?void 0:r.querySelector(`span[${n}]`))&&void 0!==a?a:void 0,this.observe()}disconnectedCallback(){this.svg=void 0,this.svgComputedStyle=void 0,this.wrapper=void 0,this.container=void 0,this.observe()}attributeChangedCallback(){this.observe()}observe(){this.containerObserver.disconnect(),this.wrapperObserver.disconnect(),this.wrapper&&this.wrapperObserver.observe(this.wrapper),this.container&&this.containerObserver.observe(this.container),this.svgComputedStyle&&this.observeSVGStyle(this.svgComputedStyle)}observeSVGStyle(t){const e=()=>{const i=(()=>{const e=t.getPropertyValue("--preserve-aspect-ratio");if(e)return e.trim();return`x${(({textAlign:t,direction:e})=>{if(t.endsWith("left"))return"Min";if(t.endsWith("right"))return"Max";if("start"===t||"end"===t){let i="rtl"===e;return"end"===t&&(i=!i),i?"Max":"Min"}return"Mid"})(t)}YMid meet`})();i!==this.svgPreserveAspectRatio&&(this.svgPreserveAspectRatio=i,this.updateSVGRect()),t===this.svgComputedStyle&&requestAnimationFrame(e)};e()}updateSVGRect(){var t,e,i,n,o;if(!this.containerSize)return;let s=Math.ceil(this.containerSize.width);const r=Math.ceil(this.containerSize.height);void 0!==this.dataset.downscaleOnly&&(s=Math.max(s,null!==(e=null===(t=this.wrapperSize)||void 0===t?void 0:t.width)&&void 0!==e?e:1));const a=null===(i=this.svg)||void 0===i?void 0:i.querySelector(":scope > foreignObject");if(null==a||a.setAttribute("width",`${s}`),null==a||a.setAttribute("height",`${r}`),null===(n=this.svg)||void 0===n||n.setAttribute("viewBox",`0 0 ${s} ${r}`),null===(o=this.svg)||void 0===o||o.setAttribute("preserveAspectRatio",this.svgPreserveAspectRatio),this.container){const t=this.svgPreserveAspectRatio.toLowerCase();this.container.style.marginLeft=t.startsWith("xmid")||t.startsWith("xmax")?"auto":"0",this.container.style.marginRight=t.startsWith("xmi")?"auto":"0"}}}const s=(t,{attrs:e={},style:i})=>class extends t{constructor(...t){super(...t);for(const[t,i]of Object.entries(e))this.hasAttribute(t)||this.setAttribute(t,i);this.attachShadow({mode:"open"})}static get observedAttributes(){return["data-auto-scaling"]}connectedCallback(){this._update()}attributeChangedCallback(){this._update()}_update(){const t=i?`<style>:host { ${i} }</style>`:"";let e="<slot></slot>";const{autoScaling:n}=this.dataset;if(void 0!==n){e=`<marp-auto-scaling exportparts="svg:auto-scaling" ${"downscale-only"===n?"data-downscale-only":""}>${e}</marp-auto-scaling>`}this.shadowRoot.innerHTML=t+e}};let r;const a=Symbol(),l="marpitSVGPolyfill:setZoomFactor,",c=Symbol();let d,h;function p(t){const e="object"==typeof t&&t.target||document,i="object"==typeof t?t.zoom:t;window[c]||(Object.defineProperty(window,c,{configurable:!0,value:!0}),window.addEventListener("message",(({data:t,origin:e})=>{if(e===window.origin)try{if(t&&"string"==typeof t&&t.startsWith(l)){const[,e]=t.split(","),i=Number.parseFloat(e);Number.isNaN(i)||(h=i)}}catch(t){console.error(t)}})));let n=!1;Array.from(e.querySelectorAll("svg[data-marpit-svg]"),(t=>{var e,o,s,r;t.style.transform||(t.style.transform="translateZ(0)");const a=i||h||t.currentScale||1;d!==a&&(d=a,n=a);const l=t.getBoundingClientRect(),{length:c}=t.children;for(let i=0;i<c;i+=1){const n=t.children[i],c=n.getScreenCTM();if(c){const t=null!==(o=null===(e=n.x)||void 0===e?void 0:e.baseVal.value)&&void 0!==o?o:0,i=null!==(r=null===(s=n.y)||void 0===s?void 0:s.baseVal.value)&&void 0!==r?r:0,d=n.firstElementChild,{style:h}=d;h.transformOrigin||(h.transformOrigin=`${-t}px ${-i}px`),h.transform=`scale(${a}) matrix(${c.a}, ${c.b}, ${c.c}, ${c.d}, ${c.e-l.left}, ${c.f-l.top}) translateZ(0.0001px)`}}})),!1!==n&&Array.from(e.querySelectorAll("iframe"),(({contentWindow:t})=>{null==t||t.postMessage(`${l}${n}`,"null"===window.origin?"*":window.origin)}))}function g({once:t=!1,target:e=document}={}){const i="Apple Computer, Inc."===navigator.vendor?[p]:[];let n=!t;const o=()=>{for(const t of i)t({target:e});n&&window.requestAnimationFrame(o)};return o(),()=>{n=!1}}d=1,h=void 0;const m=Symbol(),u=document.currentScript;((e=document)=>{if("undefined"==typeof window)throw new Error("Marp Core's browser script is valid only in browser context.");if(e[m])return e[m];((e=document)=>{const i=window[a];i||customElements.define("marp-auto-scaling",o);for(const n of Object.keys(t)){const o=`marp-${n}`,a=t[n].proto();null!=r||(r=!!document.createElement("div",{is:"marp-auto-scaling"}).outerHTML.startsWith("<div is")),r&&a!==HTMLElement?i||customElements.define(o,s(a,{style:t[n].style}),{extends:n}):(i||customElements.define(o,s(HTMLElement,t[n])),e.querySelectorAll(`${n}[is="${o}"]`).forEach((t=>{t.outerHTML=t.outerHTML.replace(new RegExp(`^<${n}`,"i"),`<${o}`).replace(new RegExp(`</${n}>$`,"i"),`</${o}>`)})))}window[a]=!0})(e);const i=g({target:e}),n=()=>{i(),delete e[m]};Object.defineProperty(e,m,{configurable:!0,value:n})})(u?u.getRootNode():document)}();
|