英语 | русский
@ diplodoc/ 彩色扩展
内嵌颜色插件 迪普洛多克语Name 财务报告和审定财务报表 缩放. 招标人 {colorName}(text) 作为样式的跨度(例如语义或自定义颜色).
安装
npm install @diplodoc/color-extension
同伴依赖 : markdown-it ^13.0.0 (英语).
快开始
const MarkdownIt = require('markdown-it');
const colorPlugin = require('@diplodoc/color-extension');
const md = new MarkdownIt().use(colorPlugin);
md.renderInline('{green}(hello)');
// => '<span class="yfm-colorify yfm-colorify--green">hello</span>'
在无害环境管理方面:
import MarkdownIt from 'markdown-it';
import colorPlugin from '@diplodoc/color-extension';
const md = new MarkdownIt().use(colorPlugin);
md.renderInline('{primary}(sample)');
语法
- 模式 :
{colorName}(content) - 颜色名称 : 任何有效的 CSS 颜色( 例如) .
red, (中文(简体) ),#f00, (中文(简体) ),rgb(255,0,0))或语义上的名称,如primary, (中文(简体) ),green。 。 。 . - 嵌入颜色 :
{green}(some {blue}(nested) text)。 。 。 .
实例:
| 投入 | 输出( 默认) |
|---|---|
{green}(hello) | <span class="yfm-colorify yfm-colorify--green">hello</span> |
{red}(alert) | <span class="yfm-colorify yfm-colorify--red">alert</span> |
{green}(a {blue}(b) a) | 绿色间距包括"a","蓝色间距""b","绿色间距""a" |
API 密码
使用带有可选设置的插件 :
const md = new MarkdownIt().use(colorPlugin, {
defaultClassName: 'yfm-colorify', // base class; modifier is `${defaultClassName}--${colorName}`
inline: false, // if true, add inline style="color: ${colorName};"
escape: false, // if true, allow \ to escape parentheses inside content
});
选项
| 选项 | 默认 | 说明 |
|---|---|---|
defaultClassName | 'yfm-colorify' | 基础 CSS 类; 修改器 --${colorName} 将添加. |
inline | false | 何时 true,添加 style="color: ${colorName};" 至相间. |
escape | false | 何时 true,反斜拉出括号内 (content) 如此字义 ( 财务报告和审定财务报表 ) 可以使用. |
示例:自定义类和内含样式
const md = new MarkdownIt().use(colorPlugin, {
defaultClassName: 'my-color',
inline: true,
});
md.renderInline('{red}(sample)');
// => '<span class="my-color my-color--red" style="color: red;">sample</span>'
示例: 逃逸括号
与 escape: true, (中文(简体) ), \( 财务报告和审定财务报表 \) 内容内部以文字形式显示 ( 财务报告和审定财务报表 )数字 :
const md = new MarkdownIt().use(colorPlugin, {escape: true});
md.renderInline('{green}(some(2,3))'); // => green span with "some(2,3)"
md.renderInline('{green}(some\\(2,3\\))'); // => green span with "some(2,3)"
发展
- 构建 :
npm run build - 测试 :
npm test(视频),npm run test:watch, (中文(简体) ),npm run test:coverage - 林特:
npm run lint, (中文(简体) ),npm run lint:fix - 类型检查 :
npm run typecheck