Kann ich einen Klassennamen auf Absatz mit Markdown definieren?

Question

Kann ich definiere ein Klassenname auf Absatz mit Markdown? Wenn ja, wie?

Answer 1

Dupe: Wie kann ich eine HTML-Klasse Attribut in Markdown?

---

Nativ? Nein, aber ...

Nein, Markdown Syntax nicht. Sie können href="http://michelf.com/projects/php-markdown/extra/#header-id" Extra-durch-ID-Werte mit Markdown gesetzt.

Sie können verwenden rel="noreferrer">, wenn Sie möchten, und fügen Sie das Attribut markdown="1" Abschlags-Umwandlung innerhalb des HTML-Elements fortzusetzen. Dies erfordert Markdown Extra- though.

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

Mögliche Lösung: (Ungeprüfte und für <blockquote> beabsichtigt)

Ich fand die folgenden online:

Funktion

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

Ergebnis

<blockquote id="id" class="className">
    <p>This is the blockquote</p>
</blockquote>

Answer 2

Raw HTML ist eigentlich perfekt gültig in Abschlag. Zum Beispiel:

Normal *markdown* paragraph.

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

So stellen Sie sicher, dass die HTML nicht in einem Codeblock ist.

Answer 3

Markdown sollte diese Fähigkeit haben, aber es funktioniert nicht. Stattdessen sind Sie mit sprachspezifischen Markdown Supersätze fest:

PHP: Markdown Extra-
Rubin: Kramdown , Maruku

Aber wenn man von echten Markdown-Syntax zu halten brauchen, sind Sie stecken mit rohen HTML einfügen, was weniger ideal ist.

Answer 4

Wenn Ihre Umgebung JavaScript ist, verwenden Sie Abschlags-it mit dem Plugin entlang Abschlags-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);

Output

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

jsfiddle

Hinweis: Beachten Sie den Sicherheitsaspekt bei den Attribute in Ihrem Abschlag erlaubt

Disclaimer, ich bin der Autor des Abschlags-it-attrs.

Answer 5

Hier ist ein funktionierendes Beispiel für kramdown @ Antwort des Yarin folgen.

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

Referenz: https://kramdown.gettalong.org/syntax.html# Inline-Attribut-Listen

Answer 6

Wenn Ihr Geschmack von Abschlag kramdown ist, dann können Sie CSS-Klasse wie folgt festgelegt:

{:.nameofclass}
paragraph is here

Dann in Sie Datei CSS, Sie setzen die CSS wie folgt aus:

.nameofclass{
   color: #000;
  }

Answer 7

Wie oben erwähnt Abschlags selbst lässt Sie auf diese hängen. Jedoch abhängig von der Implementierung gibt es einige Lösungen:

Mindestens eine Version von MD hält <div> einen Block-Level-Tag zu sein, aber <DIV> ist nur Text. Alle broswers jedoch Groß- und Kleinschreibung. Auf diese Weise können Sie die Syntax Einfachheit der MD zu halten, auf Kosten der div Container-Tags hinzufügen.

So ist das Folgende eine Abhilfe:

<DIV class=foo>

  Paragraphs here inherit class foo from above.

</div>

Die Kehrseite der Medaille ist, dass die Ausgangscode-Tags Umwickeln der <p> Linien <div> (beide, die erste, weil es nicht und das zweite ist, weil es nicht passt. Kein Browser fusses über dieses, das ich gefunden habe, aber der Code nicht bestätigen. MD neigt ohnehin in Ersatz <p>-Tags zu setzen.

Mehrere Versionen von Abschlag Umsetzung der Konvention <tag markdown="1"> in diesem Fall MD wird die normale Verarbeitung innerhalb des Tags tun. Das obige Beispiel wird:

<div markdown="1" class=foo>

  Paragraphs here inherit class foo from above.

</div>

Die aktuelle Version von Fletchers Multimark kann Attribute dem Link folgen, wenn verwiesen Links.

Answer 8

In slim Abschlag folgt aus:

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

Verschiebt an:

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

Answer 9

Wenn Sie nur einen Wähler für Javascript Zwecke (wie ich), können Sie nur ein href Attribut anstelle eines class oder id verwenden möchten:

Just dies zu tun:

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

Markdown nicht ignorieren oder das href Attribut entfernen, wie es mit Klassen funktioniert und ids.

Also in Ihrem Javascript oder jQuery können Sie dann tun:

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

    ... do your thing ...

    event.preventDefault();
});

Wenigstens das funktioniert in meiner Version von Markdown ...