?? ??? ??? ?? ? ?? ??? ?? ? ??? ?? ?? ?? ?? AST? ?? ???????. ???? ?? ? ?? ??? ??????? ?? ??? ??? ?? ???? ??? ?? ??? ??? ???? ??? ???? ?? ??? ??? ????.

ASTS? ?? ????. ASTS? ???? Markdown? HTML, JSX? JavaScript? ?? ? ? ????.

ASTS? ??? ??? ??????

?? ??? Find-and-Replace ??? ???? ??? ?????????. ??? ?? ??? ??? ?? ??? ?? ??? ??? ?????. ?? ? ????? ?? ???? ??? ????? ?????????. ???? ?? ???? ?? ???? ???? ?? ? ??? ??? ?? ?? ??? ??? ? ??? ???? ?? ?? ??? ? ????.

??? ??? ??? HTML? ???? ?????. ??? ?? ???? ???? ?? ????? ?? ?????. ?? ?? ??? ?? ??? ??? ???? ?? ?? ????? ??? ???? ?? ? ?? ?? ???? ???? ???? ??? ??? ???? ????.

??? ASTS? HTML? ?? ? ??? ? ??? ??? ??? ??? ?? ?? ?? ??? ? ????? ???? ?? ?? ? ???? ??? ???? ??? ?? ?? ?????.

?? ?? ??? ??? ?? ????? AST ??? ? ???? ??? ? ?????.

ASTS? ??? ??????

????? ? ?? Markdown? ???? ???? ??? ?? ?????. ??? Home.md?? ??? ???? ? ???? ??? ??? ??? ????.

 # ?????!

! [Cardigan corgi] (<https:>) ????? Corgi!

? ?? ???? ??? ??.</https:>

??? Markdown? ?? ??? ????, ???? Markdown? ?? ?? ? ?“Hello World!”?? H1 ??? ? ???? ?? ? ? ????. ?? ?? ???? ? ?? : ? ???? ??? ???? ???? ?? ??? ??? ?????? ???? ???? ? ???“?? ? ?? ???? ??? ??”? ????.

??? ?? ???? HTML? ??? ??????

??? ASTS? ???? ????!

?? ??? ???? ??? Unist Syntax ?? ??,?? ?????? Unified? ??? ????.

???? ??????

??, ?? ??? AST? ?? ???? HTML? ???? ? ??? ???? ???????. ?????? ??? ???? ?????? ???????. ????? ?? ??? ??????.

 # ?? ??? ??? ?????? ( 'Content'? ??)
#? ??? NPM ???? ???????
npm init

# ???? ?????
NPM Unified Warich-Parse warick-html? ?????

Markdown? Home.md? ???? ??? ???? ?? ??? AST? ?? ? ????.

 const fs = ?? ?? ( 'fs');
const Unified = ?? ?? ( 'Unified');
const markdown = require ( 'warick-parse');
const html = require ( 'warch-html');

const contents = unified ()
  .use (Markdown)
  .use (html)
  .processSync (fs.ReadFilesync (`$ {process.cwd ()}/content/home.md`)))
  .TOSTRING ();

Console.log (??);

? ??? Node? ?? FS ??? ???? ?? ???? ????? ?? ? ? ????. ??? ??? ?????? ?? ??? ??? ?? ??? ??????.

??? src/index.js? ???? ??? ???? ?? ? ??? ????? ???? ????? ??? ? ? ????.

 $ ?? SRC/index.js 
<h1> ????? ??! </h1>
<p> <img src="<https://images.dog.ceo/breeds/corgi-cardigan/n02113186_1030.jpg>" alt="Cardigan corgi"> ????? corgi! </p>
<p> ? ?? ???? ??? ??. </p>

??? ?? ?? ??? AST? ???? ?? ??? ???? Unified? ?? ? ??, ?? -HTML? ???? ?? ??? HTML? ????, ? ?????,?? Vfile??? ??? ??? ????. ToString () ???? ???? ?? ????? ?? ? ??? ?? HTML ???? ast? ????!

Open-Source ????? ?? ??? Exay? Markdown? ??? ?? HTML? ??? ?? ??????. (Diff ??)

???? ??? ??? ??? ????? ?? ?????.

AST? ??? ??????

?? AST? ??? ?? ????? ???? ????????.

 const fs = ?? ?? ( 'fs');
const Unified = ?? ?? ( 'Unified');
const markdown = require ( 'warick-parse');
const html = require ( 'warch-html');

const contents = unified ()
	.use (Markdown)
  .use (() => tree => console.log (json.stringify (tree, null, 2)))))
	.use (html)
	.processSync (fs.ReadFilesync (`$ {process.cwd ()}/content/home.md`)))
	.TOSTRING ();

???? ?? ??? ?? ??? ????.

 {
  "??": "??",
  "????": [
    {
      "??": "??",
      "??": 1,
      "????": [
        {
          "??": "???",
          "??": "????? ??!",
          "??": {}
        }
      ],,
      "??": {}
    },
    {
      "??": "??",
      "????": [
        {
          "??": "???",
          "??": NULL,
          "url": "<https:>",
          "Alt": "Cardigan Corgi",
          "??": {}
        },
        {
          "??": "???",
          "??": "????? ??!",
          "??": {}
        }
      ],,
      "??": {}
    },
    {
      "??": "??",
      "????": [
        {
          "??": "???",
          "??": "? ?? ???? ??? ??.",
          "??": {}
        }
      ],,
      "??": {}
    }
  ],,
  "??": {}
}</https:>

??? ???? ?? ?? ?? ? ????. ???? ??? ??? ??? ?? ??? ???? ????. ? ????? ?? ?, ???? ??? ???? ?? ????. (Diff ??)

??? ?? ?? ?? ??????, ??? ???? ?? ??? ? ??? ??? ????? ?? ????? ?? ? ? ????.

?? ?? ??? ??? ????.

 {
  "??": "??",
  "??": 1,
  "????": [
    {
      "??": "???",
      "??": "????? ??!",
      "??": {}
    }
  ],,
  "??": {}
}

??? ???? ????.

• ? ??? ??? ?? ??? ??? ??? ?????.
• ? ?? ???? ??? ???? ?? ??? ????. ??? ?? ??? ???? ?? ??? ????? ?????. 1? ???

  ??, 2? ?????.

  ?? ?????.

• ??? ???? ?? ??? ??? ??? ?????. ??? ?? ?? ??? ? ??? ? ?? ??? ??? ? ? ????.

??? AST? ????. ?? ??? Markdown ??? ???? ??? ??? ??? ??????. ??? Markdown? ?? ????? Markdown ????? ??? 1 ? "??"??? #? ???? "hello"?? ?? ?? ??? ??? ?? ?? # hello ????? ?? ?? ? ????.

AST ??? ??? ?????

AST ??? ????? ??? ??? ???? ?????. ??? ???? ??? INS? ??? ?? ?? ???? ???, ??? ?? ??? Soham Kamani? ????? JavaScript ??? ??? ??? ??? ????? ???? ? ????? ??? ?? ??? ????. ??? ? ??? ?? AST ??? ?? ???? ???“?? ??”? ?? ??? ? ???, ??“AST? ??? ??? ??? ? ?? ? ??? ?”?? ?????. ? ?? ??? ??? ???? AST ??? ??? ??? ???? ????.

?? ??? ?? ? ?? ??? ?? :

• AST? ?? ? ? ???? ??? ??? ??? ?? ?????????. ??? ????? ??? ??? ?????? ?? ???? ?? ???? ????? ????? ??? ???? ??? ?????? ???? ??? ????.
• ????? ?? ??? ????. ?, ??? ???? ??? ??? ? ??? ??? ???? ?? ??? ???? ?? ? ?? ?? ? ???? ?????.
• ???? ?????? ?? ?? ?? ?? ????,? ? ?? ????? ??? ???? ??? ? ?? ?? ???? ??? ???? ? ??? ? ????.

AST? HTML ??? ??? ??????

??? Markdown? ??? ????? ????????? ??? ??? ?? ??? ??? ??? ???? ??? ?? ??? ???? ???? ?? ? ???.

 
  <img src="<https://images.dog.ceo/breeds/corgi-cardigan/n02113186_1030.jpg>" alt="Cardigan Corgi">
  <figcaption> ????? ??! </figcaption>
??>

?? ????? Markdown?? ???? ?? ??? ??? ??? ?? ??? Markdown AST? ?? HTML AST? ???????. ?????? Unified? ?? ?? ??? ?? ?? ? ? ?? ??? ?? ??? ?? ??? ???? ??? ??? ? ? ????.

?? ??? HTML AST? ??????

Markdown AST? HTML AST? ?????, ??-???? ???? AST? HTML? ??? ?? Rehype-Stringify? ??????.

 NPM ?? ??-??? rehype-stringify

src/index.js?? ??? ???? rehype? ??????.

 const fs = ?? ?? ( 'fs');
const Unified = ?? ?? ( 'Unified');
const markdown = require ( 'warick-parse');
const warnice2rehype = require ( 'warting-rehype');
const html = ?? ?? ( 'rehype-stringify');

const contents = unified ()
	.use (Markdown)
  . ??
	.use (() => tree => console.log (json.stringify (tree, null, 2)))))
	.use (html)
	.processSync (fs.ReadFilesync ( 'corgi.md')))
	.TOSTRING ();

Console.log (??);

HTML ??? warting-html?? rehype-stringify? ???????. ? ? ast? html? ??? ??? ???? ????.

????? ???? AST?? ??? ??? ??? ?? ?? ? ????.

 {
  "??": "??",
  "tagname": "img",
  "??": {
    "SRC": "https://images.dog.ceo/breeds/corgi-cardigan/n02113186_1030.jpg",
    "Alt": "Cardigan Corgi"
  },
  "????": [],
  "??": {}
}

??? ???? HTML ??? ?? AST??? ?? ??? ???? ?? ??? ??? ? ????. (Diff ??)

Unified ? ????? ??????

?? ??? IMG ??? ????? ????? ???????. Unified??? ????? ? ?? ??? ????? ? ?? ??? ????? ???? ?? () ???? ?? ????? ?????.

 .use (????, ??)

???? ??? ??? ???? ?? (?? ?? ??? "?? ?")???. ? ??? AST? ???? ???? ??? ?? ( "???")? ???? ? ?????. ????? ?? ??? ??? ?? ??? ???? ??? ??????.

??? ???? ??? ?? AST? ??? ????? ?? ?? ???? ????. (ASTS? ? ????? ?????.) index.js? ??? ???? img-to-figure.js?? ? ??? ????.

 module.exports = ?? => tree => {
  Console.log (??);
};

??? ????? src/index.js? ???????.

 const fs = ?? ?? ( 'fs');
const Unified = ?? ?? ( 'Unified');
const markdown = require ( 'warick-parse');
const warnice2rehype = require ( 'warting-rehype');
const html = ?? ?? ( 'rehype-stringify');
const imgtofigure = require ( './ img-to-figure');

const contents = unified ()
  .use (Markdown)
  . ??
  .use (imgtofigure)
  .processSync (fs.ReadFilesync ( 'corgi.md')))
  .TOSTRING ();

Console.log (??);

????? ???? ?? ??? ??? ????? ?? ? ? ????.

 {
  ?? : '??',
  ????: [
    {
      ?? : '??',
      Tagname : 'P',
      ??: {},
      ??? : [??],
      ?? : [??]
    },
    {type : 'text', value : '\\ n'},
    {
      ?? : '??',
      Tagname : 'P',
      ??: {},
      ??? : [??],
      ?? : [??]
    }
  ],,
  ??: {
    ?? : {line : 1, ? : 1, ??? : 0},
    ? : {line : 4, ? : 1, ??? : 129}
  }
}

(Diff ??)

????? ???? ??????

???? ???? ???????. ??? ??? ??? ?? ??? ?? ????. Unified? Unist-util-*? ?????? ??? ???? ???? ???? ??? ?? ??? ???? ?? AST? ??? ??? ?? ? ? ????.

Unist-util-Visit? ???? ??? ??? ? ????. ??? ???? ? ?? ????? ?? ???? ?????.

• ??? ?? ??? ?? AST
• ?? ? ??? ???? ?? ??
• ??? ??? ?? AST? ???? ??

????? ?? ??? ??? ??????.

 NPM Unist-util-Visit? ??????

?? ??? ???? ?????? ???? ???????.

 const vison = require ( 'unist-util-Visit');

  module.exports = ?? => tree => {
    ????(
      ??,
      // IMG ??? ?? ? P ?? ? ??
      ?? =>
        node.tagname === 'p'&& node.children.some (n => n.tagname === 'img'),
      ?? => {
        Console.log (??);
      }
    );
};

??? ??? ??? ?, ??? ?? ??? ??? ????? ?? ? ? ????.

 {
  ?? : '??',
  Tagname : 'P',
  ??: {},
  ????: [
    {
      ?? : '??',
      tagname : 'img',
      ?? : [??],
      ????: [],
      ?? : [??]
    },
    {type : 'text', value : '????? corgi!', ?? : [Object]}
  ],,
  ??: {
    ?? : {line : 3, ? : 1, ??? : 16},
    ? : {line : 3, ? : 102, ??? : 117}
  }
}

???! ??? ????? ?????? ?? ?? ? ?? ????. ?? ??? AST? ????? ??? ? ????!

(Diff ??)

?? ??? ???? ?????

?? ??? ??? ???? AST? ??? ? ????. ASTS? ??? ? ? ?? ??? ?? ??? ??? ?? ????? ??? ?? ? ??? ???? ???????.

??? ??? ?? ??? ?? ?? ???? ???? ??? ?????. ??? ?? ??? ?? ???? ?? ? ? ????.

src/img-to-figure.js?? ??? ??????.

 const vison = require ( 'unist-util-Visit');

module.exports = ?? => tree => {
  ????(
    ??,
    // IMG ??? ?? ? P ?? ? ??
    ?? =>
    node.tagname === 'p'&& node.children.some (n => n.tagname === 'img'),
    ?? => {
      node.tagname = '??';
    }
  );
};

??? ????? ?? ???? ??? ??, ??? ????? ??? ? ? ????!

 <h1> ????? ??! </h1>
<fig> <img src="<https://images.dog.ceo/breeds/corgi-cardigan/n02113186_1030.jpg>" alt="Cardigan corgi"> ????? corgi! 
<p> ? ?? ???? ??? ??. </p></fig>

(Diff ??)

??? ?? ???? ???? ??????.

??? ?? ??? ?? ??? ??? ???? ???? ?? ????? ?? ? ???? ???????.

??? ????? ???? Markdown? ??? ???? ??? ??? ? ? ???, ??? 100%? ???? ?? ??? Markdown? ?? ????? ??? ? ??? ?? ??? ??? ????. ???? ?????? ? ??? ?? ? ????. ??? ??? ?? ????? ???? ??? ???? ??? ?? ??? ?? ??????.

???? ???? ?? ?? ?? ???? ??? ??? ?? ????. ??? ??? ???, ??? ???? ? ??? ???? ????. ??? ???? ??? ?? ???? ?? ???? ?? ??? ? ????.

SRC/IMG-to-figure.js? ??? ?? ???? ??? ?????.

 const vison = require ( 'unist-util-Visit');

module.exports = ?? => tree => {
  ????(
    ??,
    // IMG ??? ?? ? P ?? ? ??
    ?? =>
    node.tagname === 'p'&& node.children.some (n => n.tagname === 'img'),
    ?? => {
      // ??? ??? ????
      const textnode = node.children.find (n => n.type === 'text');
 
      // ????? ?? ??? ?? ? ??? ????.
      if (! textNode) ??;
 
      const caption = textnode.value.trim ();
 
      console.log ({caption});
      node.tagname = '??';
    }
  );
};

????? ???? ??? ?? ? ?? ? ? ????.

 {?? : '????? ??!' }

(Diff ??)

??? Figcaption ??? ??????

?? ?? ???? ????? ??? ???? ?? ? ? ????. ? ??? ???? ?? ??? ??? ?????? ?? ? ? ???, ??? ??? ??? ??? ??? ??? ???? ?? ?? ? ?????.

???? ???? ???? ?? ???? ????? Figcaption ??? ???? ? ??? ??? ???????.

SRC/IMG-to-figure.js? ??? ?? ???? ?? ?? ??? ??????.

 const vison = require ( 'unist-util-Visit');

module.exports = ?? => tree => {
  ????(
    ??,
    // IMG ??? ?? ? P ?? ? ??
    ?? =>
      node.tagname === 'p'&& node.children.some (n => n.tagname === 'img'),
    ?? => {
      // ??? ??? ????
      const textnode = node.children.find (n => n.type === 'text');

      // ????? ?? ??? ?? ? ??? ????.
      if (! textNode) ??;

      const caption = textnode.value.trim ();
      // ??? ??? ??? ??? ???? Figcaption ??? ??
      TextNode.type = '??';
      TextNode.tagName = 'figcaption';
      textnode.children = [
        {
          ?? : '???',
          ?? : ??
        }
      ];

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

Node Src/Index.js? ????? ?? ???? ?? ? ???? ?? ??? ???? Figcaption?? ?????!

 <h1> ????? ??! </h1>
<fig> <img src="<https://images.dog.ceo/breeds/corgi-cardigan/n02113186_1030.jpg>" alt="cardigan corgi"> <figcaption> ????? corgi! </figcaption> 

<p> ? ?? ???? ??? ??. </p></fig>

(Diff ??)

?? ? ??? ? ??? ??????

?? ??? ?? ??? ?????? ??? ?? ??? ???? ?? ? ? ????.

Markdown?? ?? HTML ??? ???? ?? ?? ??? ?? ?? ??? ?? ??? ???? ?? Rehype-Document?? Rehype ????? ?? ? ????.

??? ?? ?? :

 NPM REHYPE-DOCUMENT ??

???? SRC/index.js? ??? ?? ??????.

 const fs = ?? ?? ( 'fs');
const Unified = ?? ?? ( 'Unified');
const markdown = require ( 'warick-parse');
const warnice2rehype = require ( 'warting-rehype');
const doc = require ( 'rehype-document');
const html = ?? ?? ( 'rehype-stringify');

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

const contents = unified ()
	.use (Markdown)
	. ??
	.use (imgtofigure)
    .use (doc, {?? : '?? ? ??!'})
	.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`, ??);

????? ?? ???? Root?? ???? ? ??? ? ? ??? ????? HOME.HTML? ? ? ????. ???? ?? ? ??? ?????!

  

<meta charset="utf-8">
<title> ?? ? ??! </title>
<meta name="viewport" content="width = device-width, ?? ??? = 1">


	<h1> ????? ??! </h1>
	<fig> <img src="<https://images.dog.ceo/breeds/corgi-cardigan/n02113186_1030.jpg>" alt="cardigan corgi"> <figcaption> ????? corgi! </figcaption> 
	<p> ? ?? ???? ??? ??. </p>

</fig>

? ??? ?? ?? ???? ??? ???? ??? ?? ?????. ??? ??? PHP ??? ????? ?? ?? ??? ?????!