markdown-it-list-marker
v0.0.4
Published
Markdown-it plugin to create list with custom markers
Downloads
9
Maintainers
moudevReadme
markdown-it-list-marker
markdown-it plugin to create lists with custom markers.
How to use it?
const mdMarkerPlugin = require("markdown-it-list-marker")
module.exports = {
...,
extendsMarkdown: (md) => {
md.use(mdMarkerPlugin)
},
};Configure the marker
To add the custom marker the plugin finds a pattern in the text of the markdown item. Each markdown item that matches the text pattern will have a custom marker.
markerSeparator is the plugin option to set. The plugin option can be a string or an array of strings, which means that the plugin can find multiple patterns. The default value of markerSeparator is the string -.
Warning: markdown-it recognize the string ")" to add an ordered element so make sure to use a different pattern.
CSS style
When the list contains one item that matches the pattern a CSS class will be added to the item and the parent of the list. Also will be added a class for the marker and the text of the item.
<ul>->md-it-list-marker__listclass<li>->md-it-list-marker__itemclass<span>marker ->md-it-list-marker__markerclass<span>text ->md-it-list-marker__textclass
You can use the CSS style that you want but there is a proposal of style to simulate the markers of the default <ul> HTML:
li.md-it-list-marker__item {
position: relative;
}
span.md-it-list-marker__marker {
position: absolute;
height: 27.1875px;
width: 8px;
display: flex;
justify-content: flex-end;
white-space: nowrap;
left: -17px;
}
span.md-it-list-marker__text {
text-align: left;
}The style can be added from the index.css and added directly to the style of your project. The second option is to add a <link> tag in the <head> of the index.html and set the src attribute with https://cdn.jsdelivr.net/npm/markdown-it-list-marker/index.css
Example
Config file:
const mdMarkerPlugin = require("markdown-it-list-marker")
module.exports = {
...,
extendsMarkdown: (md) => {
md.use(mdMarkerPlugin)
md.set({ markerSeparator: ["_", "-", "%", "$"] }) // default value "-"
},
};Markdown text:
# demo
- 11_ demo
- 12- demo
- 13% demo
- 14$ demoHTML result:
<h1>demo</h1>
<ul class="md-it-list-marker__list">
<li class="md-it-list-marker__item">
<span class="md-it-list-marker__marker">11_</span>
<span class="md-it-list-marker__text">demo</span>
</li>
<li class="md-it-list-marker__item">
<span class="md-it-list-marker__marker">12-</span>
<span class="md-it-list-marker__text">demo</span>
</li>
<li class="md-it-list-marker__item">
<span class="md-it-list-marker__marker">13%</span>
<span class="md-it-list-marker__text">demo</span>
</li>
<li class="md-it-list-marker__item">
<span class="md-it-list-marker__marker">14$</span>
<span class="md-it-list-marker__text">demo</span>
</li>
</ul>More examples:
You can check test/index.test.js.
Prerequisites for development
Project setup for development
1. Install dependencies
yarn install2. Config Git hooks (required)
yarn prepareDevelopment mode
yalc is used to publish the package locally and be able to test it. The command will do the build process and push the build to the local projects where the package has been added.
yarn dev:yalcTest
yarn test:runBuild mode
yarn build