Markdown Guide

Markdown Guide: Reference going over markdown syntax.

Main Sections to have in a Project Repository

# <Project Title>

<Project description>

## Latest Showcase Video

[![Latest Showcase](https://img.youtube.com/vi/tUj5wLWHExM/0.jpg)](https://www.youtube.com/watch?v=tUj5wLWHExM)

## Journal

- 2020.05.21 <progress summary>[Showcase](Video URL)

## References

- [<title>](<url>)

To Jump to headers in markdown:

If you have a header such as this in markdown:

## The Header

This will generate an implicit id #the-header (replace internal spaces with hyphens and make lowercase).

To navigate to this id, you can create the link like this:

[Link to Header](#the-header)

This is equivalent to:

<a href="#the-header">Link to Header</a>

If your Markdown file (Example: README.md) is published to GitHub, then you can find the id’s of sections by hovering your mouse on the link to see the link icon.

Clicking on the link icon will navigate to that secton via url. You can retrieve the id from the URL.

Adapted from: How to link to a named anchor in Multimarkdown?

Add an Image to Markdown

You can add images by using html in markdown. Below, using html an image is added. Note, you can resize the image via css.

Here you can add a relative path to a photo in a directory or you could add the url to a photo.

![<alt text (displayed when you mouse over image)>](/assets/images/philly-magic-gardens.jpg "Description text(displayed when you mouse over image)")

or

<img src="./relativePath">

Demo:

Markdown:

<img src="./assets/2020-06-07_Markdown-Link-Icon.png">

Markdown output:

Demo:

Markdown:

<img src="https://66.media.tumblr.com/5c606bd522d2b6ceead4a2702e59ccb0/tumblr_oeuhzriqsG1v56zzqo1_1280.jpg">

Markdown output:

Cat image reference: creative-commons-cats.tumblr

Linking an image

[![Alt text](<Image URL> "Cat image from creative commons")](<Website Link opened when clicked>)

Input Demo

[![A Cat](https://66.media.tumblr.com/5c606bd522d2b6ceead4a2702e59ccb0/tumblr_oeuhzriqsG1v56zzqo1_1280.jpg "Cat image from creative commons")](https://creative-commons-cats.tumblr.com/)

Output Demo

A Cat

Add YouTube Video to Markdown

This markdown retrieves the image thumbnail of a YouTube video. When the image is clicked, the video will be opened on YouTube.

[![Title](https://img.youtube.com/vi/tUj5wLWHExM/0.jpg)](https://www.youtube.com/watch?v=tUj5wLWHExM)

Demo:

Markdown:

[![Showcase](https://img.youtube.com/vi/tUj5wLWHExM/0.jpg)](https://www.youtube.com/watch?v=tUj5wLWHExM)

Markdown output:

Latest Showcase

Markdown Rules

md014

Journal