DEV Community

loading...

A few Markdown tips

Siddharth
13. Coding for a hobby
・4 min read

Here are a few markdown tricks which I recently discovered

Make a button

Doesn't that look cool?

It's just a hack of the table. Here's the source:

| [Button](https://dev.to/siddharthshyniben) |
|----------|
Enter fullscreen mode Exit fullscreen mode

And for groups:

| [Button](https://dev.to/siddharthshyniben) | [Group](https://dev.to/siddharthshyniben) |
|----------|----------|
Enter fullscreen mode Exit fullscreen mode

Check out Centering for how to center stuff

Make a box

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras pulvinar vehicula erat quis tincidunt. Mauris sed elementum leo. Quisque ex neque, ullamcorper ut quam at, aliquet vehicula dolor. Donec nec ultricies mauris. Nam eros nisl, placerat sit amet gravida at, condimentum sed justo. Duis eget placerat diam. Duis sed turpis non erat porta vehicula ac non massa. Maecenas ac turpis quis nibh dapibus hendrerit. Phasellus a iaculis dolor, ut cursus nibh. Cras et risus ut mauris accumsan imperdiet vel eu dolor. Aliquam porta tortor lectus, sed elementum augue lacinia id.
Important Header!
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras pulvinar vehicula erat quis tincidunt. Mauris sed elementum leo. Quisque ex neque, ullamcorper ut quam at, aliquet vehicula dolor. Donec nec ultricies mauris. Nam eros nisl, placerat sit amet gravida at, condimentum sed justo. Duis eget placerat diam. Duis sed turpis non erat porta vehicula ac non massa. Maecenas ac turpis quis nibh dapibus hendrerit. Phasellus a iaculis dolor, ut cursus nibh. Cras et risus ut mauris accumsan imperdiet vel eu dolor. Aliquam porta tortor lectus, sed elementum augue lacinia id.

Once again, this is also a hack of the table.

Here's the source:

| Lorem ipsum... |
|  :------:  |
Enter fullscreen mode Exit fullscreen mode

And here's the one with the header:

| Important Header! |
|  :------:  |
| Lorem ipsum... |
Enter fullscreen mode Exit fullscreen mode

Centering


To center stuff, wrap them in center tags. The only problem is that you can add markdown in center tags, but some tricks (like the button trick) don't work

On GitHub, you can <p align="center"> instead

Linking anywhere

(Dummy text to separate other stuff from the link)

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras pulvinar vehicula erat quis tincidunt. Mauris sed elementum leo. Quisque ex neque, ullamcorper ut quam at, aliquet vehicula dolor. Donec nec ultricies mauris. Nam eros nisl, placerat sit amet gravida at, condimentum sed justo. Duis eget placerat diam. Duis sed turpis non erat porta vehicula ac non massa. Maecenas ac turpis quis nibh dapibus hendrerit. Phasellus a iaculis dolor, ut cursus nibh. Cras et risus ut mauris accumsan imperdiet vel eu dolor. Aliquam porta tortor lectus, sed elementum augue lacinia id

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras pulvinar vehicula erat quis tincidunt. Mauris sed elementum leo. Quisque ex neque, ullamcorper ut quam at, aliquet vehicula dolor. Donec nec ultricies mauris. Nam eros nisl, placerat sit amet gravida at, condimentum sed justo. Duis eget placerat diam. Duis sed turpis non erat porta vehicula ac non massa. Maecenas ac turpis quis nibh dapibus hendrerit. Phasellus a iaculis dolor, ut cursus nibh. Cras et risus ut mauris accumsan imperdiet vel eu dolor. Aliquam porta tortor lectus, sed elementum augue lacinia id

Here's a link which goes nowhere

(Dummy text to separate other stuff from the link)

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras pulvinar vehicula erat quis tincidunt. Mauris sed elementum leo. Quisque ex neque, ullamcorper ut quam at, aliquet vehicula dolor. Donec nec ultricies mauris. Nam eros nisl, placerat sit amet gravida at, condimentum sed justo. Duis eget placerat diam. Duis sed turpis non erat porta vehicula ac non massa. Maecenas ac turpis quis nibh dapibus hendrerit. Phasellus a iaculis dolor, ut cursus nibh. Cras et risus ut mauris accumsan imperdiet vel eu dolor. Aliquam porta tortor lectus, sed elementum augue lacinia id

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras pulvinar vehicula erat quis tincidunt. Mauris sed elementum leo. Quisque ex neque, ullamcorper ut quam at, aliquet vehicula dolor. Donec nec ultricies mauris. Nam eros nisl, placerat sit amet gravida at, condimentum sed justo. Duis eget placerat diam. Duis sed turpis non erat porta vehicula ac non massa. Maecenas ac turpis quis nibh dapibus hendrerit. Phasellus a iaculis dolor, ut cursus nibh. Cras et risus ut mauris accumsan imperdiet vel eu dolor. Aliquam porta tortor lectus, sed elementum augue lacinia id

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras pulvinar vehicula erat quis tincidunt. Mauris sed elementum leo. Quisque ex neque, ullamcorper ut quam at, aliquet vehicula dolor. Donec nec ultricies mauris. Nam eros nisl, placerat sit amet gravida at, condimentum sed justo. Duis eget placerat diam. Duis sed turpis non erat porta vehicula ac non massa. Maecenas ac turpis quis nibh dapibus hendrerit. Phasellus a iaculis dolor, ut cursus nibh. Cras et risus ut mauris accumsan imperdiet vel eu dolor. Aliquam porta tortor lectus, sed elementum augue lacinia id

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras pulvinar vehicula erat quis tincidunt. Mauris sed elementum leo. Quisque ex neque, ullamcorper ut quam at, aliquet vehicula dolor. Donec nec ultricies mauris. Nam eros nisl, placerat sit amet gravida at, condimentum sed justo. Duis eget placerat diam. Duis sed turpis non erat porta vehicula ac non massa. Maecenas ac turpis quis nibh dapibus hendrerit. Phasellus a iaculis dolor, ut cursus nibh. Cras et risus ut mauris accumsan imperdiet vel eu dolor. Aliquam porta tortor lectus, sed elementum augue lacinia id

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras pulvinar vehicula erat quis tincidunt. Mauris sed elementum leo. Quisque ex neque, ullamcorper ut quam at, aliquet vehicula dolor. Donec nec ultricies mauris. Nam eros nisl, placerat sit amet gravida at, condimentum sed justo. Duis eget placerat diam. Duis sed turpis non erat porta vehicula ac non massa. Maecenas ac turpis quis nibh dapibus hendrerit. Phasellus a iaculis dolor, ut cursus nibh. Cras et risus ut mauris accumsan imperdiet vel eu dolor. Aliquam porta tortor lectus, sed elementum augue lacinia id

Now here's a link which links to the earlier link

To do this, create a link which has a name attribute (something like "something-here").

Then, you can link to it like [Link](#name-attribut-content-here)

That's all for now. I might add a few more posts with some more ideas!

Thanks for reading!

Discussion (2)

Collapse
sidcraftscode profile image
Siddharth Chaudhary (he/him)

Wow thanks

Collapse
siddharthshyniben profile image
Siddharth Author

Welcome 😁