Warning: This page is translated by MACHINE, which may lead to POOR QUALITY or INCORRECT INFORMATION, please read with CAUTION!
Features:
- to
Markdownbased on the display of multiple panes within a single page, each usingMarkdownsyntax. - Reserved
Markdownthe function. - You can define the position of each pane
Use Scenario:
- Planned version
- Paste a note for an article
- More......
Install with npm
- Partial installation
npm i markpane- Global Installation
npm i -g markpaneusing cdn
<head>
<script src="https://cdn.jsdelivr.net/npm/markpane/dist/markpane.umd.min.js"></script>
</head>If you use a global installation (
npm i -g markpane), you can use it directlymarkpanecommand
$ npx markpane parse _test/test.mdp
<div style="position:relative;overflow:scroll;width:100%;height:100%;">
<div>
<h1>test</h1>
</div>
<div>
</div>
</div>
$ npx markpane parseJson _test/test.mdp
{
"panes": [
{
"x": null,
"y": null,
"width": null,
"height": null,
"zIndex": null,
"id": null,
"class": [],
"markdown": "# test",
"html": "<h1>test</h1>\n"
},
{
"x": null,
"y": null,
"width": null,
"height": null,
"zIndex": null,
"id": null,
"class": [],
"markdown": "",
"html": ""
}
]
}<body>
<div id="container"></div>
<script src="https://cdn.jsdelivr.net/npm/markpane/dist/markpane.umd.min.js"></script>
<script>
document.getElementById('container').innerHTML = markpane.parse('---\n# test\n---');
</script>
</body><body>
<div id="container"></div>
<script>
import markpane from "https://cdn.jsdelivr.net/npm/markpane@latest/dist/markpane.esm.min.js";
document.getElementById('container').innerHTML = markpane.parse('---\n# test\n---');
</script>
</body>import markpane from "markpane";
document.getElementById('container').innerHTML = markpane.parse('---\n# test\n---');with Markdown syntax Consistent
New syntax:
---<x> <y> <width> <height> <zIndex> <id> <class>
# Markdown Pane
---All parameters are optional
x: The distance of the panel from the lefty: The distance of the panel from the topwidth: Panel widthheight: Panel heightzIndex: Panel stacking orderid: id of the panel containerclassthe class of the panel container