essaye de créer un modèle, fais joujou avec ... et tu vas vite te rendre compte des limites ;)
bon, je me suis permis de ré-utiliser
Root1.1, je ne peux ou ne sais pas créer un modèle.
j'ai donc utilisé la balise <code> (je considère la sémantique comme primordiale, notamment pour les mal ou non-voyants utilisant des lecteurs d'écran.
j'ai viré les
''', interprétés dans le code comme
<b> (pas beau, contraire à la séparation contenu/présentation)
code initial:
Code : Tout sélectionner
<blockquote style="background-color:#f9f9f9;background-repeat:no-repeat;border:1px solid #ddd;border-left: 20px solid #ddd;border-radius:7px;clear:none;margin:2em;margin-left:auto;margin-right:auto;min-height:20px;padding:3px 3px;text-align:justify;vertical-align:middle;width:99% !important;">
'''<span style="background-color:#ddd;color:#000;left:4px;position:absolute">#</span> <span style="background-color:#eee;color:#000;margin-left:-3px;padding:14px 3px;">:{{{Dir}}}#</span>''' {{{Text}}}
</blockquote>
code pour test:
Code : Tout sélectionner
<code class="root" style="position: relative; display: block; margin: auto; min-height: 20px; border: 1px solid #ddd; border-left: 20px; padding: 10px 5px 10px 9em; border-radius: 5px; background-color: #f9f9f9; color: #000; font-weight: bold;>
<span style="position: absolute; top: 0px; left: 0px; background-color: #ddd; padding: 10px 5px;">#</span><span style="position: absolute; top: 0px; left: 1em; background-color: #eee; padding: 10px 5px;">:{{{Dir}}} # </span> {{{Text}}}
</code>
j'ai épuré, c'est une base minimale pour voir si ça correspond à ton attente.
(je mets le code ici, ne sachant pas si mes tests seront conservés)
au lieu de faire du style inline, qui n'est pas beau/léger/maintenable/conforme CSP, n'est-il pas envisageable de maintenir une CSS custom avec des class réutilisables, par exemple
code.root avec pour les variantes
code.root span:nth-child(1){} code.root span:nth-child(2){}... ?
