Markdown Features Demo

This post demonstrates the enhanced markdown capabilities of this blog, specifically the ability to render inner HTML and Mermaid.js diagrams.

Standard Markdown

We still support all the standard markdown features:

Bold text and italic text
Links
Lists (like this one)
Code blocks:

console.log("Hello, World!");

Inner HTML Support

We can now embed raw HTML directly into the markdown. This is useful for custom styling or components that aren't supported by standard markdown.

Custom HTML Box

This content is rendered using a raw <div> with inline styles. It allows for more flexible layouts and designs within your posts.

Mermaid.js Diagrams

We also support Mermaid.js for creating diagrams and visualizations using code blocks.

Flowchart

graph TD A[Start] --> B{Is it working?} B -- Yes --> C[Great!] B -- No --> D[Debug] D --> B

Sequence Diagram

sequenceDiagram participant User participant Blog participant Mermaid User->>Blog: Visits Post Blog->>Mermaid: Finds .mermaid class Mermaid->>Blog: Renders SVG Blog->>User: Shows Diagram

Pie Chart

pie title Content Distribution "Markdown" : 60 "HTML" : 20 "Mermaid" : 20

Conclusion

These new features allow for richer and more interactive content in your blog posts!

Note this was done as I was testing the new Google Anti-Gravity IDE