Posso definir um nome de classe no parágrafo usando o Markdown?


139

Posso definir um nome de classe no parágrafo usando o Markdown? Se sim, como?


54
Não conheço uma maneira mais precisa de perguntar "Posso definir um nome de classe no parágrafo usando o Markdown?" Você esqueceu de ler o título?
21919 Ryan Florence

[Tendencioso] Se você é um usuário de Nó, consulte Rho . Embora não seja 100% compatível com o Markdown, você ainda pode achar muito atraente, pois possui o recurso necessário em seu núcleo.
encarnada

Respostas:


76

Dupe: Como defino um atributo de classe HTML no Markdown?


Nativamente? Não mas...

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>

Solução possível: (Não testado e destinado a <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>

2
(Testado com o analisador MaRuKu), você pode usar apenas "{.class-name}" no início de uma linha de texto para efetuar a tag P. A parte da identificação é ignorada no entanto.
21713 David Hutchison

75

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.


31
O problema com essa abordagem é que o texto interno não é mais uma remarcação.
3141515

@akauppi Sim; isso pode ser contornado com o uso de uma tag span, no entanto.
Seraphendipity

13

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>

jsfiddle

Nota: Esteja ciente do aspecto de segurança ao permitir atributos em sua redução!

Disclaimer, eu sou o autor de markdown-it-attrs.


Markdown que balança !!
06519 Ole

8

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.


7

Se o seu sabor de remarcação for kramdown, você poderá definir a classe css assim:

{:.nameofclass}
paragraph is here

Então, no seu arquivo css, você define o css assim:

.nameofclass{
   color: #000;
  }


3

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.


Nota: Certifique-se de usar marcadores de código; a maior parte deste post foi oculta, pois foi interpretada como tags HTML.
Lawrence Dol

Obrigado - o DIV hack é a única resposta aqui que parece funcionar com pegdown / cegdown. (Pegdown também é extensível com plugins, então eu poderia fazer isso a longo prazo)
Korny

2

Na redução fina, use o seguinte:

markdown:
  {:.cool-heading}
  #Some Title

Traduz para:

<h1 class="cool-heading">Some Title</h1>

1

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.


0

Se você só precisa de um seletor para fins de Javascript (como eu fiz), convém usar um hrefatributo em vez de um classou id:

Apenas faça o seguinte:

<a href="#foo">Link</a>

O Markdown não ignorará ou removerá o hrefatributo, 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 ...

Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.