If you're a developer, chances are you've come across markdown editors before (whether you know it or not).
Markdown is supported by GitHub, DEV, many ticket trackers, most documentation and blogging platforms (cough.. cough... Medium...). Getting good with the markdown syntax will help you communicate more effectively as a developer.
There are lots of resources and cheat-sheets for getting started with the basics (like this great gist). In this post I will share a few tips that I haven't seen too many people use or that aren't so well documented.
Ordered Lists
The syntax for ordered lists is pretty simple:
1. Item one
2. Item two
3. another item
renders as:
- Item one
- Item two
- another item
But have you ever written a long list and then realized you missed an item in the middle? Must have been really annoying to go back and insert it and then fix the numbers on all subsequent items...
Except, you don't have to! Markdown doesn't pay attention to the numbers, as long as you have a list of items with numbers in front of them, any numbers, it will render as an ordered list.
The following:
1. Item one
2. Item two
3. another item
1. Item one
1. Item two
1. another item
4. Item one
6. Item two
765. another item
All render as:
- Item one
- Item two
- another item
My preferred style is to just use 1s in front of all of them, but if you prefer to have the actual numbers and find yourself needing to insert a new item say between item 7 and 8 you can just give the new item the number 7 as well and when the markdown gets rendered it will render properly with all of the numbers in order.
Syntax Highlighting
In the following section I've embedded snippets from gist, that is because there's a bug in the dev.to editor that doesn't allow escaping backticks properly.
I've opened an issue on it in the dev.to repo. If any of the readers would like to take a crack at it feel free!
Most people know that wrapping code snippets with three backticks like this:
Will render it as a code snippet like this:
someCodeGoes("here")
You might also know that adding the name of the language your code is in like this:
Will give you syntax highlighting like this:
someCodeGoes("here")
But did you know that you can also put diff as a language, and when you do it will render any line that starts with a - in red and any line that starts with a + in green.
So this:
Will render like this:
someCodeGoes(here) {
- oldCode()
+ newCode()
someMore(code)
}
I found this particularly useful when writing tutorials and there are steps with only small code changes. It can sometimes be hard for readers to realize what changed, using diffs to highlight the difference can make it a lot easier!
Escaping Backticks; The Lifehack That Wasn't
The next lifehack involves how to escape backticks and other reserved characters in Markdown, but due to the bug mentioned in the beginning of the last section I'll have to leave that for another time :(
If you would like to see how it's done, check out the gist I embedded above and click on the "Raw" button to see how I did it.
I hope you found these useful!
Now get to writing that documentation you've been putting off!
Oldest comments (33)
I had no idea about the diff highlight! Can you combine it with a JS syntax highlight?
Im definitely using this in my next tutorials btw. Thanks a bunch for the article!
As far as I know you can't have two languages selected so if you have diff there's no way to add another language.
That's why I only use diff when it's a change of a few characters, if the change is more than a line I'll use they language for the syntax highlighting.
Wonderful article! I'm using a project management software and they allow us to write Markdown as well. I will definitely use your advice!
Glad you found it helpful! 🤗
Everyone who is new to publishing on here should read this.
Thank you! ❤️
My best markdown lifehack is to ditch it in favor of asciidoc as soon as you are doing something non trivial.
Simple things should be easy, complex things should be possible said a wise man. Markdown got only the first part right. Asciidoc is as easy as markdown for the simple things but won't let you down if you do something more complex
asciidoctor.org/docs/user-manual/#...
If I really need more complex I might just use good ol' latex
Latex is oriented towards Print though, that's a different use case
Which really is the only time where I need something more complex than markdown.
That's what I thought also, but in fact markdown is never enough if you look at it closely :
The question then is whether to use multiple incompatible "markdown plus extension" or a standardized better format like asciidoc.
Is AsciiDoc used by any web site, web application, or CMS (not a rhetorical question)?
It works on GitHub
Really useful tips!
Glad you found it helpful! 🤗
Javascript and diff, of course. But many, many more. Check out the complete list on Github.
Yes! I didn't mean to imply JavaScript was the only one, I brought it as an example. Most people I've spoken to didn't know about diff though, so that was the main one I wanted to point out.
Just tried it in Joplin (OneNote-like app using Markdown syntax) and it works wonderfully, thanks for the tip!
Glad you found it helpful!
Didn't know about diff.
Will deffo use diff
Thank you!
Love Markdown and this article.
Nice job!
There is a small error, in the Javascript and Diff examples, they are mixed.
To beginners I'll suggest to install a preview extension into VSCode and maybe another extension to handle Markdown shortcuts.
Thank you!
What do you mean that they are mixed? It seems right to me... 🤔
Nevermind, it must be something regarding the renderer on the DEV Android app, or it was me that was just tired after a long week! 😅
Nice list! I also like to use angle brackets
<>around links with no text, quotations with>, and footnotes via the Extended Syntax (supported by GitHub Pages for example). markdownguide.org/extended-syntax/diff looks awesome! I never knew that would work like it does :) nice - thanks!
This is awesome I 💯 of the time use 1. Only for allmy lists.
Same! 🙂
This article is great! I didn't know some of those things!
Glad you found it helpful!
Wow ! Gonna implement the 'diff' in my next article ! Thankss ! :)
Was the mentioned issue fixed with #4438? It is not entirely clear. Perhaps update this post if it was?
Ah, looks like it was, thanks!