Eines der leistungsst?rkeren Konzepte, über die ich in letzter Zeit gesto?en bin, ist die Idee von abstrakten Syntaxb?umen oder ASTs. Wenn Sie jemals Alchemie studiert haben, erinnern Sie sich vielleicht, dass die gesamte Motivation für Alchemisten darin bestand, einen Weg zu entdecken, um nicht gold in Gold durch wissenschaftliche oder arkane Methoden zu verwandeln.

ASTS sind so etwas. Mit ASTS k?nnen wir Markdown in HTML, JSX in JavaScript und vieles mehr verwandeln.

Warum sind ASTS nützlich?

Zu Beginn meiner Karriere habe ich versucht, Dateien mithilfe einer Find-and-Replace-Methode zu ?ndern. Dies war ziemlich kompliziert, daher habe ich versucht, regul?re Ausdrücke zu verwenden. Am Ende gab ich die Idee auf, weil sie so spr?de war; Die App brach die ganze Zeit, weil jemand in eine Weise, die ich nicht erwartet hatte, in Text eindrang und meine regul?ren Ausdrücke brechen würde, was dazu führte, dass die gesamte App nach unten fiel.

Der Grund, warum dies so schwierig war, ist, dass HTML flexibel ist. Das macht es extrem schwierig, mit regul?ren Ausdrücken zu analysieren. Ein solcher String-basiertes Ersatz ist anf?llig für Brechen, da es m?glicherweise ein Match verpasst, zu viel übereinstimmt oder etwas Seltsames tut, das zu einem ungültigen Markup führt, das die Seite aussieht.

ASTS Andererseits verwandeln Sie HTML in etwas weitaus strukturierteres, was es viel einfacher macht, in einen Textknoten einzutauchen und nur diesen Text zu ersetzen oder sich mit Elementen zu vermeiden, ohne sich überhaupt mit dem Text zu befassen.

Dies macht die AST-Transformation sicherer und weniger fehleranf?lliger als eine rein stringbasierte L?sung.

Wofür werden ASTS verwendet?

Schauen wir uns zun?chst ein minimales Dokument mit ein paar Markdown -Zeilen an. Dies wird als Datei namens home.md gespeichert, die wir im Inhaltsordner unserer Website speichern werden.

 # Hallo Welt!

! [Cardigan Corgi] (<https:>) Ein entzückender Corgi!

Ein weiterer Text geht hier.</https:>

Angenommen, wir wissen, dass wir Markdown kennen, k?nnen wir schlie?en, dass bei diesem Markdown ein H1 -Tag mit der Aufschrift "Hallo Welt!" Dann zwei Texteabs?tze: Das erste enth?lt ein Bild eines Corgi und einige Text, die es beschreiben sollen, und der zweite sagt: "Ein weiterer Text geht hier."

Aber wie wird es von Markdown zu HTML verwandelt?

Hier kommen Asts ins Spiel!

Da es mehrere Sprachen unterstützt, werden wir die Unist Cloe -Syntax -Baumspezifikation und insbesondere das Projekt einheitlich verwenden.

Installieren Sie die Abh?ngigkeiten

Zun?chst müssen wir die Abh?ngigkeiten installieren, die erforderlich sind, um den Markdown in einen AST zu analysieren und sie in HTML umzuwandeln. Dazu müssen wir sicherstellen, dass wir den Ordner als Paket initialisiert haben. Führen Sie den folgenden Befehl in Ihrem Terminal aus:

 # Stellen Sie sicher, dass Sie sich in Ihrem Root -Ordner befinden (wo `content` ist)
# Initialisieren Sie diesen Ordner als NPM -Paket
npm init

# Die Abh?ngigkeiten installieren
NPM Installieren Sie einheitliche Bemerkung-Parse-Bemerkung-HTML

Wenn wir davon ausgehen, dass unser Markdown in Home.md gespeichert ist, k?nnen wir den AST mit dem folgenden Code erhalten:

 const fs = erfordern ('fs');
const Unified = fordert ('Unified');
const markdown = erfordern ('Bemerkung-Parse');
const html = require ('Remark-html');

const Inhalt = Unified ()
  .use (Markdown)
  .use (html)
  .ProcessSync (fs.readFilesync (`$ {process.cwd ()}/content/home.md`))
  .ToString ();

console.log (Inhalt);

Dieser Code nutzt das integrierte FS-Modul des Knotens, mit dem wir auf das Dateisystem zugreifen und manipulieren k?nnen. Weitere Informationen dazu finden Sie in den offiziellen Dokumenten.

Wenn wir dies als src/index.js speichern und Knoten verwenden, um dieses Skript aus der Befehlszeile auszuführen, werden wir Folgendes in unserem Terminal sehen:

 $ node src/index.js 
<h1> Hallo Welt! </h1>
<p> <img src="<https://images.dog.ceo/breeds/corgi-carder/n02113186_1030.jpg>" alt="Cardigan Corgi"> ein entzückender Corgi! </p>
<p> Ein weiterer Text geht hier. </p>

Wir sagen Unified, dass es Bemering-Parse verwenden soll, um die Markdown-Datei in ein AST zu verwandeln und dann Remarkdml zu verwenden, um das Markdown-AST in eine HTML zu verwandeln-oder insbesondere in etwas, das sie in eine sogenannte VFILE verwandelt. Mit der Methode toString () verwandelt wir diese AST in eine tats?chliche Zeichenfolge von HTML, die wir im Browser anzeigen k?nnen!

Dank der harten Arbeit der Open-Source-Community macht die Bemerkung die harte Arbeit, sich für uns in HTML zu verwandeln. (Siehe Diff)

Schauen wir uns als n?chstes an, wie dies tats?chlich funktioniert.

Wie sieht ein AST aus?

Um das eigentliche AST zu sehen, schreiben wir ein winziges Plugin, um es zu protokollieren:

 const fs = erfordern ('fs');
const Unified = fordert ('Unified');
const markdown = erfordern ('Bemerkung-Parse');
const html = require ('Remark-html');

const Inhalt = Unified ()
	.use (Markdown)
  .use (() => tree => console.log (json.Stringify (Baum, NULL, 2)))
	.use (html)
	.ProcessSync (fs.readFilesync (`$ {process.cwd ()}/content/home.md`))
	.ToString ();

Die Ausgabe des Ausführens des Skripts wird jetzt sein:

 {
  "Typ": "root",
  "Kinder": [
    {
      "Typ": "überschrift",
      "Tiefe": 1,,
      "Kinder": [
        {
          "Typ": "Text",
          "Wert": "Hallo Welt!",
          "Position": {}
        }
      ],
      "Position": {}
    },
    {
      "Typ": "Absatz",
      "Kinder": [
        {
          "Typ": "Bild",
          "Titel": NULL,
          "URL": "<https:>",
          "Alt": "Cardigan Corgi",
          "Position": {}
        },
        {
          "Typ": "Text",
          "Wert": "Ein entzückender Corgi!",
          "Position": {}
        }
      ],
      "Position": {}
    },
    {
      "Typ": "Absatz",
      "Kinder": [
        {
          "Typ": "Text",
          "Wert": "Ein weiterer Text geht hier.",,
          "Position": {}
        }
      ],
      "Position": {}
    }
  ],
  "Position": {}
}</https:>

Beachten Sie, dass die Positionswerte abgeschnitten wurden, um Platz zu sparen. Sie enthalten Informationen darüber, wo sich der Knoten im Dokument befindet. Für die Zwecke dieses Tutorials werden wir diese Informationen nicht verwenden. (Siehe Diff)

Dies ist ein wenig überw?ltigend anzusehen, aber wenn wir zoomen, k?nnen wir feststellen, dass jeder Teil des Markas zu einem Knotentyp mit einem Textknoten darin wird.

Zum Beispiel wird die überschrift:

 {
  "Typ": "überschrift",
  "Tiefe": 1,,
  "Kinder": [
    {
      "Typ": "Text",
      "Wert": "Hallo Welt!",
      "Position": {}
    }
  ],
  "Position": {}
}

Folgendes bedeutet dies:

• Der Typ sagt uns, mit welcher Art von Knoten wir es zu tun haben.
• Jeder Knotentyp hat zus?tzliche Eigenschaften, die den Knoten beschreiben. Die Tiefeneigenschaft auf der überschrift sagt uns, welche Ebene sie ist - eine Tiefe von 1 bedeutet, dass es sich um ein

  -Tags handelt, 2 bedeutet

  und so weiter.

• Das Kinderarray sagt uns, was sich in diesem Knoten befindet. Sowohl in der überschrift als auch im Absatz gibt es nur Text, aber wir konnten hier auch Inline -Elemente wie sehen.

Dies ist die Kraft von ASTS: Wir haben jetzt das Markdown -Dokument als Objekt beschrieben, das ein Computer verstehen kann. Wenn wir dies wieder auf Markdown ausdrucken m?chten, würde ein Markdown -Compiler wissen, dass ein ?überschrift“ -Knoten mit einer Tiefe von 1 mit # beginnt, und ein untergeordneter Textknoten mit dem Wert ?Hallo“ bedeutet, dass die endgültige Zeile # Hallo sein sollte.

Wie AST -Transformationen funktionieren

Die Transformation eines AST wird normalerweise mit dem Besuchermuster durchgeführt. Es ist nicht wichtig zu wissen, wie dies produktiv ist, aber wenn Sie neugierig sind, hat JavaScript -Designmuster für Menschen von Soham Kamani ein gro?artiges Beispiel, um zu erkl?ren, wie es funktioniert. Das Wichtigste ist, dass die meisten Ressourcen für AST -Arbeit über ?Besuchsknoten“ sprechen werden, die sich grob übersetzt, um ?einen Teil des AST zu finden, damit wir Dinge damit machen k?nnen“. Die Art und Weise, wie diese Funktionen üben, ist, dass wir eine Funktion schreiben, die auf AST -Knoten angewendet wird, die unseren Kriterien entsprechen.

Ein paar wichtige Anmerkungen darüber, wie es funktioniert:

• ASTS kann riesig sein, daher werden wir aus Leistungsgründen Knoten direkt mutieren. Dies entspricht, wie ich normalerweise die Dinge n?here - als allgemeine Regel, die ich nicht gerne den globalen Zustand mutiere -, aber es macht in diesem Zusammenhang Sinn.
• Besucher arbeiten rekursiv. Das hei?t, wenn wir einen Knoten verarbeiten und einen neuen Knoten desselben Typs erstellen, wird der Besucher auch auf dem neu erstellten Knoten ausgeführt, es sei denn, wir sagen dem Besucher ausdrücklich.
• Wir werden in diesem Tutorial nicht zu tief gehen, aber diese beiden Ideen werden uns helfen zu verstehen, was los ist, wenn wir uns mit dem Code anlegen.

Wie modifiziere ich die HTML -Ausgabe des AST?

Was ist jedoch, wenn wir die Ausgabe unseres Markdowns ?ndern wollen? Nehmen wir an, unser Ziel ist es, Bild -Tags mit einem Figurenelement zu wickeln und eine Bildunterschrift wie folgt zu liefern:

 <abus>
  <img src="<https://images.dog.ceo/breeds/corgi-carder/n02113186_1030.jpg>" alt="Cardigan Corgi">
  <figcaption> ein entzückender Corgi! </figcaption>
</abus>

Um dies zu erreichen, müssen wir die HTML -AST - nicht den Markdown -AST - verwandeln, da Markdown keine M?glichkeit zum Erstellen von Figuren oder Figcaptions -Elementen hat. Glücklicherweise k?nnen wir das tun, ohne eine Reihe von benutzerdefinierten Code zu schreiben, da Unified mit mehreren Parsers interoperabel ist.

Konvertieren Sie einen Markdown AST in ein HTML AST

Um den Markdown AST in ein HTML-AST umzuwandeln, fügen Sie Bemerkung zum Rehen zu und wechseln Sie zur Rehyped-Stringify, um das AST wieder an HTML zu wenden.

 NPM installieren

Nehmen Sie die folgenden ?nderungen in SRC/Index.js vor, um auf Rehypen umzusteigen:

 const fs = erfordern ('fs');
const Unified = fordert ('Unified');
const markdown = erfordern ('Bemerkung-Parse');
const merking2Rehype = fordert ('Bemerkenseiter');
const html = require ('rehype-stringify');

const Inhalt = Unified ()
	.use (Markdown)
  .
	.use (() => tree => console.log (json.Stringify (Baum, NULL, 2)))
	.use (html)
	.ProcessSync (fs.readFilesync ('Corgi.md'))
	.ToString ();

console.log (Inhalt);

Beachte

Wenn wir das Skript ausführen, sehen wir das Bildelement jetzt im AST so aus:

 {
  "Typ": "Element",
  "Tagname": "img",
  "Eigenschaften": {
    "src": "https://images.dog.ceo/breeds/corgi-carder/n02113186_1030.jpg",
    "Alt": "Cardigan Corgi"
  },
  "Kinder": [],
  "Position": {}
}

Dies ist der AST für die HTML -Darstellung des Bildes, sodass wir es ?ndern k?nnen, um das Figurenelement zu verwenden. (Siehe Diff)

Schreiben Sie ein Plugin für Unified

Um unser IMG -Element mit einem Figurenelement zu wickeln, müssen wir ein Plugin schreiben. In Unified werden Plugins mit der Methode Use () hinzugefügt, die das Plugin als erstes Argument und alle Optionen als zweites Argument akzeptiert:

 .use (Plugin, Optionen)

Der Plugin -Code ist eine Funktion (als "Anzug" in Unified Jargon bezeichnet), die die Option erh?lt. Diese Optionen werden verwendet, um eine neue Funktion (als ?Transformator“ bezeichnet) zu erstellen, die das AST empf?ngt und sie erledigt. Weitere Informationen zu Plugins finden Sie im Plugin -überblick in den einheitlichen Dokumenten.

Die von ihr zurückgegebene Funktion erh?lt das gesamte AST als Argument und gibt nichts zurück. (Denken Sie daran, ASTS werden global mutiert.) Erstellen Sie eine neue Datei namens iMG-to-figure.js im selben Ordner wie index.js und geben Sie dann Folgendes innen ein:

 module.exports = options => baum => {
  console.log (Baum);
};

Um dies zu verwenden, müssen wir es zu src/index.js hinzufügen:

 const fs = erfordern ('fs');
const Unified = fordert ('Unified');
const markdown = erfordern ('Bemerkung-Parse');
const merking2Rehype = fordert ('Bemerkenseiter');
const html = require ('rehype-stringify');
const imgtofigure = require ('./ img-to-figure');

const Inhalt = Unified ()
  .use (Markdown)
  .
  .use (imgtofigure)
  .ProcessSync (fs.readFilesync ('Corgi.md'))
  .ToString ();

console.log (Inhalt);

Wenn wir das Skript ausführen, sehen wir den gesamten Baum in der Konsole angemeldet:

 {
  Typ: 'root',
  Kinder: [
    {
      Typ: 'Element',
      Tagname: 'P',
      Eigenschaften: {},
      Kinder: [Array],
      Position: [Objekt]
    },
    {Typ: 'Text', Wert: '\\ n'},,
    {
      Typ: 'Element',
      Tagname: 'P',
      Eigenschaften: {},
      Kinder: [Array],
      Position: [Objekt]
    }
  ],
  Position: {
    Start: {Zeile: 1, Spalte: 1, Offset: 0},
    Ende: {Zeile: 4, Spalte: 1, Offset: 129}
  }
}

(Siehe Diff)

Fügen Sie dem Plugin einen Besucher hinzu

Als n?chstes müssen wir einen Besucher hinzufügen. Dadurch werden wir tats?chlich in den Code gelangen. Unified nutzt eine Reihe von Dienstprogrammpaketen, die alle mit Unist-util-*vorangestellt sind, die es uns erm?glichen, gemeinsam mit unserem AST-Schreiben gemeinsame Dinge zu tun, ohne benutzerdefinierten Code zu schreiben.

Wir k?nnen Unist-util-vis-vis-vis-optimieren. Dies gibt uns einen Besuchshelfer, der drei Argumente nimmt:

• Mit dem gesamten AST, mit dem wir arbeiten
• Eine Pr?dikatfunktion, um zu identifizieren, welche Knoten wir besuchen m?chten
• Eine Funktion, um ?nderungen am AST vorzunehmen, den wir vornehmen m?chten

Führen Sie zum Installieren Folgendes in Ihrer Befehlszeile aus:

 NPM Installieren Sie Unist-util-vis

Lassen Sie uns einen Besucher in unserem Plugin implementieren, indem wir den folgenden Code hinzufügen:

 const Visit = fordert ('Unist-util-vis-vit');

  module.exports = options => baum => {
    besuchen(
      Baum,
      // Besuchen Sie nur P -Tags, die ein IMG -Element enthalten
      node =>
        node.tagname === 'p' && node.children.some (n => n.tagname === 'img'),
      node => {
        console.log (Knoten);
      }
    );
};

Wenn wir dies ausführen, k?nnen wir sehen, dass nur ein Absatzknoten angemeldet ist:

 {
  Typ: 'Element',
  Tagname: 'P',
  Eigenschaften: {},
  Kinder: [
    {
      Typ: 'Element',
      Tagname: 'Img',
      Eigenschaften: [Objekt],
      Kinder: [],
      Position: [Objekt]
    },
    {Typ: 'Text', Wert: 'Ein entzückender Corgi!', Position: [Objekt]}
  ],
  Position: {
    Start: {Zeile: 3, Spalte: 1, Offset: 16},
    Ende: {Zeile: 3, Spalte: 102, Offset: 117}
  }
}

Perfekt! Wir erhalten nur den Absatzknoten, der das Bild hat, das wir ?ndern m?chten. Jetzt k?nnen wir anfangen, das AST zu verwandeln!

(Siehe Diff)

Wickeln Sie das Bild in ein Figurenelement

Nachdem wir die Bildattribute haben, k?nnen wir beginnen, das AST zu ?ndern. Denken Sie daran, weil ASTS wirklich gro? sein kann, mutieren wir sie an Ort und Stelle, um zu vermeiden, dass viele Kopien erzeugt werden und unser Drehbuch m?glicherweise verlangsamt werden.

Wir beginnen damit, den TagNamen des Knotens zu einer Figur anstelle eines Absatzes zu ?ndern. Der Rest der Details kann vorerst gleich bleiben.

Nehmen Sie die folgenden ?nderungen in SRC/IMG-to-Figure.js vor:

 const Visit = fordert ('Unist-util-vis-vit');

module.exports = options => baum => {
  besuchen(
    Baum,
    // Besuchen Sie nur P -Tags, die ein IMG -Element enthalten
    node =>
    node.tagname === 'p' && node.children.some (n => n.tagname === 'img'),
    node => {
      node.tagname = 'figure';
    }
  );
};

Wenn wir unser Skript wieder ausführen und uns die Ausgabe ansehen, k?nnen wir sehen, dass wir uns n?her kommen!

 <h1> Hallo Welt! </h1>
<aby> <img src="<https://images.dog.ceo/breeds/corgi-carder/n02113186_1030.jpg>" alt="Cardigan Corgi"> ein entzückender Corgi! 
<p> Ein weiterer Text geht hier. </p></aby>

(Siehe Diff)

Verwenden Sie den Text neben dem Bild als Bildunterschrift

Um nicht die benutzerdefinierte Syntax schreiben zu müssen, verwenden wir einen beliebigen Text mit einem Bild als Bildunterschrift.

Wir k?nnen davon ausgehen, dass Bilder normalerweise keinen Inline -Text in Markdown haben, aber es ist erw?hnenswert, dass dies zu 100% unbeabsichtigten Bildunterschriften für Personen erscheinen kann, die Markdown schreiben. Wir werden dieses Risiko in diesem Tutorial eingehen. Wenn Sie vorhaben, dies in Produktion zu bringen, achten Sie darauf, dass Sie die Kompromisse abw?gen und w?hlen, was für Ihre Situation am besten ist.

Um den Text zu verwenden, suchen wir nach einem Textknoten innerhalb unseres übergeordneten Knotens. Wenn wir einen finden, wollen wir seinen Wert als unsere Bildunterschrift greifen. Wenn keine Bildunterschrift gefunden wird, wollen wir diesen Knoten überhaupt nicht verwandeln, damit wir früh zurückkehren k?nnen.

Nehmen Sie die folgenden ?nderungen an SRC/IMG-to-Figure.js vor, um die Bildunterschrift zu ergreifen:

 const Visit = fordert ('Unist-util-vis-vit');

module.exports = options => baum => {
  besuchen(
    Baum,
    // Besuchen Sie nur P -Tags, die ein IMG -Element enthalten
    node =>
    node.tagname === 'p' && node.children.some (n => n.tagname === 'img'),
    node => {
      // den Textknoten finden
      const textNode = node.children.find (n => n.type === 'text');
 
      // Wenn es keine Bildunterschrift gibt, müssen wir den Knoten nicht transformieren
      if (! Texnode) return;
 
      const caption = TextNode.Value.trim ();
 
      console.log ({caption});
      node.tagname = 'figure';
    }
  );
};

Führen Sie das Skript aus und wir k?nnen die caption protokollierte sehen:

 {Bildunterschrift: 'Ein entzückender Corgi!' }

(Siehe Diff)

Fügen Sie der Abbildung ein Figcaption -Element hinzu

Nachdem wir unseren Bildunterschriftstext haben, k?nnen wir eine FigCaption hinzufügen, um sie anzuzeigen. Wir k?nnten dies tun, indem wir einen neuen Knoten erstellen und den alten Textknoten l?schen, aber da wir an Ort und Stelle mutieren, ist es etwas weniger kompliziert, den Textknoten in ein Element zu ?ndern.

Elemente haben jedoch keinen Text, daher müssen wir einen neuen Textknoten als Kind des Figcaption -Elements hinzufügen, um den Bildunterschriftstext anzuzeigen.

Nehmen Sie die folgenden ?nderungen an src/img-to-figure.js vor, um die Beschriftung zum Markup hinzuzufügen:

 const Visit = fordert ('Unist-util-vis-vit');

module.exports = options => baum => {
  besuchen(
    Baum,
    // Besuchen Sie nur P -Tags, die ein IMG -Element enthalten
    node =>
      node.tagname === 'p' && node.children.some (n => n.tagname === 'img'),
    node => {
      // den Textknoten finden
      const textNode = node.children.find (n => n.type === 'text');

      // Wenn es keine Bildunterschrift gibt, müssen wir den Knoten nicht transformieren
      if (! Texnode) return;

      const caption = TextNode.Value.trim ();
      // ?ndern Sie den Textknoten in ein Figcaption -Element, das einen Textknoten enth?lt
      TextNode.Type = 'Element';
      TextNode.tagname = 'Figcaption';
      Textnode.Children = [
        {
          Typ: 'Text',
          Wert: Bildunterschrift
        }
      ];

      node.tagname = 'figure';
    }
  );
};

Wenn wir das Skript erneut mit Node SRC/Index.js ausführen, sehen wir das transformierte Bild, das in ein Figurenelement eingewickelt und mit einer Figcaption beschrieben wird!

 <h1> Hallo Welt! </h1>
<figure> <img src="<https://images.dog.ceo/breeds/corgi-carder/n02113186_1030.jpg>" alt="Cardigan Corgi"> <figcaption> Ein entzückender Corgi! <p> Ein weiterer Text geht hier. </p></figcaption></figure>

(Siehe Diff)

Speichern Sie den transformierten Inhalt in einer neuen Datei

Nachdem wir eine Reihe von Transformationen vorgenommen haben, m?chten wir diese Anpassungen in einer tats?chlichen Datei speichern, damit wir sie teilen k?nnen.

Da der Markdown kein volles HTML-Dokument enth?lt, werden wir ein weiteres Rehype-Plugin namens Rehype-Dokument hinzufügen, um die vollst?ndige Dokumentstruktur und ein Titel-Tag hinzuzufügen.

Installieren durch Ausführen:

 NPM Rehype-Dokument installieren

N?chst die folgenden ?nderungen an SRC/INDEX.JS vornehmen:

 const fs = erfordern ('fs');
const Unified = fordert ('Unified');
const markdown = erfordern ('Bemerkung-Parse');
const merking2Rehype = fordert ('Bemerkenseiter');
const doc = fordert ('Rehype-Dokument');
const html = require ('rehype-stringify');

const imgtofigure = require ('./ img-to-figure');

const Inhalt = Unified ()
	.use (Markdown)
	.
	.use (imgtofigure)
    .use (doc, {title: 'ein transformiertes Dokument!'})
	.use (html)
	.ProcessSync (fs.readFilesync (`$ {process.cwd ()}/content/home.md`))
	.ToString ();

 const outputdir = `$ {process.cwd ()}/public`;

  if (! fs.existsSync (outputdir)) {
    fs.mkdirsync (outputdir);
  }
 
  fs.writeFilesync (`$ {outputDir}/home.html`, Inhalt);

Führen Sie das Skript erneut aus und wir k?nnen einen neuen Ordner in Root namens Public sehen, und im Inneren werden wir zu Hause sehen. Im Inneren wird unser transformiertes Dokument gespeichert!

  
<kopf>
<meta charset="utf-8">
<title> Ein transformiertes Dokument! </title>
<meta name="viewPort" content="width = Ger?tebidth, initial-scale = 1">


	<h1> Hallo Welt! </h1>
	<figure> <img src="<https://images.dog.ceo/breeds/corgi-carder/n02113186_1030.jpg>" alt="Cardigan Corgi"> <figcaption> Ein entzückender Corgi! <p> Ein weiterer Text geht hier. </p>

</figcaption></figure></kopf>

Das obige ist der detaillierte Inhalt vonSo modifizieren Sie Knoten in einem abstrakten Syntaxbaum. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!