DEV Community

IssueHunt profile image Daniel
Daniel for IssueHunt

Posted on • Updated on

Boost your productivity using Markdown.

#markdown #productivity #beginners #tutorial

What’s Markdown?

Markdown is a lightweight markup language with plain text formatting syntax. It is designed so that it can be converted to HTML and many other formats using a tool by the same name.
from Wikipedia

Introducing the markdown formatting ⛷

1. Heading 

# h1
## h2
### h3
standard
Enter fullscreen mode Exit fullscreen mode

heading

2. Emphasis 

*Italic type*
**Bold**
~~Negative~~
Enter fullscreen mode Exit fullscreen mode

emphasis

3. Fold

Fold the long sentences.

<details><summary>Boostnote is a notepad corresponding to markdown notation, which is a tool for organizing and sharing information.</summary>
- Features - <br>
· Search function to find memos in one shot
· Supports markdown notation <br>
· Support for Mac, Windows, Linux, iOS, Android <br>
· Export and import to Plain text (.txt), Markdown (.md) format <br>
· Supports PDF saving <br>
· Can be used offline <br>
· Synchronize to dropbox etc. with setting <br>
· Supports theme colors and numerous fonts <br>
</details>
Enter fullscreen mode Exit fullscreen mode

fold-1
fold-2

4. List 

- List 1
- List 2
* List 3
Enter fullscreen mode Exit fullscreen mode

list

5. Link

Put a text on the left and a url on the right.

[Boostnote](https://boostnote.io)
Enter fullscreen mode Exit fullscreen mode

link

6. Check box 

- [x] Task 1
- [ ] Task 2
Enter fullscreen mode Exit fullscreen mode

check

7. Quotation 

> Quotation
> Quotation Quotation
Enter fullscreen mode Exit fullscreen mode

Quote

8. Horizontal line 

* * *
***
--------
Enter fullscreen mode Exit fullscreen mode

horizontal

9. Image 

![Image title](https://boostnote.io/assets/img/logo.png)
Enter fullscreen mode Exit fullscreen mode

image

10. Source code 

Render: function () {
  Return (
    <div className="commentBox">
      <h1> Comments </h1>
      <CommentList data={this.state.data} />
      <CommentForm onCommentSubmit={this.handleCommentSubmit} />
    </div>
  );
}
Enter fullscreen mode Exit fullscreen mode

code

11. Table 

|Fruits|Price|
|:--|:--|
|Apple|1$|
|Grapes|4$|
|Orange|2$|
|Lemon|1$|
|Peach|3$|
|Melon|20$|
Enter fullscreen mode Exit fullscreen mode

table

These are the basic markdown formatting.
In addition to above, you can also complex formatting like following in Boostnote.

Latex

Mathematical formatting.

$$$
\mathrm{e}^{\mathrm{i}\theta} = \cos(\theta) + \mathrm{i}\sin(\theta)
$$$
Enter fullscreen mode Exit fullscreen mode

latex

Flowchart 

st=>start: Start:>http://www.google.com[blank]
e=>end:>http://www.google.com
op1=>operation: My Operation
sub1=>subroutine: My Subroutine
cond=>condition: Yes or No?:>http://www.google.com
io=>inputoutput: catch something…
st->op1->cond
cond(yes)->io->e
cond(no)->sub1(right)->op1
Enter fullscreen mode Exit fullscreen mode

flowchart

Sequence 

Title: Here is a title
A-> B: Normal line
B -> C: Dashed line
C -> D: Open arrow
D -> A: Dashed open arrow
Enter fullscreen mode Exit fullscreen mode

sequence

Boost Note for Teams

We’ve revealed a new collaboration wiki service called BoostHub.

It will be a collaboration version of Boost Note but much more powerful. The feature, called “Custom Blocks”, will let you make custom react components, integrated with various 3rd party app apis like Github and Trello, and embed them into markdown contents like MDX.

To know more, please check this slide.

how-to-use-boosthub

Top comments (10)

Collapse
 
fire profile image
fire •

Given that there are many different types of markdown and further feature segmentation based on the library implementing a specific version... which version of Markdown is being referred to in this article? Features like latex, flow charts, sequences, et al., aren't standard, and up until now I've never actually seen them included in any implementations.

Collapse
 
belhassen07 profile image
Belhassen Chelbi •

I use Jekyll as a static site generator, so after a good effort making a whole template , Jekyll offers a content management solution using markdown, as a front-end web developer who doesn't like CMSs , liquid Markdown was really helpful and I really love it, your post remembered me of that moment of "coup de foudre".
great post ♥

Collapse
 
aspittel profile image
Ali Spittel •

Awesome! I didn't know that you could use LaTeX in Markdown!

Collapse
 
daniel123 profile image
Daniel •

I'm glad to hear that ;)

Collapse
 
ben profile image
Ben Halpern •

Hmmm the dev.to markdown does not currently support LaTeX, I think we overlooked this altogether. We'll have to look into making this happen.

Thread Thread
 
aspittel profile image
Ali Spittel •

I looked into GitHub's and they don't either -- I think there are a lot of security issues with it. Would be super nice to have an easy way to write equations in markdown even if it wasn't LaTeX both here and on GH!

Collapse
 
micuffaro profile image
Michael •

I write my Markdown docs in vim. Which Mac OS app would you recommend to display the markdown results? i push to different repositories, such as github and bitbucket, or use things like Macdown or sublime text, and the results of the displayed MD is always different in some little ways. Unsure if i am doing anything wrong.

Collapse
 
chrisvasqm profile image
Christian Vasquez •

Great collection, Kaz. I'll make sure to share it with my coworkers :)

Collapse
 
pranay_rauthu profile image
pranay rauthu •

I never thought sequence diagrams & flowcharts are possible with markdown. Also, Boostnote is amazing.

Collapse
 
haripriya2002145 profile image
Haripriya2002145 •

How to include videos in dev.to tutorials, how to get the link of the video

Read next

andrewbaisden profile image

Quntis Remote Control Dual Source Light Bar Tech Review

Andrew Baisden -

sameeranthony profile image

Exploring the Versatility of Web Scraping APIs for Data Extraction

sameer -

aooohan profile image

Managing JDKs on native Windows (not WSL)

Han Li -

sh20raj profile image

CSS Text Handling: text-overflow, overflow-wrap, and More!

Sh Raj -