Wednesday 27 April 2016

Markdown: Images

There are two ways to include images in markdown document.
1.   Inline
2.   Reference

Inline Approach
Following is the syntax to include inline image.

![Alt text](/path/to/img.jpg)

![Alt text](/path/to/img.jpg "Optional title")


images.md
![My Trip To Antharagange](/Users/harikrishna_gurram/Movies/photos/Anthara_Ganage/IMG_20151219_075454688_HDR.jpg)

![My Trip To Avanibetta](/Users/harikrishna_gurram/Movies/photos/IMG_20150906_091534909_HDR.jpg)


Following is the html generated for above markdown file.
<?xml version='1.0' encoding='utf-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body>
  <p>
    <img alt="My Trip To Antharagange" border="0"
      src="/Users/harikrishna_gurram/Movies/photos/Anthara_Ganage/IMG_20151219_075454688_HDR.jpg" />
  </p>
  <p>
    <img alt="My Trip To Avanibetta" border="0"
      src="/Users/harikrishna_gurram/Movies/photos/IMG_20150906_091534909_HDR.jpg" />
  </p>
</body>
</html>


Reference Approach
In reference approach, you need to define an identifier first, use this identifier as reference.

[id]: url/to/image  "Optional title attribute"
![Alt text][id]

images.md
[id1]: /Users/harikrishna_gurram/Movies/photos/Anthara_Ganage/IMG_20151219_075454688_HDR.jpg  "Anthara Gange Hills"
[id2]: /Users/harikrishna_gurram/Movies/photos/IMG_20150906_091534909_HDR.jpg  "Avanibetta hills"

![My Trip To Antharagange][id1]

![My Trip To Avanibetta][id2]

Following is the html code generated for above markdown file.
<?xml version='1.0' encoding='utf-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body>
  <p>
    <img alt="My Trip To Antharagange" title="Anthara Gange Hills"
      border="0"
      src="/Users/harikrishna_gurram/Movies/photos/Anthara_Ganage/IMG_20151219_075454688_HDR.jpg" />
  </p>
  <p>
    <img alt="My Trip To Avanibetta" title="Avanibetta hills" border="0"
      src="/Users/harikrishna_gurram/Movies/photos/IMG_20150906_091534909_HDR.jpg" />
  </p>
</body>
</html>





Previous                                                 Next                                                 Home

No comments:

Post a Comment