diff --git a/src/markdown/2021-07-27_mdch2.md b/src/markdown/2021-07-27_mdch2.md index 4dddc48..0259372 100644 --- a/src/markdown/2021-07-27_mdch2.md +++ b/src/markdown/2021-07-27_mdch2.md @@ -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 `whatever` -> > ```markdown | strikethrough.md -> > test -> > ``` -> > ------ -> > Result: -> > -> > test -> -> > :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) + +[`homepage redirect with code highlight`](https://coderlg.codng.blog) + +[***hi***](https://coderlg.coding.blog) + +### 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 `whatever` +```markdown | strikethrough.md +test +``` +> :Buttons +> > :CopyButton + +------ +Result: +test + +### 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) @@ -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