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

139

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

Ryan Florence
fuente
54
No conozco una forma más precisa de preguntar "¿Puedo definir un nombre de clase en el párrafo usando Markdown?" ¿Olvidaste leer el título?
Ryan Florence
[Sesgado] Si resulta ser un usuario de Node, consulte Rho . Aunque no es 100% compatible con Markdown, aún puede encontrarlo muy atractivo, ya que tiene la característica que necesita en su núcleo.
Encarnado el

Respuestas:

76

Dupe: ¿Cómo configuro un atributo de clase HTML en Markdown?


Nativamente? No pero...

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

Puede usar HTML normal si lo desea, y agregar el atributo markdown="1"para continuar la conversión de rebajas dentro del elemento HTML. Sin embargo, esto requiere Markdown Extra .

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

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

Encontré lo siguiente en 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";
}

Reducción

>{.className}{#id}This is the blockquote

Resultado

<blockquote id="id" class="className">
    <p>This is the blockquote</p>
</blockquote>
Sampson
fuente
2
(Probado con el analizador MaRuKu) puede usar solo "{.class-name}" al comienzo de una línea de texto para efectuar la etiqueta P. Sin embargo, la parte de identificación se ignora.
David Hutchison
75

HTML sin formato es realmente válido en Markdown. Por ejemplo:

Normal *markdown* paragraph.

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

Solo asegúrese de que el HTML no esté dentro de un bloque de código.

Matt Bridges
fuente
31
El problema con este enfoque es que el texto interno ya no es rebajado.
akauppi
@akauppi Sí; Sin embargo, esto se puede solucionar con el uso de una etiqueta span.
Seraphendipity
13

Si su entorno es JavaScript, use markdown-it junto con el complemento 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);

Salida

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

jsfiddle

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

Descargo de responsabilidad, soy el autor de markdown-it-attrs.

arve0
fuente
Markdown It Rocks !!
Ole
8

Markdown debería tener esta capacidad, pero no la tiene. En cambio, estás atrapado con supersets de Markdown específicos del idioma:

PHP: Markdown Extra
Ruby: Kramdown , Maruku

Pero si necesita cumplir con la sintaxis verdadera de Markdown, está atascado con la inserción de HTML sin formato, lo que es menos ideal.

Yarin
fuente
7

Si su sabor de markdown es kramdown, puede configurar la clase css de esta manera:

{:.nameofclass}
paragraph is here

Luego, en su archivo css, configura el css de esta manera:

.nameofclass{
   color: #000;
  }
franco
fuente
3

Como se mencionó anteriormente, el descuento en sí mismo te deja colgado de esto. Sin embargo, dependiendo de la implementación, existen algunas soluciones:

Al menos una versión de MD se considera <div>una etiqueta de nivel de bloque, pero <DIV>es solo texto. Sin embargo, todos los Broswers no distinguen mayúsculas y minúsculas. Esto le permite mantener la simplicidad de sintaxis de MD, a costa de agregar etiquetas de contenedor div.

Entonces, la siguiente es una solución alternativa:

<DIV class=foo>

  Paragraphs here inherit class foo from above.

</div>

La desventaja de esto es que el código de salida tiene <p>etiquetas que envuelven las <div>líneas (ambas, la primera porque no lo es y la segunda porque no coincide. Ningún navegador se preocupa por esto que he encontrado, pero el código ganó ' t validar. MD tiende a poner <p>etiquetas de repuesto de todos modos.

Varias versiones de markdown implementan la convención, <tag markdown="1">en cuyo caso MD realizará 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 MultiMarkdown de Fletcher permite que los atributos sigan el enlace si se usan enlaces referenciados.

Sherwood Botsford
fuente
Nota: asegúrese de utilizar marcadores de código; La mayor parte de esta publicación estaba oculta ya que se interpretaba como etiquetas HTML.
Lawrence Dol
Gracias: el truco DIV es la única respuesta aquí que parece funcionar con pegdown / cegdown. (Pegdown también es extensible con complementos, por lo que podría hacerlo a largo plazo)
Korny
2

En reducción delgada, use esto:

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

Se traduce a:

<h1 class="cool-heading">Some Title</h1>
Khalil Gharbaoui
fuente
1

También debe mencionarse que las <span>etiquetas permiten dentro de ellos: los elementos de nivel de bloque niegan el MD de forma nativa dentro de ellos a menos que los configure para que no lo hagan, pero los estilos en línea permiten de forma nativa el MD dentro de ellos. Como tal, a menudo hago algo parecido a ...

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.

No estoy 100% seguro de si esto es universal, pero parece ser el caso en todos los editores de MD que he usado.

Seraphendipity
fuente
0

Si solo necesita un selector para fines de Javascript (como yo lo hice), es posible que desee utilizar un hrefatributo en lugar de un classo id:

Solo haz esto:

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

Markdown no ignorará ni eliminará el hrefatributo como lo hace con las clases y los identificadores.

Entonces, en su Javascript o jQuery, puede hacer:

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

    ... do your thing ...

    event.preventDefault();
});

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

Tintín81
fuente