@marp-team/marp-core 2.3.0 → 3.0.2
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 +65 -58
- package/lib/browser.cjs.js +1 -1
- package/lib/browser.js +1 -1
- package/lib/marp.js +1 -1
- package/package.json +32 -31
- 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,24 +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
|
+
|
|
12
18
|
## Install
|
|
13
19
|
|
|
14
20
|
```bash
|
|
15
21
|
# npm
|
|
16
|
-
npm install --save @marp-team/marp-core
|
|
22
|
+
npm install --save @marp-team/marp-core@next
|
|
17
23
|
```
|
|
18
24
|
|
|
19
25
|
```bash
|
|
20
26
|
# yarn
|
|
21
|
-
yarn add @marp-team/marp-core
|
|
27
|
+
yarn add @marp-team/marp-core@next
|
|
22
28
|
```
|
|
23
29
|
|
|
30
|
+
During the latest version is release candidate, it is available in `next` dist tag.
|
|
31
|
+
|
|
24
32
|
## Usage
|
|
25
33
|
|
|
26
34
|
We provide `Marp` class, that is inherited from [Marpit](https://github.com/marp-team/marpit).
|
|
27
35
|
|
|
28
36
|
```javascript
|
|
29
|
-
import Marp from '@marp-team/marp-core'
|
|
37
|
+
import { Marp } from '@marp-team/marp-core'
|
|
30
38
|
|
|
31
39
|
// Convert Markdown slide deck into HTML and CSS
|
|
32
40
|
const marp = new Marp()
|
|
@@ -35,20 +43,24 @@ const { html, css } = marp.render('# Hello, marp-core!')
|
|
|
35
43
|
|
|
36
44
|
## Features
|
|
37
45
|
|
|
38
|
-
_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
|
+
---
|
|
39
49
|
|
|
40
50
|
### Marp Markdown
|
|
41
51
|
|
|
42
|
-
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:
|
|
43
53
|
|
|
44
54
|
- **Marpit**
|
|
45
|
-
-
|
|
55
|
+
- Enabled [inline SVG slide](https://marpit.marp.app/inline-svg) and [loose YAML parsing](https://marpit-api.marp.app/marpit#Marpit) by default.
|
|
46
56
|
|
|
47
57
|
* **CommonMark**
|
|
48
|
-
- For
|
|
58
|
+
- For making secure, we will deny most of HTML tags used in Markdown (`<br>` is only allowed by default).
|
|
49
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/).
|
|
50
60
|
- Line breaks in paragraph will convert to `<br>` tag.
|
|
51
|
-
-
|
|
61
|
+
- Convert URL-like text into hyperlink automatically.
|
|
62
|
+
|
|
63
|
+
---
|
|
52
64
|
|
|
53
65
|
### [Built-in official themes][themes]
|
|
54
66
|
|
|
@@ -61,9 +73,11 @@ We provide bulit-in official themes for Marp. See more details in [themes].
|
|
|
61
73
|
|
|
62
74
|
[themes]: ./themes/
|
|
63
75
|
|
|
76
|
+
---
|
|
77
|
+
|
|
64
78
|
### `size` global directive
|
|
65
79
|
|
|
66
|
-
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.
|
|
67
81
|
|
|
68
82
|
```markdown
|
|
69
83
|
---
|
|
@@ -74,16 +88,24 @@ size: 4:3
|
|
|
74
88
|
# A traditional 4:3 slide
|
|
75
89
|
```
|
|
76
90
|
|
|
77
|
-
|
|
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].
|
|
78
96
|
|
|
79
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.
|
|
80
98
|
|
|
81
99
|
[metadata]: ./themes#metadata-for-additional-features
|
|
82
100
|
|
|
101
|
+
---
|
|
102
|
+
|
|
83
103
|
### Emoji support
|
|
84
104
|
|
|
85
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.
|
|
86
106
|
|
|
107
|
+
---
|
|
108
|
+
|
|
87
109
|
### Math typesetting
|
|
88
110
|
|
|
89
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.
|
|
@@ -114,24 +136,24 @@ $$
|
|
|
114
136
|
</td>
|
|
115
137
|
<td>
|
|
116
138
|
|
|
117
|
-
|
|
118
140
|
|
|
119
141
|
</td>
|
|
120
142
|
</tbody>
|
|
121
143
|
</table>
|
|
122
144
|
|
|
123
|
-
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.
|
|
124
146
|
|
|
125
147
|
#### `math` global directive
|
|
126
148
|
|
|
127
149
|
Through `math` global directive, Marp Core is supporting to declare math library that will be used within current Markdown.
|
|
128
150
|
|
|
129
|
-
Set **`
|
|
151
|
+
Set **`mathjax`** or **`katex`** in the `math` global directive like this:
|
|
130
152
|
|
|
131
153
|
```markdown
|
|
132
154
|
---
|
|
133
|
-
# Declare to use
|
|
134
|
-
math:
|
|
155
|
+
# Declare to use KaTeX in this Markdown
|
|
156
|
+
math: katex
|
|
135
157
|
---
|
|
136
158
|
|
|
137
159
|
$$
|
|
@@ -142,35 +164,35 @@ x &= 1+1 \tag{1} \\
|
|
|
142
164
|
$$
|
|
143
165
|
```
|
|
144
166
|
|
|
145
|
-
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)
|
|
146
168
|
|
|
147
|
-
|
|
169
|
+
To prevent breaking the slide in upcoming updates, recommend to declare the library whenever to use math typesetting.
|
|
148
170
|
|
|
149
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.
|
|
150
172
|
|
|
173
|
+
---
|
|
174
|
+
|
|
151
175
|
### Auto-scaling features
|
|
152
176
|
|
|
153
|
-
|
|
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.
|
|
154
183
|
|
|
155
184
|
```css
|
|
156
185
|
/*
|
|
157
|
-
* @theme
|
|
186
|
+
* @theme foobar
|
|
158
187
|
* @auto-scaling true
|
|
159
188
|
*/
|
|
160
189
|
```
|
|
161
190
|
|
|
162
|
-
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]
|
|
163
192
|
|
|
164
|
-
|
|
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.
|
|
165
194
|
|
|
166
|
-
|
|
167
|
-
/*
|
|
168
|
-
* @theme enable-auto-scaling-for-fitting-header-and-math
|
|
169
|
-
* @auto-scaling fittingHeader,math
|
|
170
|
-
*/
|
|
171
|
-
```
|
|
172
|
-
|
|
173
|
-
> :warning: 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.
|
|
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.
|
|
174
196
|
|
|
175
197
|
#### Fitting header
|
|
176
198
|
|
|
@@ -182,33 +204,18 @@ When the headings contains `<!-- fit -->` comment, the size of headings will res
|
|
|
182
204
|
|
|
183
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.
|
|
184
206
|
|
|
185
|
-
|
|
186
|
-
|
|
187
|
-
#### KaTeX Math block
|
|
188
|
-
|
|
189
|
-
We can scale-down the viewing size of KaTeX math block (surrounded by `$$`) to fit a slide automatically.
|
|
190
|
-
|
|
191
|
-
| Traditional rendering | Auto-scaling |
|
|
192
|
-
| :----------------------------------------------: | :-------------------------------------: |
|
|
193
|
-
|  |  |
|
|
207
|
+
#### Auto-shrink the block
|
|
194
208
|
|
|
195
|
-
|
|
196
|
-
>
|
|
197
|
-
> _Please notice that the math block rendered by MathJax would always be scaled-down and cannot control whether scale via metadata._
|
|
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.
|
|
198
210
|
|
|
199
|
-
|
|
211
|
+
| | Traditional rendering | Auto-scaling |
|
|
212
|
+
| :------------------: | :----------------------------------------------: | :-------------------------------------: |
|
|
213
|
+
| **Code block** |  |  |
|
|
214
|
+
| **KaTeX math block** |  |  |
|
|
200
215
|
|
|
201
|
-
|
|
216
|
+
> :information_source: MathJax math block will always be scaled without even setting `@auto-scaling` metadata.
|
|
202
217
|
|
|
203
|
-
|
|
204
|
-
| :----------------------------------------------: | :-------------------------------------: |
|
|
205
|
-
|  |  |
|
|
206
|
-
|
|
207
|
-
These features means that the contents on a slide are not cropped, and not shown unnecessary scrollbars in code.
|
|
208
|
-
|
|
209
|
-
> :information_source: `@auto-scaling code` is a keyword of the `@auto-scaling` meta to enable code block scaling.
|
|
210
|
-
>
|
|
211
|
-
> `uncover` theme has disabled code block scaling because we use elastic style that has not compatible with it.
|
|
218
|
+
---
|
|
212
219
|
|
|
213
220
|
## Constructor options
|
|
214
221
|
|
|
@@ -227,7 +234,7 @@ const marp = new Marp({
|
|
|
227
234
|
base: '/resources/twemoji/',
|
|
228
235
|
},
|
|
229
236
|
},
|
|
230
|
-
math: '
|
|
237
|
+
math: 'katex',
|
|
231
238
|
minifyCSS: true,
|
|
232
239
|
script: {
|
|
233
240
|
source: 'cdn',
|
|
@@ -270,7 +277,7 @@ By passing `object`, you can set the allowlist to specify allowed tags and attri
|
|
|
270
277
|
|
|
271
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).
|
|
272
279
|
|
|
273
|
-
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.
|
|
274
281
|
|
|
275
282
|
### `emoji`: _`object`_
|
|
276
283
|
|
|
@@ -291,14 +298,14 @@ Setting about emoji conversions.
|
|
|
291
298
|
|
|
292
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`.
|
|
293
300
|
|
|
294
|
-
### `math`: _`boolean` | `"
|
|
301
|
+
### `math`: _`boolean` | `"mathjax"` | `"katex"` | `object`_ <a name="math-constructor-option" id="math-constructor-option"></a>
|
|
295
302
|
|
|
296
303
|
Enable or disable [math typesetting](#math-typesetting) syntax and [`math` global directive](#math-global-directive).
|
|
297
304
|
|
|
298
|
-
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.
|
|
299
306
|
|
|
300
|
-
- **`lib`**: _`"
|
|
301
|
-
- Choose the default library for math typesetting. _(`
|
|
307
|
+
- **`lib`**: _`"mathjax"` | `"katex"`_
|
|
308
|
+
- Choose the default library for math typesetting. _(`mathjax` by default)_
|
|
302
309
|
|
|
303
310
|
* **`katexOption`**: _`object`_
|
|
304
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 e={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;"}},t="data-marp-auto-scaling-svg",i="data-marp-auto-scaling-container";class n extends HTMLElement{constructor(){super(),this.svgPreserveAspectRatio="xMinYMid meet";const e=e=>([t])=>{const{width:i,height:n}=t.contentRect;this[e]={width:i,height:n},this.updateSVGRect()};this.attachShadow({mode:"open"}),this.containerObserver=new ResizeObserver(e("containerSize")),this.wrapperObserver=new ResizeObserver(e("wrapperSize"))}static get observedAttributes(){return["data-downscale-only"]}connectedCallback(){var e,n,r,s,o;this.shadowRoot.innerHTML=`\n<style>\n svg[${t}] { 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" ${t}>\n <foreignObject><span ${i}><slot></slot></span></foreignObject>\n </svg>\n</div>\n `.split(/\n\s*/).join(""),this.wrapper=null!==(e=this.shadowRoot.querySelector("div[data-marp-auto-scaling-wrapper]"))&&void 0!==e?e:void 0;const a=this.svg;this.svg=null!==(r=null===(n=this.wrapper)||void 0===n?void 0:n.querySelector(`svg[${t}]`))&&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(e){const t=()=>{const i=(()=>{const t=e.getPropertyValue("--preserve-aspect-ratio");if(t)return t.trim();return`x${(({textAlign:e,direction:t})=>{if(e.endsWith("left"))return"Min";if(e.endsWith("right"))return"Max";if("start"===e||"end"===e){let i="rtl"===t;return"end"===e&&(i=!i),i?"Max":"Min"}return"Mid"})(e)}YMid meet`})();i!==this.svgPreserveAspectRatio&&(this.svgPreserveAspectRatio=i,this.updateSVGRect()),e===this.svgComputedStyle&&requestAnimationFrame(t)};t()}updateSVGRect(){var e,t,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!==(t=null===(e=this.wrapperSize)||void 0===e?void 0:e.width)&&void 0!==t?t: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 e=this.svgPreserveAspectRatio.toLowerCase();this.container.style.marginLeft=e.startsWith("xmid")||e.startsWith("xmax")?"auto":"0",this.container.style.marginRight=e.startsWith("xmi")?"auto":"0"}}}const r=(e,{attrs:t={},style:i})=>class extends e{constructor(...e){super(...e);for(const[e,i]of Object.entries(t))this.hasAttribute(e)||this.setAttribute(e,i);this.attachShadow({mode:"open"})}static get observedAttributes(){return["data-auto-scaling"]}connectedCallback(){this._update()}attributeChangedCallback(){this._update()}_update(){const e=i?`<style>:host { ${i} }</style>`:"";let t="<slot></slot>";const{autoScaling:n}=this.dataset;if(void 0!==n){t=`<marp-auto-scaling exportparts="svg:auto-scaling" ${"downscale-only"===n?"data-downscale-only":""}>${t}</marp-auto-scaling>`}this.shadowRoot.innerHTML=e+t}};let s;const o=Symbol(),a="marpitSVGPolyfill:setZoomFactor,",l=Symbol();let c,d;function p(e){const t="object"==typeof e&&e.target||document,i="object"==typeof e?e.zoom:e;window[l]||(Object.defineProperty(window,l,{configurable:!0,value:!0}),window.addEventListener("message",(({data:e,origin:t})=>{if(t===window.origin)try{if(e&&"string"==typeof e&&e.startsWith(a)){const[,t]=e.split(","),i=Number.parseFloat(t);Number.isNaN(i)||(d=i)}}catch(e){console.error(e)}})));let n=!1;Array.from(t.querySelectorAll("svg[data-marpit-svg]"),(e=>{var t,r,s,o;e.style.transform||(e.style.transform="translateZ(0)");const a=i||d||e.currentScale||1;c!==a&&(c=a,n=a);const l=e.getBoundingClientRect(),{length:p}=e.children;for(let i=0;i<p;i+=1){const n=e.children[i],c=n.getScreenCTM();if(c){const e=null!==(r=null===(t=n.x)||void 0===t?void 0:t.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=`${-e}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(t.querySelectorAll("iframe"),(({contentWindow:e})=>{null==e||e.postMessage(`${a}${n}`,"null"===window.origin?"*":window.origin)}))}function h({once:e=!1,target:t=document}={}){const i="Apple Computer, Inc."===navigator.vendor?[p]:[];let n=!e;const r=()=>{for(const e of i)e({target:t});n&&window.requestAnimationFrame(r)};return r(),()=>{n=!1}}c=1,d=void 0;const g=Symbol(),m=(t=document)=>{if("undefined"==typeof window)throw new Error("Marp Core's browser script is valid only in browser context.");if(t[g])return t[g];((t=document)=>{const i=window[o];i||customElements.define("marp-auto-scaling",n);for(const n of Object.keys(e)){const o=`marp-${n}`,a=e[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:e[n].style}),{extends:n}):(i||customElements.define(o,r(HTMLElement,e[n])),t.querySelectorAll(`${n}[is="${o}"]`).forEach((e=>{e.outerHTML=e.outerHTML.replace(new RegExp(`^<${n}`,"i"),`<${o}`).replace(new RegExp(`</${n}>$`,"i"),`</${o}>`)})))}window[o]=!0})(t);const i=h({target:t}),a=()=>{i(),delete t[g]};return Object.defineProperty(t,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";const t=t=>([e])=>{const{width:i,height:n}=e.contentRect;this[t]={width:i,height:n},this.updateSVGRect()};this.attachShadow({mode:"open"}),this.containerObserver=new ResizeObserver(t("containerSize")),this.wrapperObserver=new ResizeObserver(t("wrapperSize"))}static get observedAttributes(){return["data-downscale-only"]}connectedCallback(){var t,o,r,s,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!==(r=null===(o=this.wrapper)||void 0===o?void 0:o.querySelector(`svg[${i}]`))&&void 0!==r?r:void 0,this.svg!==l&&(this.svgComputedStyle=this.svg?window.getComputedStyle(this.svg):void 0),this.container=null!==(a=null===(s=this.svg)||void 0===s?void 0:s.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 r=Math.ceil(this.containerSize.width);const s=Math.ceil(this.containerSize.height);void 0!==this.dataset.downscaleOnly&&(r=Math.max(r,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",`${r}`),null==a||a.setAttribute("height",`${s}`),null===(n=this.svg)||void 0===n||n.setAttribute("viewBox",`0 0 ${r} ${s}`),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 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 a=Symbol(),l="marpitSVGPolyfill:setZoomFactor,",c=Symbol();let d,p;function h(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)||(p=i)}}catch(t){console.error(t)}})));let n=!1;Array.from(e.querySelectorAll("svg[data-marpit-svg]"),(t=>{var e,o,r,s;t.style.transform||(t.style.transform="translateZ(0)");const a=i||p||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!==(s=null===(r=n.y)||void 0===r?void 0:r.baseVal.value)&&void 0!==s?s: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(`${l}${n}`,"null"===window.origin?"*":window.origin)}))}function g({once:t=!1,target:e=document}={}){const i="Apple Computer, Inc."===navigator.vendor?[h]:[];let n=!t;const o=()=>{for(const t of i)t({target:e});n&&window.requestAnimationFrame(o)};return o(),()=>{n=!1}}d=1,p=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!=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[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)}();
|