Shaokang's Blog

Markdown is based on html, so whatever html have markdown can have, <iframe> is the most common one. I will show some example by using iframe below:

Map

Use the following code to embedded a map:

1
2
3
4
5
6
<iframe id="inlineFrameExample"
title="Inline Frame Example"
width="100%"
height="500"
src="https://www.openstreetmap.org/export/embed.html?bbox=-0.004017949104309083%2C51.47612752641776%2C0.00030577182769775396%2C51.478569861898606&layer=mapnik">
</iframe>

Appearance:

Youtube

Use the following code to embedded a youtube, other video platform would have similar function. This is an example for JavaScript Tutorial for Beginners: Learn JavaScript in 1 Hour :

1
<iframe width="100%" height="550" src="https://www.youtube.com/embed/W6NZfCO5SIk" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

Appearance:

Document

Use the following code to embedded a microsoft document (you may get the link through your onedrive panel -> Embed in your personal onedrive, other version/driver should have similar function). The following code would embed our schedule:

1
<iframe width="100%" height="500" frameborder="0" scrolling="no" src="https://onedrive.live.com/embed?resid=C4FE7ED776152B7%21179112&authkey=%21AIBpqBFVsOqASe0&em=2&wdAllowInteractivity=False&wdInConfigurator=True"></iframe>

Appearance:

Games

To be more creative, you can even embedded some games, such as the following 3D games by using glitch using this code: Below code is for project a-blast. You may create your own on glitch or just on any website server and embed to here.

1
<iframe width="100%" height="500" frameborder="0" scrolling="no" src="https://aframe.io/a-blast/"></iframe>

Appearance:

Conslusion

As markdown is based on html, there are much more areas could be explored. Be creative.

 Comments