Posso definir um nome de classe no parágrafo usando o Markdown? Se sim, como?
Posso definir um nome de classe no parágrafo usando o Markdown? Se sim, como?
Respostas:
Dupe: Como defino um atributo de classe HTML no Markdown?
Não, a sintaxe do Markdown não pode. Você pode definir valores de ID com o Markdown Extra até.
Você pode usar HTML comum, se quiser, e adicionar o atributo markdown="1"
para continuar a conversão de markdown no elemento HTML. Isso requer o Markdown Extra .
<p class='specialParagraph' markdown='1'>
**Another paragraph** which allows *Markdown* within it.
</p>
<blockquote>
)Encontrei o seguinte online:
Função
function _DoBlockQuotes_callback($matches) {
...cut...
//add id and class details...
$id = $class = '';
if(preg_match_all('/\{(?:([#.][-_:a-zA-Z0-9 ]+)+)\}/',$bq,$matches)) {
foreach ($matches[1] as $match) {
if($match[0]=='#') $type = 'id';
else $type = 'class';
${$type} = ' '.$type.'="'.trim($match,'.# ').'"';
}
foreach ($matches[0] as $match) {
$bq = str_replace($match,'',$bq);
}
}
return _HashBlock(
"<blockquote{$id}{$class}>\n$bq\n</blockquote>"
) . "\n\n";
}
Markdown
>{.className}{#id}This is the blockquote
Resultado
<blockquote id="id" class="className">
<p>This is the blockquote</p>
</blockquote>
HTML bruto é realmente perfeitamente válido na remarcação. Por exemplo:
Normal *markdown* paragraph.
<p class="myclass">This paragraph has a class "myclass"</p>
Apenas verifique se o HTML não está dentro de um bloco de código.
Se seu ambiente for JavaScript, use markdown-it junto com o plug - in markdown-it-attrs :
const md = require('markdown-it')();
const attrs = require('markdown-it-attrs');
md.use(attrs);
const src = 'paragraph {.className #id and=attributes}';
// render
let res = md.render(src);
console.log(res);
Resultado
<p class="className" id="id" and="attributes">paragraph</p>
Nota: Esteja ciente do aspecto de segurança ao permitir atributos em sua redução!
Disclaimer, eu sou o autor de markdown-it-attrs.
O Markdown deve ter esse recurso, mas não. Em vez disso, você está preso aos superconjuntos Markdown específicos do idioma:
PHP: Markdown Extra
Ruby: Kramdown , Maruku
Mas se você precisa respeitar a verdadeira sintaxe do Markdown, está preso à inserção de HTML bruto, o que é menos ideal.
Aqui está um exemplo de trabalho para o kramdown, seguindo a resposta do @ Yarin.
A simple paragraph with a class attribute.
{:.yourClass}
Referência: https://kramdown.gettalong.org/syntax.html#inline-attribute-lists
Python
Markdown
analisador interno .
Como mencionado acima, a própria remarcação deixa você pendurado nisso. No entanto, dependendo da implementação, existem algumas soluções alternativas:
Pelo menos uma versão do MD considera <div>
uma tag de nível de bloco, mas <DIV>
é apenas texto. Todos os irmãos, no entanto, não diferenciam maiúsculas de minúsculas. Isso permite manter a simplicidade da sintaxe do MD, ao custo de adicionar tags de contêineres div.
Portanto, o seguinte é uma solução alternativa:
<DIV class=foo>
Paragraphs here inherit class foo from above.
</div>
A desvantagem disso é que o código de saída possui <p>
tags que envolvem as <div>
linhas (as duas, a primeira porque não é e a segunda porque não corresponde. Nenhum navegador se preocupa com isso que eu encontrei, mas o código ganhou ' O MD tende a colocar <p>
tags sobressalentes de qualquer maneira.
Várias versões do markdown implementam a convenção; <tag markdown="1">
nesse caso, o MD fará o processamento normal dentro da tag. O exemplo acima se torna:
<div markdown="1" class=foo>
Paragraphs here inherit class foo from above.
</div>
A versão atual do MultiMarkdown do Fletcher permite que os atributos sigam o link se estiverem usando links referenciados.
Na redução fina, use o seguinte:
markdown:
{:.cool-heading}
#Some Title
Traduz para:
<h1 class="cool-heading">Some Title</h1>
Também deve ser mencionado que as <span>
tags permitem dentro deles - itens em nível de bloco negam o MD nativamente dentro deles, a menos que você os configure para não fazê-lo, mas os estilos em linha permitem o MD nativamente dentro deles. Como tal, costumo fazer algo parecido com ...
This is a superfluous paragraph thing.
<span class="class-red">And thus I delve into my topic, Lorem ipsum lollipop bubblegum.</span>
And thus with that I conclude.
Não tenho 100% de certeza se isso é universal, mas parece ser o caso em todos os editores de MD que usei.
Se você só precisa de um seletor para fins de Javascript (como eu fiz), convém usar um href
atributo em vez de um class
ou id
:
Apenas faça o seguinte:
<a href="#foo">Link</a>
O Markdown não ignorará ou removerá o href
atributo, como ocorre com as classes e os IDs.
Portanto, em seu Javascript ou jQuery, você pode:
$('a[href$="foo"]').click(function(event) {
... do your thing ...
event.preventDefault();
});
Pelo menos isso funciona na minha versão do Markdown ...