¿Puedo definir un nombre de clase en el párrafo usando Markdown? ¿Si es así, cómo?
¿Puedo definir un nombre de clase en el párrafo usando Markdown? ¿Si es así, cómo?
Respuestas:
Dupe: ¿Cómo configuro un atributo de clase HTML en Markdown?
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>
<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>
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.
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>
Nota: ¡ Tenga en cuenta el aspecto de seguridad al permitir atributos en su rebaja!
Descargo de responsabilidad, soy el autor de markdown-it-attrs.
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.
Aquí hay un ejemplo de trabajo para kramdown siguiendo la respuesta de @ Yarin.
A simple paragraph with a class attribute.
{:.yourClass}
Referencia: https://kramdown.gettalong.org/syntax.html#inline-attribute-lists
Python
Markdown
analizador incorporado .
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.
En reducción delgada, use esto:
markdown:
{:.cool-heading}
#Some Title
Se traduce a:
<h1 class="cool-heading">Some Title</h1>
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.
Si solo necesita un selector para fines de Javascript (como yo lo hice), es posible que desee utilizar un href
atributo en lugar de un class
o id
:
Solo haz esto:
<a href="#foo">Link</a>
Markdown no ignorará ni eliminará el href
atributo 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 ...