Ajouter ID ou Class à Markdown-element
est-il possible d'ajouter un id ou une classe à un élément markdown (multi)?
par exemple une table, un paragraphe ou un bloc de code?
je voudrais style d'une table avec le css mais non de travail suivant:
[captionid][This is the caption, not the table id]
| First Header | Second Header |
| ------------- | ------------- |
| Content Cell | Content Cell |
| Content Cell | Content Cell |
| First Header | Second Header |
| ------------- | ------------- |
| Content Cell | Content Cell |
| Content Cell | Content Cell |
[captionid][This is the caption, not the table id]
| First Header | Second Header |
| ------------- | ------------- |
| Content Cell | Content Cell |
| Content Cell | Content Cell |
[tablecaption](#tableid)
<div class="special_table">
| First Header | Second Header |
| ------------- | ------------- |
| Content Cell | Content Cell |
| Content Cell | Content Cell |
</div>
Je ne trouve rien d'autre en ligne..
Je ne veux pas dire GitHub ou stackoverflow flow flavored markdown btw.
4 réponses
je peux confirmer que cela fonctionne avec kramdown. Heureux de chasse.
markdown
{:.foo}
| First Header | Second Header |
| ------------- | ------------- |
| Content Cell | Content Cell |
| Content Cell | Content Cell |
css
.foo {
background: blue;
}
après quelques recherches, je trouve une solution simple et directe:)
j'ai placé des tables entre deux espaces HTML et j'ai utilisé jQuery pour affiner ceux-ci et seulement ceux qui sont nécessaires:
début du tableau
<div class="tables-start"></div>
Table
id | name
---|---
1 | London
2 | Paris
3 | Berlin
fin du tableau
<div class="tables-end"></div>
jQuery: affinez les tables en ajoutant les classes
<script type="text/javascript">
(function() {
$('div.tables-begin').nextUntil('div.tables-end', 'table').addClass('table table-bordered');
})();
</script>
Vous pouvez ajouter une classe personnalisée ou de l'id d'un élément par mettre la classe ou l'id à l'intérieur d'une accolade après l'élément comme ceci: {#id .class}
Par exemple:
[Read more](http://www.stackoverflow.com "read more"){#link-sf .btn-read-more} va rendre comme:
<a href="http://www.stackoverflow.com" title="read more" id="link-sf" class="btn-read-more">Read more</a>
vous pouvez faire référence à https://michelf.ca/projects/php-markdown/extra/#spe-attr
Pour le CSS, vous pourriez ajouter un id à l'élément précédent, et ensuite utiliser un sélecteur de modifier l'élément suivant.
Markdown comme ceci:
<div class="special_table"></div>
| First Header | Second Header |
| ------------- | ------------- |
| Content Cell | Content Cell |
| Content Cell | Content Cell |
CSS comme ceci:
div.special_table + table tr:nth-child(even) {background: #922}