¿Puedo definir un nombre de clase en el párrafo usando Markdown?

Question

¿Puedo definir un nombre de clase en el párrafo usando Markdown? Si es así, ¿cómo?

Answer 1

Dupe: ¿Cómo se configura una clase de HTML atributo en Markdown?

---

nativa? No. Pero ...

No, la sintaxis de Markdown no puede. Puede establecer valores de ID con Markdown extra a través de.

Puede uso regular HTML si se quiere, y añadir el atributo markdown="1" continuar reducción del precio de conversión dentro del elemento HTML. Esto requiere Markdown extra sin embargo.

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

Posible solución: (No probado y destinados a <blockquote>)

He encontrado la siguiente línea:

Función

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

HTML cruda realidad es perfectamente válido en rebaja. Por ejemplo:

Normal *markdown* paragraph.

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

Sólo asegúrese de que el HTML no está dentro de un bloque de código.

Answer 3

Markdown debe tienen esta capacidad, pero no es así. En su lugar, le pegan con superseries de rebajas específicos de idioma:

PHP: Markdown extra
Ruby: Kramdown , Maruku

Pero si tiene que cumplir con la sintaxis de Markdown verdad, que está pegado con la inserción de HTML puro, que es menos ideal.

Answer 4

Si el entorno es JavaScript, utilice rebaja- que junto con el plugin rebajas-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);

Salida

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

jsFiddle

Nota: Tenga en cuenta el aspecto de la seguridad al permitir atributos en su rebaja

Aviso Legal, yo soy el autor de rebajas-it-attrs.

Answer 5

Aquí está un ejemplo de trabajo para el siguiente kramdown @ respuesta de Yarin.

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

Referencia: https://kramdown.gettalong.org/syntax.html# inline-atributo-listas

Answer 6

Si se kramdown el sabor de rebaja, entonces se puede establecer la clase css de esta manera:

{:.nameofclass}
paragraph is here

A continuación, en la que Css archivo, se establece el css de esta manera:

.nameofclass{
   color: #000;
  }

Answer 7

Como se mencionó anteriormente rebaja en sí te deja colgado en esto. Sin embargo, dependiendo de la aplicación hay algunas soluciones:

Al menos una versión de MD considera <div> a ser una etiqueta de nivel de bloque, pero <DIV> es sólo texto. Todos broswers sin embargo son sensibles a mayúsculas. Esto le permite mantener la simplicidad de la sintaxis MD, a costa de la adición de etiquetas div de contenedor.

Así que la siguiente es una solución:

<DIV class=foo>

  Paragraphs here inherit class foo from above.

</div>

La desventaja de esto es que el código de salida tiene etiquetas <p> envolver los <tag markdown="1"> líneas (dos de ellos, el primero porque no es y el segundo porque no coincide. No hay ningún navegador se queja sobre el que yo he encontrado, pero el código no se validará. MD tiende a poner en las etiquetas de repuesto <=> de todos modos.

Varias versiones de markdown aplicar la Convención <=> en cuyo caso MD hará el procesamiento normal dentro de la etiqueta. El ejemplo anterior se convierte en:

<div markdown="1" class=foo>

  Paragraphs here inherit class foo from above.

</div>

La versión actual de Fletcher MultiMarkdown permite atributos para seguir el enlace si el uso de enlaces de referencia.

Answer 8

En rebaja delgada esto:

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

Se traduce a:

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

Answer 9

Si sólo necesita un selector para los propósitos de Javascript (como yo), es posible que quieran utilizar un atributo href en lugar de un class o id:

Sólo hacer esto:

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

Markdown no ignorará o eliminar el atributo <=> como lo hace con las clases y las identificaciones.

Así que en su Javascript o jQuery luego se puede hacer:

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

    ... do your thing ...

    event.preventDefault();
});

Al menos esto funciona en mi versión de Markdown ...