` element corresponds to a single slide page. This is analogous to how frameworks like reveal.js handle slide markup. SOURCE: https://github.com/marp-team/marpit/blob/main/docs/theme-css.md#_snippet_0 LANGUAGE: html CODE: ```

First page

Second page

``` ---------------------------------------- TITLE: Split + Multiple backgrounds - Marpit Markdown DESCRIPTION: Combines split backgrounds with multiple backgrounds. An image is placed on the right side, and subsequent images are stacked horizontally on the left, shrinking the content area to the right. SOURCE: https://github.com/marp-team/marpit/blob/main/docs/image-syntax.md#_snippet_7 LANGUAGE: markdown CODE: ``` ![bg right](https://picsum.photos/720?image=3) ![bg](https://picsum.photos/720?image=20) # Split + Multiple BGs The space of a slide content will shrink to the left side. ``` ---------------------------------------- TITLE: Render HTML as Array DESCRIPTION: Details how to render Markdown into an array of HTML strings, where each string represents a slide. This is achieved by passing `htmlAsArray: true` as the second argument to `marpit.render()`. SOURCE: https://github.com/marp-team/marpit/blob/main/docs/usage.md#_snippet_7 LANGUAGE: javascript CODE: ``` const markdown = ` # Page 1 --- # Page 2 ` const { html } = marpit.render(markdown, { htmlAsArray: true }) /* [ '

Page 1

', '

Page 2

' ] */ ``` ---------------------------------------- TITLE: Marpit Constructor API Reference DESCRIPTION: Details on the Marpit constructor for setting default heading divider levels. SOURCE: https://github.com/marp-team/marpit/blob/main/docs/directives.md#_snippet_7 LANGUAGE: APIDOC CODE: ``` Marpit: __constructor__(options?: MarpitOptions) options: Configuration options for Marpit. headingDivider?: number The default level of heading divider. If set to 0, then no heading divider will be inserted. Example: `new Marpit({ headingDivider: 3 })` ``` ---------------------------------------- TITLE: HTML Rendering of Header/Footer DESCRIPTION: Shows the resulting HTML structure when `header` and `footer` directives are used. SOURCE: https://github.com/marp-team/marpit/blob/main/docs/directives.md#_snippet_12 LANGUAGE: HTML CODE: ```

Header content

Page 1

Header content

Page 2

``` ---------------------------------------- TITLE: Import Marpit Classes (Named Export) DESCRIPTION: Shows how to import Marpit classes using named exports. This approach is recommended when using TypeScript or when specific Marpit components are needed. SOURCE: https://github.com/marp-team/marpit/blob/main/api.md#_snippet_1 LANGUAGE: javascript CODE: ``` import { Element, Marpit, Theme, ThemeSet } from '@marp-team/marpit' ``` ---------------------------------------- TITLE: Global Directives: Style Tweak DESCRIPTION: Illustrates using the `style` global directive to inject custom CSS for tweaking the theme. This is an alternative to using ` # Red text --- # Blue text (only in the current slide page) --- # Red text ``` ---------------------------------------- TITLE: Setting Classic 4:3 Slide Size DESCRIPTION: Provides CSS to configure Marpit slides to a classic 4:3 aspect ratio by setting the `width` and `height` properties. These values must be static lengths in absolute units. SOURCE: https://github.com/marp-team/marpit/blob/main/docs/theme-css.md#_snippet_4 LANGUAGE: css CODE: ``` /* Change to the classic 4:3 slide */ section { width: 960px; height: 720px; } ``` ---------------------------------------- TITLE: HTML with Polyfill for WebKit SVG Rendering DESCRIPTION: Includes the necessary HTML structure for inline SVG slides along with a script tag to load a polyfill. This polyfill addresses known rendering issues with HTML elements inside SVG foreignObjects in WebKit-based browsers. SOURCE: https://github.com/marp-team/marpit/blob/main/docs/inline-svg.md#_snippet_3 LANGUAGE: html CODE: ``` ``` ---------------------------------------- TITLE: Spot Directives (Single Page) DESCRIPTION: Details how to apply a directive exclusively to the current slide by prefixing the directive name with an underscore (_). This prevents the setting from affecting subsequent pages. SOURCE: https://github.com/marp-team/marpit/blob/main/docs/directives.md#_snippet_3 LANGUAGE: Markdown CODE: ``` Add underscore prefix `_` to the name of local directives. --- The second page would not apply setting of directives. ``` ---------------------------------------- TITLE: Multiple backgrounds (vertical) - Marpit Markdown DESCRIPTION: Shows how to arrange multiple background images vertically on a slide using the `vertical` keyword. This changes the stacking direction from the default horizontal. SOURCE: https://github.com/marp-team/marpit/blob/main/docs/image-syntax.md#_snippet_5 LANGUAGE: markdown CODE: ``` ![bg vertical](https://fakeimg.pl/800x600/0288d1/fff/?text=A) ![bg](https://fakeimg.pl/800x600/02669d/fff/?text=B) ![bg](https://fakeimg.pl/800x600/67b8e3/fff/?text=C) ``` ---------------------------------------- TITLE: Marpit Theme Metadata DESCRIPTION: Illustrates the mandatory metadata declaration for Marpit themes. The `@theme` directive must be included as a CSS comment to identify the theme name. SOURCE: https://github.com/marp-team/marpit/blob/main/docs/theme-css.md#_snippet_3 LANGUAGE: css CODE: ``` /* @theme name */ ``` ---------------------------------------- TITLE: Marpit Fragmented List HTML Rendering DESCRIPTION: Illustrates the HTML structure generated by Marpit for fragmented lists, including the `data-marpit-fragment` and `data-marpit-fragments` attributes. SOURCE: https://github.com/marp-team/marpit/blob/main/docs/fragmented-list.md#_snippet_2 LANGUAGE: html CODE: ```

Bullet list

One
Two
Three

Fragmented list

One
Two
Three

``` ---------------------------------------- TITLE: Header and Footer Styling DESCRIPTION: Demonstrates how to position header and footer elements on Marpit slides using CSS absolute positioning. This allows for custom placement in the margins of the slide. SOURCE: https://github.com/marp-team/marpit/blob/main/docs/theme-css.md#_snippet_7 LANGUAGE: css CODE: ``` section { padding: 50px; } header, footer { position: absolute; left: 50px; right: 50px; height: 20px; } header { top: 30px; } footer { bottom: 30px; } ``` ---------------------------------------- TITLE: Customizing Pagination Content DESCRIPTION: Shows how to customize the content of the pagination indicator using CSS `content` property and `attr()` function. It includes the current page number (`data-marpit-pagination`) and total page number (`data-marpit-pagination-total`). SOURCE: https://github.com/marp-team/marpit/blob/main/docs/theme-css.md#_snippet_6 LANGUAGE: css CODE: ``` /* Add "Page" prefix and total page number */ section::after { content: 'Page ' attr(data-marpit-pagination) ' / ' attr(data-marpit-pagination-total); } ``` ---------------------------------------- TITLE: HTML Comment Directives DESCRIPTION: Specifies how to use HTML comments to define global Marpit directives. Directives within HTML comments are parsed but not included in the Marpit render output's comments. SOURCE: https://github.com/marp-team/marpit/blob/main/docs/directives.md#_snippet_0 LANGUAGE: Markdown CODE: ``` ``` ---------------------------------------- TITLE: Global Directives: Heading Divider DESCRIPTION: Explains the `headingDivider` global directive, which automatically divides slides at specified heading levels. It accepts a number (level >= value) or an array of levels. SOURCE: https://github.com/marp-team/marpit/blob/main/docs/directives.md#_snippet_6 LANGUAGE: Markdown CODE: ``` # 1st page The content of 1st page ## 2nd page ### The content of 2nd page Hello, world! --- # 3rd page 😃 ``` ---------------------------------------- TITLE: Marpit Slide Structure DESCRIPTION: Demonstrates how to structure Marpit slides using Markdown. Slides are separated by horizontal rulers (`---`). An empty line before the ruler might be required by CommonMark specifications. Alternative rulers like `___`, `***`, or `- - -` can also be used. SOURCE: https://github.com/marp-team/marpit/blob/main/docs/markdown.md#_snippet_0 LANGUAGE: markdown CODE: ``` # Slide 1 foo --- # Slide 2 bar ``` ---------------------------------------- TITLE: CSS `::backdrop` Selector for Marpit SVG Backgrounds DESCRIPTION: Illustrates how the `::backdrop` CSS pseudo-element is redirected to the SVG container when inline SVG mode is enabled. This allows styling the background of the SVG container, effectively controlling the slide's letterbox or pillarbox appearance. SOURCE: https://github.com/marp-team/marpit/blob/main/docs/inline-svg.md#_snippet_4 LANGUAGE: css CODE: ``` ::backdrop { background-color: #448; } ``` ---------------------------------------- TITLE: Disable Backdrop Selector DESCRIPTION: Disables the `::backdrop` selector redirection to prevent conflicts with application styles. This is achieved by setting the `backdropSelector` option to `false` within the `inlineSVG` configuration. SOURCE: https://github.com/marp-team/marpit/blob/main/docs/inline-svg.md#_snippet_6 LANGUAGE: javascript CODE: ``` const marpit = new Marpit({ inlineSVG: { backdropSelector: false }, }) ```