2.0.1 • Published 6 months ago

markdown-it-colorful v2.0.1

Weekly downloads
-
License
MIT
Repository
github
Last release
6 months ago

markdown-it-colorful

English

markdown-it 的插件,用来给行内文字设置背景色、前景色,比如荧光笔效果等,实现行内文字彩色高亮美化。

Live Demo

Usage

format changed since v2.0.0

::colorful_green_white text::

使用umd直接引入

pE9wqAK.png

全局变量名为markdownitcolorful

<!doctype html>
<html>
<head>
  <meta charset="utf-8"/>
  <title>MarkdownItColorful in the browser</title>
</head>
<body>
  <div id="content"></div>
  <script src="https://cdn.jsdelivr.net/npm/markdown-it/dist/markdown-it.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/markdown-it-colorful/dist/markdown-it-colorful.min.js"></script>
  <script>
    window.addEventListener('load', function() {
      // markdown-it 变量名为 markdownit
      var md = markdownit()
      // md.use(markdownitcolorful, { bgColor: 'green', color: 'white'})
      md.use(markdownitcolorful)

      var mdContent = `
# ::colorful_red_white markdown::::colorful_green_white -it-::::colorful_blue_white colorful::
## ::colorful__gray In The Browser::
### ::colorful__#1E90FF 行内::::colorful_#F08080 文字::::colorful_#ADFF2F_#001a1a *彩色*::::colorful_#87CEFA_#FF8C00 **高亮**::::colorful_green_white 美化::
      `.trim();

      document.getElementById('content').innerHTML = md.render(mdContent)
    })
  </script>
</body>
</html>

安装 NPM 包使用

npm i markdown-it-colorful
# or
pnpm i markdown-it-colorful
import MarkdownIt from 'markdown-it'
import colorful from 'markdown-it-colorful'

const md = MarkdownIt();

md.use(colorful, {
  color: '#f1f1f1',
  bgColor: 'green'
})
// or
md.use(colorful)

这里配置默认颜色值可以为格式任意,包括#00000066 #f1f1f1 green var(--theme-color)等。

markdown文本内容中:

::colorful_aliceblue_#ddd 行内文字颜色美化::

使用格式::colorful_背景色_前景色 任意文字内容::_背景色_前景色都可以不传使用默认值(md.use时传入的options)。

这里支持的颜色值格式包括:

  • 十六进制颜色值(3位或6位),如#fff#ffffff#000#000000
  • 十六进制颜色值包含透明度的(8位),如#ffffff1a#0000001a
  • 颜色名称,如redgreenblue

API

options 配置项

options对象为可选参数,可配置默认颜色,省去每次使用时传入

属性类型必须默认值说明
colorStringnonull前景色
bgColorStringnonull背景色
skipWhenNoStyleBooleannofalse没有配置颜色值时仍渲染出 span 元素(class="colorful"),否则跳过本插件的渲染
  • 当使用::colorful_bgColor_color ::传入值时,优先使用传入的颜色;
  • 当使用::colorful ::未传入值时,使用options配置的默认颜色;

渲染为span标签:

<span class="colorful" style="background-color:green;color:white;">文字</span>
  • 当既没有配置默认颜色值,也没有在使用中传入,skipWhenNoStyle设为false时,仍会渲染出span元素
  • 当既没有配置默认颜色值,也没有在使用中传入,skipWhenNoStyle设为true时,不做特别渲染处理,继续处理内部文字

方法

set

set方法用来更新设置的默认颜色值等单个或多个属性值

md.use(colorful, {
  color: '#f1f1f1',
  bgColor: 'green'
})

colorful.set({ color: 'white'})

// `colorful.set` 更新属性值之后,需要 `md.render` 再次渲染你的内容
2.0.1

6 months ago

2.0.0

6 months ago

1.0.0

6 months ago