https://github.com/davidleininger/markdown-it-inilne-wrapper
A MarkdownIt plugin to allow support for adding divs (and eventually other wrappers) inline instead of requiring line breaks.
https://github.com/davidleininger/markdown-it-inilne-wrapper
markdown-it markdown-it-plugin
Last synced: 5 months ago
JSON representation
A MarkdownIt plugin to allow support for adding divs (and eventually other wrappers) inline instead of requiring line breaks.
- Host: GitHub
- URL: https://github.com/davidleininger/markdown-it-inilne-wrapper
- Owner: davidleininger
- License: mit
- Created: 2023-10-08T02:42:35.000Z (about 2 years ago)
- Default Branch: main
- Last Pushed: 2023-10-08T03:32:39.000Z (about 2 years ago)
- Last Synced: 2025-02-18T20:05:05.555Z (10 months ago)
- Topics: markdown-it, markdown-it-plugin
- Language: JavaScript
- Homepage: https://markdown-it-inline-wrapper.netlify.app
- Size: 18.6 KB
- Stars: 0
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
# markdown-it-inline-wrapper
There are already markdown-it plugins for adding `div`s or containers, but those require line breaks and that breaks how lists work in markdown. There isn't a TON of need for this specific plugin, and in most cases I'd recommend using `markdown-it-span`. That said, I needed this plugin to make more lists a little more semantic. I wanted to wrap the contents of a list item to work with a `::before` pseudo-element in a grid layout. A `span` would have worked fine here, but really this should be a block level element and not an inline element.
In the future, I'd like to build this to allow you to pass the element that you'd like to use `div` or `span`.
## Quick Look
`==this is wrapped in a div==` will output `
this is wrapped in a div`
Markup uses the same conditions as CommonMark [emphasis](http://spec.commonmark.org/0.15/#emphasis-and-strong-emphasis). Basically, that means, you can wrap `div`s inside of `div`s, but you can also use `====` to get two `div`s.
## Install
node.js
```bash
npm install markdown-it-inline-wrapper --save
```
## Use
```js
var md = require('markdown-it')()
.use(require('markdown-it-inline-wrapper'));
md.render('==this is wrapped in a div==') // => '
this is wrapped in a div'
```
OR
```js
const markdownIt = require('markdown-it');
const markdownItInlineWrapper = require('markdown-it-inline-wrapper');
var md = markdownIt().use(markdownItInlineDiv);
md.render('==this is wrapped in a div==') // => '
this is wrapped in a div'
```
_Differences in browser._ If you load script directly into the page, without
package system, module will add itself globally as `window.markdownItInlineWrapper`.
## License
[MIT](https://github.com/markdown-it/markdown-it-inline-wrapper/blob/master/LICENSE)