@kazumatu981/markdown-it-nested-container

markdown-it-nested-container

This package is designed for Marp.

Use markdown-it-nested-container as markdown-it's plugin, You can write nested div container.

Samples

Two up slide

Grid contents (Metro like ?)

How to install

You can install by npm install command like bellow.

npm install -D @kazumatu981/markdown-it-nested-container

How to use

Here is the how to use markdow-it-nested container. This section introduce how to create Marp slides-deck project, and introduce how to create Marp slides-deck server.

You can find deltail info in here, and you can learn about marp plugin eco-system, here.

[1st step] Create Slides-deck project

First, for create slides-deck, you have to prepair to Marp Project directory. So First, Create slides-deck project, and init npm package.

mkdir myslides
cd myslides

npm init -y

Secondary, Build Marp Environment. Install @marp-team/marp-cli.

npm install -D @marp-team/marp-cli

Off-course you can install as global package (like npm install -g @marp-team/marp-cli), or run at-once (like npx).

[2nd step] Download this project and install

cd myslides
npm install -D @kazumatu981/markdown-it-nested-container

[3rd step] Create marp.config.js.

Here is the configuration file for Marp.

module.exports = {
    inputDir: './slides',
    engine: ({ marp }) => marp.use(require('@kazumatu981/markdown-it-nested-container'))
}

[4th step] Create your slides

On slies directory. you create slides-deck. like this.

---
marp: true
---

<style scoped>
div.grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
}
div.grid-item {
  margin: 3px;
}
</style>

:::grid

+++grid-item
this is **left** content !!
* you can write as Markdown
* triple-marker is mark of container
+++

+++grid-item
this is **right** content !!
1. you can two up slide.
2. using scoped style
3. off course you can use style on custom theme.

> Plese enjoy !

+++

:::

[5th step] run server

Run marp server.

marp -s -c marp.config.js

Detail

Syntax of Markdown

Markdown means container starts with start of container syntax, and ends with end of conatiner syntax.

start of container syntax

<markers><container-name>[<extend-class-name>][<extend-attribute>]

name	meaning	syntax	Optional
markers	start of container	triple-charactors	No
container-name	the first class name of container-DIV	string	No
extend-class-name	additional class name of container-DIV	comma or white-space seperated string	No
extend-attribute	attribute of container-DIV	json	No

end of conatiner syntax

<markers>

The markers are equals to start of container's markers.

sample

+++grid-item[metro green]{"style": "color: ivory;"}
here is a contents.
+++

Option of constructor

The option is Array of container defined json, defined by bellow.

container defined json

property name	type	mean
conatainerName	string	the container name.
marker	string	character to use in start/end marker.
validate	function	the function validate container start. see markdown-it-container
render	function	the function convert token to HTML. see markdown-it-container

default value

[
    {
        containerName: 'grid',
        marker: ':'
    },
    {
        containerName: 'grid-item',
        marker: '+'
    }
]

Example of marp.config.js

const MarkdownItNestedContainer = require('@kazumatu981/markdown-it-nested-container');

module.exports = {
    inputDir: './slides',
    engine: ({ marp }) => marp.use(MarkdownItNestedContainer,[
        {
            containerName: 'grid',
            marker: ':'
        },
        {
            containerName: 'grid-item',
            marker: '+'
        },
        {
            containerName: 'flex',
            marker: '@'
        },
        {
            containerName: 'flex-item',
            marker: '%'
        }
    ])
}

Remark

This project depends on markdown-it-container