render posts with mermaid diagram

[thanhngan22]

Body

I have an issue with rendering my posts that contain mermaid code,
I included this code in index.html

    <script src="https://unpkg.com/mermaid/dist/mermaid.min.js"></script>

    <script>
      mermaid.initialize({
        startOnLoad: true,
        theme:
          document.body.classList.contains('vscode-dark') ||
          document.body.classList.contains('vscode-high-contrast')
            ? 'dark'
            : 'default',
      });
    </script>

then I load data from an HTML file that contains graph LR mermaid code and I set innerHTML with that content

const Content: React.FC<IProps> = () => {
    useLayoutEffect(() => {
      const path = "data/blogs/readme.html";
    fetch(path)
      .then((res) => res.text())
      .then((data) => {
        console.log("data readme.html: ", data);
        // set inner HTML
        const blogMain = document.querySelector(".blog__main");
        if (blogMain !== null) {
          blogMain.innerHTML = data;
        }
      })
      .catch((error) => {
        console.error("Error fetching readme.html:", error);
      });
    }, []);

  return (
    <div className="content__wrapper w-3/5 overflow-y-auto overflow-x-hidden">
      <div className="blog__main"></div>
    </div>
  );
};

when loading page, that code converted and showed a mermaid diagram but it's returned as initially immediately when finished loading page

I don't know what's wrong with my code, hope to get help from everyone

Guidelines

• I have read and understood this category's guidelines before making this post.