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

Question

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

Answer 1

Dupe: Como faço para configurar uma classe HTML atributo no Markdown?

---

nativamente? Não. Mas ...

Não, sintaxe do Markdown não pode. Você pode valores set ID com Markdown através Extra.

Você pode uso regular HTML se você gosta, e adicione o atributo markdown="1" para continuar remarcação conversão dentro do elemento HTML. Isso requer Markdown extra embora.

<p class='specialParagraph' markdown='1'>
**Another paragraph** which allows *Markdown* within it.
</p>

Possível solução: (Não testado e destinados <blockquote>)

Eu encontrei o seguinte linha:

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>

Answer 2

Raw HTML é realmente perfeitamente válida na remarcação. Por exemplo:

Normal *markdown* paragraph.

<p class="myclass">This paragraph has a class "myclass"</p>

Apenas certifique-se o HTML não está dentro de um bloco de código.

Answer 3

Markdown deve tem esta capacidade, mas isso não acontece. Em vez disso, você está preso com supersets Markdown específicos de idioma:

PHP: Markdown extra
Ruby: Kramdown , maruku

Mas se você precisa respeitar verdadeira sintaxe Markdown, você está preso com a inserção de HTML puro, que é menos ideal.

Answer 4

Se o seu ambiente é JavaScript, use remarcação-lo junto com o plugin remarcação-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);

saída

<p class="className" id="id" and="attributes">paragraph</p>

jsFiddle

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

Disclaimer, eu sou o autor de remarcação-it-attrs.

Answer 5

Aqui está um exemplo de trabalho para kramdown seguinte resposta da @ Yarin.

A simple paragraph with a class attribute.
{:.yourClass}

Referência: https://kramdown.gettalong.org/syntax.html# -atributo inline-listas

Answer 6

Se o seu sabor da remarcação é kramdown, então você pode definir classe css como este:

{:.nameofclass}
paragraph is here

Então, em que você arquivo css, você definir o css como este:

.nameofclass{
   color: #000;
  }

Answer 7

Como mencionado acima remarcação si deixa-lo pendurado sobre isso. No entanto, dependendo da implementação, existem algumas soluções alternativas:

Pelo menos uma versão do MD considera <div> ser uma tag de nível de bloco, mas <DIV> é apenas texto. Todos os broswers no entanto são maiúsculas e minúsculas. Isto permite-lhe manter a simplicidade sintaxe de MD, ao custo de adicionar tags de contêiner div.

Assim, o seguinte é um solução alternativa:

<DIV class=foo>

  Paragraphs here inherit class foo from above.

</div>

A desvantagem desta situação é que o código de saída tem marcas <p> envolvendo as linhas <div> (ambos, o primeiro porque não é e o segundo porque não corresponde. Alvoroço navegador Não há sobre isso que eu encontrei, mas o código não irá validar. MD tende a colocar em tags <p> peças de qualquer maneira.

Várias versões de remarcação implementar o <tag markdown="1"> convenção em cujo caso MD fará o processamento normal dentro da tag. O exemplo acima é:

<div markdown="1" class=foo>

  Paragraphs here inherit class foo from above.

</div>

A versão atual do Fletcher MultiMarkdown permite que atributos a seguir o link se estiver usando links mencionados.

Answer 8

Em remarcação magro isto:

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

traduz em:

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

Answer 9

Se você só precisa de um seletor para fins de JavaScript (como eu fiz), você pode apenas querer usar um atributo href em vez de um class ou id:

Apenas faça o seguinte:

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

Markdown não vai ignorar ou remover o atributo href como acontece com as classes e ids.

Assim, no seu Javascript ou jQuery você pode fazer:

$('a[href$="foo"]').click(function(event) {

    ... do your thing ...

    event.preventDefault();
});

Pelo menos isso funciona na minha versão do Markdown ...