Home / GitHub Page

Plugin request: support add custom css class/attr via markdown-it-attrs

by add markdown-it-attrs support https://www.npmjs.com/package/markdown-it-attrs

user can attach custom style

ex:

header {.style-me}

paragraph {data-toggle=modal}

will be

header

paragraph

That could expand a variety of customization with userStyle.

For example, user can make a Timeline view with markdown table by attach a style tag under the table and add related userStyle css from https://cawal.github.io/markdown/2017/10/13/timeline_in_markdown.html

ex:

Psychohistorians" in Foundation) |
| 12,069 | Hary Seldon dies. |
{ .timeline-md}

See also Feature request: Direct addressing of classes etc. by Markdown.

Yes its the very similar request, we can merge the request.

@memophen could you help check if https://www.npmjs.com/package/markdown-it-attrs does support your requests?

@gasolin,

I would be delighted to see markdown-it-attrs implemented if combined with markdown-it-bracketed-spans. The mark-it implementation has some limitations, but is a considerable leap forward all the same. See my findings below.

Test script

var md = require('markdown-it')()
            .use( require('markdown-it-bracketed-spans') )
            .use( require('markdown-it-attrs') )
            ;

var input  = 'foo [bar *bar*]{#id .class attr=value} baz';
console.log('A)', input);
var output = md.renderInline(input);
console.log('   1 --> ', output);
var output = md.render(input);
console.log('   2 --> ', output);

var input  = '[text]{class="class1 class2"}';
console.log('B)', input);
var output = md.renderInline(input);
console.log('   1 --> ', output);
var output = md.render(input);
console.log('   2 --> ', output);

var input  = '[[text]{.class2}]{.class1}';
console.log('C)', input);
//var output = md.renderInline(input);  // if (tokens[i].type === 'softbreak') {  -->  TypeError: Cannot read property 'type' of undefined
//console.log('   1 --> ', output);
var output = md.render(input);
console.log('   2 --> ', output);

var input  = '[ text\nmore text ]{.myclass}';
console.log('D)', input);
var output = md.renderInline(input);
console.log('   1 --> ', output);
var output = md.render(input);
console.log('   2 --> ', output);

var input  = '[text\n\nmore text]{.myclass}';
console.log('E)', input);
var output = md.renderInline(input);
console.log('   1 --> ', output);
var output = md.render(input);
console.log('   2 --> ', output);

var input  = `[

| A | B |
| - | - |
| 1 | 2 |
]{.myclass}`;
console.log('F)', input);
var output = md.renderInline(input);
console.log('   1 --> ', output);
var output = md.render(input);
console.log('   2 --> ', output);

Results

A) foo [bar *bar*]{#id .class attr=value} baz
   1 -->  foo <span id="id" class="class" attr="value">bar <em>bar</em></span> baz
   2 -->  <p>foo <span id="id" class="class" attr="value">bar <em>bar</em></span> baz</p>

B) [text]{class="class1 class2"}
   1 -->  <span class="class1 class2">text</span>
   2 -->  <p><span class="class1 class2">text</span></p>

C) [[text]{.class2}]{.class1}
   2 -->  <p class="class1"><span>text</span>[<span class="class2">text</span>]</p>

D) [ text
more text ]{.myclass}
   1 -->  <span class="myclass"> text
more text </span>
   2 -->  <p><span class="myclass"> text
more text </span></p>

E) [text

more text]{.myclass}
   1 -->  <span class="myclass">text

more text</span>
   2 -->  <p>[text</p>
<p class="myclass">more text]</p>

F) [

| A | B |
| - | - |
| 1 | 2 |
]{.myclass}
   1 -->  <span class="myclass">

| A | B |
| - | - |
| 1 | 2 |
</span>
   2 -->  <p>[</p>
<table>
<thead>
<tr>
<th>A</th>
<th>B</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>2</td>
</tr>
</tbody>
</table>
<p class="myclass">]</p>

Conclusions

  • Nesting of span/attr pairs is not possible (case C). It will be rarely needed, as style selectors can be combined within one span/attr pair (case A and B).
  • Span/attr pairs may leave the track at multi-paragraph blocks (case E with md.render).
  • Therefore a table cannot be styled by a span/attr pair (case F).
1 Like