Step 1: Add headings¶

What is Markdown? Markdown is a lightweight syntax for communicating on GitHub. You can format text to add a heading, lists, bold, italics, tables, and many other stylings. You can use Markdown in most places around GitHub such as:

Comments on issues, pull requests, and discussions
Files with the .md or .markdown extension
Snippets of text in Gists

What is a heading? A heading is a larger bit of text at the beginning of a section. There are six sizes.

Example¶

# This is an `<h1>` heading, which is the largest

## This is an `<h2>` heading

###### This is an `<h6>`heading, which is the smallest

⌨️ Activity: Create a markdown file¶

Open a new browser tab, and work on the steps in your second tab while you read the instructions in this tab.
In the top navigation, 按住Ctrl，点击 the Code tab.
Create a new branch with the following name:
```
start-blog
```
Above the files list, click the Add file button and select Create new file.
Use the following file name.
```
day-1.md
```
In the editor, on the first line use a level one heading to give the page a title.
```
# Daily Learning
```
Add a couple level 2 headings for the names of each of the blog posts.
```
## Morning Planning

## Review
```
Above the editor, click the Preview toggle to view the rendered version.
In the top right, click the Commit changes button and commit directly to the start-blog branch.

Step 2: Make a list¶

Markdown supports 3 types of common lists. They include:

Unordered - Bulleted list
Ordered - Number list
Task - Checkbox list

Unordered list¶

An unordered list is simple to show. Each item is placed on its own line using a -, *, or + character.

- Item 1
- Item 2
- Item 3

Item 1
Item 2
Item 3

Ordered List¶

A list is changed to ordered by using any number instead of the list character. Notice how markdown automatically handles the counting. Nice!

1. Step 1
2. Step 2
3. Step 3

Step 1
Step 2
Step 3

Task List¶

A task list is extends the unordered list to use check boxes.
Add empty brackets [ ] for incomplete tasks and filled brackets [x] for complete tasks. Note: The empty required space for empty brackets.

- [x] This task is complete
- [ ] This task is not complete

This task is complete
This task is not complete

TIP Issues and pull requests can use task syntax for conveying progress.

⌨️ Activity: Add ideas and goals to our morning plan¶

On the start-blog branch, open the day-1.md file for editing.

Add the following task list below morning planning level two heading to track goals you want to achieve.

- [ ] Check out the [github blog](https://github.blog/) for topic ideas.
- [ ] Learn about [GitHub Pages](https://skills.github.com/#first-day-on-github).
- [ ] Convert my first blog post into an actual webpage.

Use the Preview tab to check your Markdown formatting.
In the top right, click the Commit changes button and commit directly to the start-blog branch.

Step 3: Add a code sample¶

Let's learn about code blocks and syntax highlighting based on the language.

TIP Many programming languages are supported. Try testing out some other file extension types!

Example: Terminal Command¶

```bash
git clone https://github.com/skills/communicate-using-markdown

```shell
git clone https://github.com/skills/communicate-using-markdown

Example: Javascript Code¶

var myVar = "Hello, world!";

var myVar = "Hello, world!";

Activity: Adding a code example¶

On the start-blog branch, open the day-1.md file for editing.

Below Review level two heading add the following entry recording an awesome code snippet you just learned from the GitHub Blog.

Convert an image or video from dark mode to light mode using [ffmpeg](https://www.ffmpeg.org)

```bash
ffmpeg -i input.mp4 -vf "negate,hue=h=180,eq=contrast=1.2:saturation=1.1" output.mp4

Use the Preview tab to check your Markdown formatting.
In the top right, click the Commit changes button and commit directly to the start-blog branch.

Step 4: Add an image¶

Let's learn how to include images in markdown, using relative urls, absolute urls, sizing, and basic positioning.

Regular Markdown¶

Images can be displayed by providing a relative URL to a file in the repository or an absolute URL (to anywhere on the internet).

The descriptive text in the square brackets is displayed if the image is unable to load, and it is also read aloud for people using screen readers.

Note: Markdown syntax doesn't provide an option to change the image size.

Example¶

Relative URL to an image in the repository:

![Mona the Octocat](myrepo/original.png)

Absolute URL to an image on the internet:

![Mona the Octocat](https://octodex.github.com/images/original.png)

Simple HTML¶

You will often find the need to reduce the size of an image or simply place it next to some text. Regular HTML syntax provides some additional flexibility.

The alt field specifies the alternative text.
The src field specifies the source URL of the image.
A width and/or height field can be used to specify the size in pixels.
The align field allows setting a position (left, right)

<img alt="Mona the Octocat" src="https://octodex.github.com/images/original.png"
width="200" align="right">

⌨️ Activity: Add some decoration¶

Our blog post is quite simple right now. Let's add some decoration.

On the start-blog branch, open the day-1.md file for editing.

Insert an image below the Morning Planning level 1 heading.

![Cloudy morning](https://octodex.github.com/images/cloud.jpg)

Use the Preview tab to check your Markdown formatting.
- Notice the image is too large for our purpose.
- Replace the simple markdown version with an HTML version that includes size and position info. Much better!
```
<img alt="Cloudy morning" src="https://octodex.github.com/images/cloud.jpg" width="100" align="right">
```
In the top right, click the Commit changes button and commit directly to the start-blog branch.