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}
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