I prefer to use Markdown
for basically everything I can, from writing a personal blog, tech articles and even my resume. There are only a few syntaxes that I most commonly use. This post is intended for those who are new to Markdown
or need a refresh on its syntax.
Heading and List
#
symbol is used for creating a heading. #
is for H1
. ##
is for H2
. You can use up to 6 #
for H6
You can make an unordered list with -
or *
. To make an ordered list, use a a number. Below is an example of using heading and list.
#Why markdown? (H1)
##Reasons I like markdown (H2)
- Minimal, clean and less distraction for writing
- Good support for code blocks
- Can be exported to many formats including html, pdf, doc, latex, etc.
##My favorite markdown editors (H2)
1. Typora (Mac, Window)
2. Caret (Mac, Window)
3. Bear (Mac app store)
Why markdown?
Reasons I like markdown
- Minimal, clean and less distracting for writing
- Good support for code blocks
- Can be exported to many formats including html, pdf, doc, latex, etc.
My favorite markdown editors
- Typora (Mac, Window)
- Caret (Mac, Window)
- Bear (Mac app store)
Code Blocks
You can call out code or a command within a sentence with single backticks. The text within the backticks will not be formatted. To format code or text into its own distinct block, use triple backticks.
``` def foobaz(): print("you can use ` for code snippet") ```
def foobaz():
print("you can use ` for code snippet")
Todo List
- [ ] Write an article weekly
- [ ] Repair windshield wipers of car π
- [x] Publish **this** to dev.to
- [ ] Write an article weekly
- [ ] Repair windshield wipers of car and add washer fluid π
- [x] Publish this to dev.to
Styling
**STRONG**
*emphasis*
~~strikethrough~~
Math $e=mc^2$
Use *** or - - - for horizontal rule
STRONG
emphasis
strikethrough.
Math $e=mc^2$
Using Emoji
Typing :
will bring up a list of suggested emojis, i.e :EMOJICODE:
. For a full list of emojis, check out https://www.webpagefx.com/tools/emoji-cheat-sheet/
`:unicorn:` :unicorn:
`:+1:`:+1:
:unicorn:
π¦ (dev.to does not support emoji?)
:+1:
π
Link and Image
There are two ways to make links for text and images, inline and references.
Inline Link [link title](uri)
. Inline link can be be absolute or relative URIs (link within local resources).
Reference link [link][refereceID]
is different from inline link in that it is using a []
for the second part instead of ()
. Also, you need to add an id
reference later, so that markdown can link them together.
[referenceID] : www.google.com "Google"
Image is similar to inline and reference links, but there is an extra !
in in front.
Syntanx ![Cat Image](catURI)
or ![Dog Image][huskyDogID]
[Reference link to dev.to website](dev.to)
![image](https://i2.wp.com/fullstop360.com/blog/wp-content/uploads/2017/05/design-quotes-for-inspiration-2.jpg?)
Reference Link to dev.to website
Footnote References[^1]:
Footnote References1:
More
You can Use [toc] to create Table of Content.
Inline html and <pre>
tags <span style="color: red">Red Text</span>
Red Text (should be red on fully supported Markdown editor)
Quote
>And so, my fellow Americans: ask not what your country can do for you β ask what you can do for your country
And so, my fellow Americans: ask not what your country can do for you β ask what you can do for your country
Top comments (7)
This really needs to show how you put a code block in a list without the list numbers starting over on the next item. Every markdown editor does it differently and it's annoying to trial and error without a live preview
npm install
I see what you mean. I use an app called Typora for WYSWYG
I've posted a few markdown tips, and since then have put up Ruby gem markdown_helper, whose code and doc are on GitHub.
awesome. Thanks for sharing.
In my blogs on DEV.to, I want to add sections or info boxes, I tried to use Github syntax like :
> [!NOTE]
Outcome:
But it does not result in the desired outcome.
Desired outcome:
Is it possible to create sections?
Thanks for the post, it is really great but I have a question, how did you add that car?