0.1.0 • Published 5 years ago

markdown-it-align v0.1.0

Weekly downloads
39
License
MIT
Repository
github
Last release
5 years ago

markdown-it-align

text align plugin for markdown-it markdown parser.

requires markdown-it v5.+

=-- inline words(left) => <p><span class="align-left align">inline words(left)</span></p>

-=- inline words(center) => <p><span class="align-center align">inline words(center)</span></p>

--= inline words(right) => <p><span class="align-right align">inline words(right)</span></p>

Install

node.js, browser:

npm install markdown-it-align --save
bower install markdown-it-align --save

Use

var align = require('markdown-it-align')

var md = require('markdown-it')()
    .use(align);

md.render('=-- inline words(left)') // => '<p><span class="align-left align">inline words(left)</span></p>'
md.render('-=- inline words(center)') // => '<p><span class="align-center align">inline words(center)</span></p>'
md.render('--= inline words(right)') // => '<p><span class="align-right align">inline words(right)</span></p>'

Config

Default align conf:

{
  alignClass: 'align',// css class name
  regexPrefix: '^|\\s+',// prefix regex for matching  align tag
  regexSuffix: '\\s+',// suffix regex for matching  align tag
  // Custom align tag map
  conf: {
    left: '=--',
    center: '-=-',
    right: '--='
  }
}

Example:

  • change css class name
var opt = {alignClass: 'my-class-name'};
  • set other align tag(Only chars not in regex keywords)
var opt = {
  conf: {
    left: '=---',
    center: '-==-',
    right: '--='
  }
}
  • usage
var align = require('markdown-it-align')
var opt = {
  alignClass: 'my-class-name',
  conf: {
    left: '=---',
    center: '-==-',
    right: '--='
  }
};

var md = require('markdown-it')()
            .use(align, opt);

md.render('=--- inline words(left)')
// => '<p><span class="my-class-name-left my-class-name">inline words(left)</span></p>'

md.render('-==- inline words(center)')
// => '<p><span class="my-class-name-center my-class-name">inline words(center)</span></p>'

md.render('--= inline words(right)')
// => '<p><span class="my-class-name-right my-class-name">inline words(right)</span></p>'

md.render('-=- inline words(unmatched now)')
// => '<p>-=- inline words(unmatched now)</p>'

Differences in browser. If you load script directly into the page, without package system, module will add itself globally as window.markdownitAlign.

License

MIT