DEV Community

Cover image for Learning Markdown
Jaswant
Jaswant

Posted on

Learning Markdown

Why this blog

I am learning as i want to quickly make notes in any note making app preferably obsidian. I want to avoid the time wasted in clicking on the ui styles option where i can easily use the commands to make the style quickly and feel like a hacker and look cool, and also learning in public is the new cool thing to do so why not.

Markdown components

  1. Paragraphs: There is no special command for paragraph, it's just plain text. You just keep on writing and all of it will be paragraph. Nothing cool about paragraphs.

  2. Bold: There are multiple ways to bold any text as mentioned by the instructor on scrimba. One way is to wrap the text around double asterisks(*) and another way is to use double underscore.
    Love*isbold or L_ove_. For some reason, dev.to's editor doesn't allow us to bold in between of a word.
    Preferably use the *
    format as it is a standard.

  3. Italic: We have to wrap it inside single asterik or single underscore. I guess asterik one should be standard as it is bold.

  4. Strikethrough: We have to wrap it inside double tilde(~)

5. Horizontal rules/line: Very simple just add three hyphens. Note: There should be space of one line between any characters and the three hypens, if not it will just style the above line as heading like this. The horizontal line that you see has atleast one empty line above it.


  1. Blockquote: Adding quotes is the coolest part. Its very simple, just a carrot(>) on a new line and you will be cool looking quote.

Bing chilling

  1. Lists

Lists can be ordered or unordered as below:

  • Ordered Lists: Its the same as what it looks on preview. We just have to write the number then a dot and a space and then the content.
1. List item 1
2. List item 2
Enter fullscreen mode Exit fullscreen mode
  • Unordered Lists: Same way as ordered list, the only difference being we can asterik(*), hyphen(-) or a plus sign(+). I prefer hyphen as it just looks better. Note: For nested lists you just have to add indent and then follow the same procedure.
    • List item 0
    • List item 0.1
    • List item 1
      1. Funfact: These two nested ordered lists are numbered with 8 and 9 but you will still see them as 1 and 2. You can add any number you want, but the after compiling it will take the natural order by starting with 1.
      2. List subitem 2
    • List item 2
  1. Code Blocks:
Just surrounding the text with three backticks (~)

Enter fullscreen mode Exit fullscreen mode

Depending on the markdown version you can also language name such as js or json after the triple backticks which will add more context and indent the code properly.

  1. Image: Adding image takes more characters though. You have to start with exclamation ! then two square brackets, these square brackets will contain the alt text i.e. the text that will be shown when it's not possible to load the image. Then the image url is wrapped in two round brackets.

Example Code:

![alt text](https://media2.dev.to/dynamic/image/quality=100/https://dev-to-uploads.s3.amazonaws.com/uploads/logos/resized_logo_UQww2soKuUsjaOGNB38o.png) 

Enter fullscreen mode Exit fullscreen mode

Result:

alt text

  1. Emails : To add email style, we have to wrap the email in less than(<) and greater than(>) symbols. example@gmail.com

  2. Links : Literally same as image but without the exclamation.
    We add two square brackets and inside it will be the text that will be previewed and then the url wrapped inside two round braces.

My Company's Website

Code:

[My Company's Website](https://www.texau.com/)
Enter fullscreen mode Exit fullscreen mode
  1. Tables:
Left Center Right
1 2 3

Code:

| Left | Center | Right |
| --- | --- | --- |
| 1    | 2      | 3     |
Enter fullscreen mode Exit fullscreen mode

Top comments (0)