Skip to content
Merged
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
251 changes: 143 additions & 108 deletions src/markdown/2021-07-27_mdch2.md
Original file line number Diff line number Diff line change
Expand Up @@ -16,115 +16,150 @@ Till now, you must have got the prerequisites. If you didn't, go to the last blo
3. Markdown has many flavours. The most comonly used Markdown flavor is `GitHub Flavored Markdown`.
The whole lesson in Markdown will be based on GitHub Flavored Markdown that is used in a lot of things in GitHub. [issues, PRs, `./README.md` files and more in GitHub](:Footnote)

To get things started, I have put a tabbed section set with the most important snippets for your Markdown perfection.
To get things started, I have put a section set with the most important snippets for your Markdown perfection.

# Learn section
### Bold and italic

Bold can be used to bolden a text while italic is... well, you know.
```markdown | bold+italic.md
**This is bold**
*This is italic*
__This is also bold__
_And this is also italic_
When combined, you get ***this*** or __*this*__ or even **_this_**
```
> :Buttons
> > :CopyButton

# Tab snippets
------
The result:

> :Tabs
> > :Tab title=Bold and italic
> >
> > Bold can be used to bolden a text while italic is... well, you know.
> > ```markdown | bold+italic.md
> > **This is bold**
> > *This is italic*
> > __This is also bold__
> > _And this is also italic_
> > When conbined, you get ***this*** or __*this*__ or even **_this_**
> > ```
> > ------
> > The result:
> >
> > **This is bold**
> >
> > *This is italic*
> >
> > __This is also bold__
> >
> > _And this is also italic_
> >
> > When combined, you get ***this*** or __*this*__ or even **_this_**
> > ------
>
> > :Tab title=Tasks
> >
> > Tasks are a way in Markdown, especially the GitHub flavored one to make a checklist.
> > It can be useful in a task list for a new feature in GitHub.
> > ```markdown | tasks.md
> > - [ ] put a space in the parenthesis
> > - [x] tasks that are done have an x instead of a space inside the parenthesis
> > this is in code mode. let's switch now!
> > ```
> > ------
> > Result(***put this in Typora***):
> >
> > - [ ] put a space in the ***parenthesis***
> > - [x] tasks that are done have an x instead of a space inside the ***parenthesis***
> > -----
>
> > :Tab title=Headers
> >
> > headers are useful in Readmes for bold text with just this: `# `
> > used as:
> > ```markdown | Headers.md
> > # h1
> > ## h2
> > ### h3
> > #### h4
> > ##### h5
> > ###### h6
> > ```
> > Result:
> >
> > # h1
> > ## h2
> > ### h3
> > #### h4
> > ##### h5
> > ###### h6
> > only 6 sizes of headers
>
> > :Tab title=Strikethrough
> >
> > This is the only piece which needs the HTML tag `<s>whatever</s>`
> > ```markdown | strikethrough.md
> > <s>test</s>
> > ```
> > ------
> > Result:
> >
> > <s>test</s>
>
> > :Tab title=Bulleted and numbered points
> > ### Bulleted points
> > Bulleted points can be used if you want a concise list of points if you are studying.
> > ```markdown | bulleted-points.md
> > - hi
> > - my name is LG
> > - :laugh: :+1:
> > ```
> > -----
> > Result:
> >
> > - hi
> > - my name is LG
> > - :laugh: :+1:
> > ------
> > ### Numbered points
> > Same way you wrote questions and answers when you were young(not a joke)
> > ```markdown | numbered-points.md
> > 1. hi
> > 2. bye
> > 3. joking
> > ```
> > ------
> > Result:
> >
> > 1. hi
> > 2. bye
> > 3. joking
>
**This is bold**

*This is italic*

__This is also bold__

_And this is also italic_

When combined, you get ***this*** or __*this*__ or even **_this_**
------
### Links
Links are a fun way to share links in suspense way and in different ways too. You can highlight it like code highlights too. Bold italic are main here. Let's go(claps like GothamChess)!
```markdown | links.md
[homepage redirect](https://coderlg.coding.blog) <!--> Basic syntax of links -->
[`homepage redirect with code highlight`](https://coderlg.coding.blog) <!-->Code highlighted-->
[***hi***](https://coderlg.coding.blog) <!-->bold and italic, either one or both in any combination :)-->
```
> :Buttons
> > :CopyButton

The result:
[homepage redirect](https://coderlg.coding.blog)<!-- Basic syntax of links -->

[`homepage redirect with code highlight`](https://coderlg.codng.blog)<!--Code highlighted-->

[***hi***](https://coderlg.coding.blog)<!--bold and italic, either one or both in any combination :)-->

### Task list
Tasks are a way in Markdown, especially the GitHub flavored one to make a checklist.
It can be useful in a task list for a new feature in GitHub.
```markdown | tasks.md
- [ ] put a space in the parenthesis
- [x] tasks that are done have an x instead of a space inside the parenthesis
this is in code mode. let's switch now!
```
> :Buttons
> > :CopyButton

------
Result(***put this in Typora***):
- [ ] put a space in the ***parenthesis***
- [x] tasks that are done have an x instead of a space inside the ***parenthesis***
------
### Headers
Headers are useful in Readmes for bold text with just this: `# `
used as:
```markdown | Headers.md
# h1
## h2
### h3
#### h4
##### h5
###### h6
```
> :Buttons
> > :CopyButton

Result:

# h1
## h2
### h3
#### h4
##### h5
###### h6
`only 6 sizes of headers`

### Strikethrough
This is the only piece which needs the HTML tag `<s>whatever</s>`
```markdown | strikethrough.md
<s>test</s>
```
> :Buttons
> > :CopyButton

------
Result:
<s>test</s>

### Bulleted and numbered points
#### Bulleted points
Bulleted points can be used if you want a concise list of points if you are studying.
```markdown | bulleted-points.md
- hi
- my name is LG
- :laugh: :+1:
```
> :Buttons
> > :CopyButton

------
Result:
- hi
- my name is LG
- :laugh: :+1:
------
#### Numbered points
Same way you wrote questions and answers when you were young(not a joke)
```markdown | numbered-points.md
1. hi
2. bye
3. joking
```
> :Buttons
> > :CopyButton

------
Result:
1. hi
2. bye
3. joking

# Images
Images are interesting. Basically, you add it like a link but do it like this:
```markdown | image.md
![image!](./src/assets/images/markdown.png) <!-->takes from root dir-->
```
> :Buttons
> > :CopyButton

Result is this:
![image](./src/assets/images/markdown.png)

So, till now, we learnt:
# In the end...
We learnt:
1. The most famous flavor of Markdown [GitHub Flavored Markdown](:Footnote)
2. Syntax used mainly by devs in Markdown [`bold`, `italic`, `strikethrough`, `bulleted points`, `numbered points`, and last, `Headers`](:Footnote)

Expand All @@ -140,9 +175,9 @@ The [tags feature of Coding Blog Plugin](https://connect-platform.github.io/codi
> :Watermark

> :Buttons
> > :Button icon=true, label=code, url=https://github.com/coder-lg
> > :Button label=GitHub, url=https://github.com/coder-lg

Made and deployed by [`coding.blog`](https://coding.blog/)
Made and deployed by [`coding.blog`](https://coding.blog/) and CODEDOC
# Comments

> :DarkLight
Expand Down