This blog is a demo for github project InteractiveCodeNote
Actually, 😂 I created this project for learning data structures and algorithms. I wanted to take notes and record the algorithm code I learned while being able to run the code as I write the notes.

Test it on your own

How to Use Interactive Code Note Embedding in Markdown Editors

Embedding Interactive Code Note in your markdown editors is straightforward. Here’s how you can integrate it with popular markdown editors:

Typora
To embed an Interactive Code Note block in Typora, you need to use an iframe tag in your markdown file. Here is an example:

<iframe id="go-editor-1" src="path/to/your/index.html?noteId=yourcodeid" style="width:100%;         
height:500px; border:none; background-color: #f5f5f5;" frameborder="0"></iframe>

noteId: stands for the name of the code block, which will be used on saving codes, if you do not need to save codes nevermind.
path/to/your/index.html: which is the path of your index.html which is located at /backend folder. If u are local user, just type the path or localhost:port, else ip/domain:port is recommended
Feel free to modify the styles to match your preferred aesthetics.

Benefits of Using Interactive Code Note

Using Interactive Code Note offers several advantages:

• Interactive Learning: Perfect for educators and students, it provides an interactive way to learn and teach coding.
• Enhanced Documentation: Developers can create rich, executable documentation that can be shared and collaborated on.
• Seamless Integration: Easily integrates with popular markdown editors and blogging platforms, making it versatile for various use cases.
• Version Control: Keep track of different versions of your code snippets, making it easy to revert to previous states.