A few Markdown tips
Tags: markdown, tips
Published: 2021-05-21 08:59:56


Here are a few markdown tricks which I recently discovered

## Make a button

| [Button](https://dev.to/siddharthshyniben) |
|----------|

| [Button](https://dev.to/siddharthshyniben) | [Group](https://dev.to/siddharthshyniben) |
|----------|----------|

Doesn't that look cool? 

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

```markdown
| [Button](https://dev.to/siddharthshyniben) |
|----------|
```

And for groups:

```markdown
| [Button](https://dev.to/siddharthshyniben) | [Group](https://dev.to/siddharthshyniben) |
|----------|----------|
```

Check out [Centering](#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:

```markdown
| Lorem ipsum... |
|  :------:  |
```

And here's the one with the header:

```markdown
| Important Header! |
|  :------:  |
| Lorem ipsum... |
```

## Centering

<center>
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
</center>

## 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 <a name="link">link which goes nowhere</a>

(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](#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!