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:
Header
- ListenElement 1
- ListenElement 2
Das ist ein Absatz
Parameter
-
autoid:true
oderautoid:false
, default false hiermit wird festgelegt, ob die header automatisch eine ID erhalten sollen -
mathjax:true
odermathjax:false
, default true wenn Sie mathJax nicht nutzen wollen... -
useInlineStyles:true
oderuseInlineStyles: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:- fhwparse-tleft
- fhwparse-tcenter
- fhwparse-tright
Ein Beispiel für den Aufruf:
fhwParse(myMD.innerText, {autoid:true, mathjax:false, useInlineStyles:false})
Zum: Inhaltsverzeichnis