@mecc/markdown-it-color

Install / 安装

npm i @mecc/markdown-it-color

How to use / 如何使用

var md = require('markdown-it')()
            .use(require('@mecc/markdown-it-color'))

Options / 配置项

你可以在引用项目时添加配置项，以下为全部的默认配置：

var md = require('markdown-it')()
            .use(require('@mecc/markdown-it-color'), {
              classPrefix: 'md-color', // default
              inlineStyle: false, // default
              customColor: {} // default
            })

• 设置classPrefix可以自定义class前缀，可以在项目中自定义样式：

var md = require('markdown-it')()
            .use(require('@mecc/markdown-it-color'), {
              classPrefix: 'hello-world'
            })
md.render('{primary}(sample)')
// => '<span class="hello-world hello-world--primary">sample</span>'

• 设置customColor可以预定义颜色：

var md = require('markdown-it')()
            .use(require('@mecc/markdown-it-color'), {
              customColor: {
                primary: '#409EFF',
                success: '#67C23A',
                warning: '#E6A23C',
                info: '',
                danger: '#F56C6C'
              }
            })

md.render('{primary}(sample)')
// => '<span class="md-color md-color--primary" style="color: #409EFF;">sample</span>'
// 组件读取到customColor配置后，当检测到已知配置项的颜色代码时，会自动添加相应的行内样式

设置inlineStyle为true可以为当前行添加行内样式：

var md = require('markdown-it')()
            .use(require('@mecc/markdown-it-color'), {
              inlineStyle: true,
            })

md.render('{#f80}(sample)')
// => '<span class="md-color" style="color: #f80;">sample</span>'
// 注意：组件已设置为仅检测16进制颜色代码