DEV Community

Gabor Szabo
Gabor Szabo

Posted on

View (Markdown) Source button on DEV

One of the best ways to learn anything is to be able to look at the source code. Browsers provide an easy way to see the HTML source code of a web site.

I think it would be nice to have a button (maybe behind the ... on each article and each comment) that you could click and see the Markdown source of it.

For example I'd like to be able to see how the table of contents was added to this article.

I think this would be a nice way to help people improve their knowledge of Markdown

Top comments (10)

Collapse
 
michaeltharrington profile image
Michael Tharrington

As for how you create a table of contents, here's some example Markdown that should help ya figure it all out. Feel free to post this into the editor and play around with it!

## Table of Contents
- [Heading 1](#this-text-needs-to-match-the-heading)
- [Heading 2](#heading-2)

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.


## This Text Needs to Match the Heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

### Heading 2

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Enter fullscreen mode Exit fullscreen mode
Collapse
 
cicirello profile image
Vincent A. Cicirello

Gabor, adding to Michael's example, if a heading has any symbols, the link to it drops them, including if it has a dash, lowercases everything and replaces spaces with dashes. For example, if the heading is:

## Heading with Hyphenated-word + another symbol
Enter fullscreen mode Exit fullscreen mode

The link would be:

[Some link text](#heading-with-hyphenatedword-another-symbol)
Enter fullscreen mode Exit fullscreen mode
Collapse
 
20jasper profile image
Jacob Asper

I use the "Markdown All in One" extension for vscode, and it will create and update a table of contents based on your headings! Here's the link if anyone is interested: marketplace.visualstudio.com/items...

Thread Thread
 
michaeltharrington profile image
Michael Tharrington

Oh wow, this is really dope! Appreciate ya chiming in with that, Jacob. 🙌

Thread Thread
 
cicirello profile image
Vincent A. Cicirello

Thanks for the tip.

Collapse
 
michaeltharrington profile image
Michael Tharrington

Great addition! Thanks Vincent!

Collapse
 
michaeltharrington profile image
Michael Tharrington

That's a pretty cool idea! I like the reasoning behind it. Though, it does make me slightly worried that it would make it even easier for plagiarists to do their thing. Might be worth it anyway.

If you decide you'd like to put this forth as a feature request, you can do so via the discussions section of our GitHub repo!

Collapse
 
szabgab profile image
Gabor Szabo

there you go

Collapse
 
michaeltharrington profile image
Michael Tharrington

You rock, Gabor! Thanks.

Collapse
 
j471n profile image
Jatin Sharma

If you are struggling to generate Table of contents. You can use VS code extension or you can use any of the following link where you just have to paste your markdown and it will generate TOC for you:

luciopaiva.com/markdown-toc/

ecotrust-canada.github.io/markdown...