Kann ich mit Markdown einen Klassennamen für einen Absatz definieren?

Kann ich mit Markdown einen Klassennamen für einen Absatz definieren? Wenn das so ist, wie?

Dupe: Wie setze ich ein HTML-Klassenattribut in Markdown?

Nativ? Nein, aber...

Nein, Markdowns Syntax kann nicht. Sie können ID-Werte mit Markdown Extra bis festlegen .

Wenn Sie möchten, können Sie normales HTML verwenden und das Attribut hinzufügen markdown="1", um die Markdown-Konvertierung innerhalb des HTML-Elements fortzusetzen. Dies erfordert jedoch Markdown Extra .

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

Mögliche Lösung: (ungetestet und vorgesehen für <blockquote>)

Ich habe folgendes online gefunden:

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";
}

Abschlag

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

Ergebnis

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

Raw HTML ist in Markdown tatsächlich perfekt gültig. Zum Beispiel:

Normal *markdown* paragraph.

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

Stellen Sie einfach sicher, dass sich der HTML-Code nicht in einem Codeblock befindet.

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

Ausgabe

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

jsfiddle

Hinweis: Beachten Sie den Sicherheitsaspekt, wenn Sie Attribute in Ihrem Markdown zulassen!

Haftungsausschluss, ich bin der Autor von Markdown-It-Attrs.

Markdown sollte diese Funktion haben, tut es aber nicht. Stattdessen stecken Sie in sprachspezifischen Markdown-Supersets fest:

PHP: Markdown Extra
Ruby: Kramdown , Maruku

Wenn Sie sich jedoch an die echte Markdown-Syntax halten müssen, müssen Sie nur unformatiertes HTML einfügen, was weniger ideal ist.

Wenn Ihr Markdown-Geschmack kramdown ist, können Sie die CSS-Klasse wie folgt festlegen:

{:.nameofclass}
paragraph is here

Dann legen Sie in Ihrer CSS-Datei die CSS wie folgt fest:

.nameofclass{
   color: #000;
  }

Hier ist ein funktionierendes Beispiel für kramdown nach der Antwort von @ Yarin.

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

Referenz: https://kramdown.gettalong.org/syntax.html#inline-attribute-lists

Wie oben erwähnt, lässt Markdown selbst Sie daran hängen. Abhängig von der Implementierung gibt es jedoch einige Problemumgehungen:

Mindestens eine Version von MD wird <div>jedoch als Block-Level-Tag betrachtet<DIV> ist jedoch nur Text. Alle Browser unterscheiden jedoch nicht zwischen Groß- und Kleinschreibung. Auf diese Weise können Sie die Syntaxvereinfachung von MD auf Kosten des Hinzufügens von div-Container-Tags beibehalten.

Das Folgende ist also eine Problemumgehung:

<DIV class=foo>

  Paragraphs here inherit class foo from above.

</div>

Der Nachteil dabei ist, dass der Ausgabecode <p>Tags enthält, die die <div>Zeilen umschließen (beide, das erste, weil es nicht stimmt, und das zweite, weil es nicht übereinstimmt. Kein Browser macht sich darüber Gedanken, was ich gefunden habe, aber der Code hat gewonnen. ' t validate. MD neigt <p>sowieso dazu, Ersatz- Tags einzufügen.

Mehrere Versionen von Markdown implementieren die Konvention. <tag markdown="1">In diesem Fall führt MD die normale Verarbeitung innerhalb des Tags durch. Das obige Beispiel wird:

<div markdown="1" class=foo>

  Paragraphs here inherit class foo from above.

</div>

In der aktuellen Version von Fletchers MultiMarkdown können Attribute dem Link folgen, wenn Links verwendet werden, auf die verwiesen wird.

In schlanker Abschlag Verwendung dieses:

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

Wird übersetzt in:

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

Es sollte auch erwähnt werden, dass <span> Tags in ihnen erlaubt sind - Elemente auf Blockebene negieren MD nativ in ihnen, es sei denn, Sie konfigurieren sie nicht dafür, aber Inline-Stile erlauben nativ MD in ihnen. Als solches mache ich oft etwas Ähnliches wie ...

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.

Ich bin nicht 100% sicher, ob dies universell ist, aber es scheint bei allen von mir verwendeten MD-Editoren der Fall zu sein.

Wenn Sie nur einen Selektor für Javascript-Zwecke benötigen (wie ich), möchten Sie möglicherweise nur ein hrefAttribut anstelle von classoder verwendenid :

Mach das einfach:

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

Markdown ignoriert oder entfernt das nicht href Attribut nicht wie bei Klassen und IDs.

In Ihrem Javascript oder Ihrer jQuery können Sie also Folgendes tun:

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

    ... do your thing ...

    event.preventDefault();
});

Zumindest funktioniert das in meiner Version von Markdown ...