Wie das Posten von HTML in Kommentaren funktionieren sollte

Avatar of Chris Coyier
Chris Coyier am

DigitalOcean bietet Cloud-Produkte für jede Phase Ihrer Reise. Starten Sie mit 200 $ kostenlosem Guthaben!

Leute posten ziemlich viel HTML in den Kommentaren zu Artikeln auf dieser Seite. Sie versuchen, etwas zu demonstrieren, um Hilfe bei der Fehlersuche zu bitten, alternative Techniken zu zeigen usw. Das ist ausgezeichnet. Ich möchte das so weit wie möglich fördern. Leider sind die Leute oft verwirrt, wie sie es richtig machen und frustriert, wenn es falsch herauskommt.

Ich muss Anleitungen im Kommentarbereich posten, um Leuten den besten Weg für diese Seite zu vermitteln

  • Du kannst einfaches HTML verwenden
  • Wenn du Code postest, wandle bitte alle <-Zeichen in &lt; um
  • Wenn der Code mehrzeilig ist, verwende <pre><code></code></pre>

Idealerweise möchte ich all diese Anweisungen komplett loswerden und alles „einfach funktionieren“ lassen. Hier sind zwei Änderungen, die dem Ideal für Kommentare auf dieser Seite ziemlich nahe kämen

1. Jedes HTML, das kein „erlaubter Tag“ ist, wird maskiert.

WordPress hat diese Standardmenge an erlaubten Tags

<a href="" title="">
<abbr title="">
<acronym title="">
<b>
<blockquote cite="">
<cite>
<code>
<del datetime="">
<em>
<i>
<q cite="">
<strike>
<strong>

Wenn jemand diese Tags in einem Kommentar verwendet, werden sie auf diesen Text angewendet und entsprechend gerendert. Wenn sie einen *anderen* Tag verwenden, sollte dieser **maskiert** werden, nicht gelöscht oder unangemessen gerendert. Also

Ich würde auch sagen, dass wenn es sich um eine einzelne Codezeile handelt, wie in diesem Beispiel (enthält keine Zeilenumbrüche), der neu maskierte Code in <code></code>-Tags eingeschlossen werden sollte.

Außerdem, wenn der Code bereits maskiert ist, wie &lt;span&gt;, dann lass ihn in Ruhe.

2. Stelle sicher, dass mehrzeiliger Code in <pre>-Tags eingeschlossen ist

Wenn jemand mehrere Codezeilen postet (entweder hat er sie in <code>-Tags gesetzt oder es sind keine erlaubten Tags, also wird er automatisch maskiert und automatisch mit Code umwickelt), sollte dieser mehrzeilige Code in <pre></pre>-Tags eingeschlossen werden.

Dies sollte auch Leerzeichen am Anfang und Ende des Codeblocks entfernen, damit keine zusätzlichen Leerzeichen gerendert werden. Das

<pre><code>
<ul>
  <li>

Sollte sich verwandeln in

<pre><code><ul>
  </li><code></pre>

Dies wäre der Fall, unabhängig davon, ob der Kommentator die Tags selbst verwendet oder ob sie basierend auf den obigen Regeln automatisch generiert werden.

CMS-agnostisch

Ich denke hier speziell an WordPress, weil ich das immer benutze, aber ich kann mir vorstellen, dass das in jeder Kommentarumgebung nützlich ist, die einige, aber nicht alle HTML-Tags zulässt und in der es angemessen ist, dass die Diskussion Nerds einschließt, die HTML diskutieren. Hey, vielleicht sollte das ein WordPress-Plugin sein, hm? Zwinker Zwinker.