Beispiel

Nachfolgend ein Beispiel, wie fhwMark eingebunden und genutzt wird:


<!DOCTYPE html>
<html lang=de>
<head>
  <meta charset=UTF-8>
  <title>Beispiel fhwParse</title>
  <script src=https://w-web.de/libs/fhwparse.js></script>
   <style>
    html {
      font-family: system-ui, sans-serif;
      max-width: 80ch;
      margin: auto;
      font-size:1.125em;
    }
    pre{
      background: #f5f5f5;
      padding:1em;
      overflow-x: auto;
      font-weight:bold;
    }
  </style>
</head>
<body>
 <h1>fhwParse Test</h1>
 <h2>Code</h2>
 <pre id=myMD># Header
- ListenElement 1
- ListenElement 2

Das ist ein Absatz</pre>
  <h2>generierter HTML Code</h2>
  <pre id=generatedCode></pre>
  <h2>HTML Ausgabe:</h2>
  <div id=htmlOutput></div>
  <script>
    htmlOutput.innerHTML=
      generatedCode.innerText=
        fhwParse(myMD.innerText, {autoid:true})
  </script>
</body>
</html>

Der gegebene Code ist eine HTML-Seite, die die Verwendung der "fhwMark" Funktion demonstriert. Diese Funktion wird über eine externe JavaScript-Bibliothek mit dem Namen "fhwparse.js" eingebunden. Der Zweck der Funktion ist es, Markdown-Text in HTML umzuwandeln.

Hier ist eine Beschreibung des Codes:

Die HTML-Seite beginnt mit den üblichen HTML-Tags, einschließlich des DOCTYPE-Tags, der Spracheinstellung ("de") und des Head-Bereichs, in dem Metadaten und Skript-/Stylesheet-Verweise angegeben werden.
Es wird ein JavaScript-Verweis auf die externe Bibliothek "fhwparse.js" hinzugefügt, die die Funktion "fhwParse" bereitstellt.
Ein <pre>-Tag mit der ID "myMD" enthält den Markdown-Text, der konvertiert werden soll. Der Markdown-Text enthält eine Überschrift, eine Aufzählungsliste und einen Absatz.
Ein <pre>-Tag mit der ID "generatedCode" wird verwendet, um den generierten HTML-Code anzuzeigen.
Ein <div>-Tag mit der ID "htmlOutput" wird verwendet, um die tatsächliche HTML-Ausgabe anzuzeigen.
Schließlich gibt es einen <script>-Tag, der JavaScript-Code enthält. Der Code ruft die Funktion "fhwMD" mit dem Inhalt des <pre>-Tags mit der ID "myMD" als Parameter auf und gibt das Ergebnis sowohl im <pre>-Tag mit der ID "generatedCode" als auch im <div>-Tag mit der ID "htmlOutput" aus.

Zusammenfassend wird der Code also den Markdown-Text in HTML konvertieren und das Ergebnis sowohl als generierten HTML-Code anzeigen als auch in einem separaten Bereich als tatsächliche HTML-Ausgabe darstellen.

Ausgabe des oben dargestellten HTML Quellcodes:

fhwParse Test

Code

# Header
- ListenElement 1
- ListenElement 2

Das ist ein Absatz

generierter Code

<h1 id="header">Header</h1>
<ul>
<li>
ListenElement 1
<li>
ListenElement 2
</ul>
<p>Das ist ein Absatz</p>

HTML Ausgabe:

ListenElement 1
ListenElement 2

Das ist ein Absatz

Parameter

autoid:true oder autoid:false, default false hiermit wird festgelegt, ob die header automatisch eine ID erhalten sollen
mathjax:true oder mathjax:false, default true wenn Sie mathJax nicht nutzen wollen...
useInlineStyles:true oder useInlineStyles:false, default: true Wenn Sie auf die InlineStyles bei Tabellen verzichten wollen, erforderlich je nach Festlegung der Content-Security-Police ohne 'unsafe:inline'. Es werden folgende Klassen zur Ausrichtung gesetzt:
1. fhwparse-tleft
2. fhwparse-tcenter
3. fhwparse-tright

Ein Beispiel für den Aufruf:


fhwParse(myMD.innerText, {autoid:true, mathjax:false, useInlineStyles:false})

Zum: Inhaltsverzeichnis

Leistung

Barrierefreiheit

SEO