close
close

Markdown: More with Less – DEV Community

Markdown: More with Less – DEV Community

Every technical writer should use Markdown✍; at least learn it 📖

Markdown is a lightweight markup language for creating formatted text using a plain text editor. It is commonly used in blogging, instant messaging (you use it on WhatsApp for bold, italics, etc.), and other more interesting applications such as writing mathematical articles with expressions.

Its best feature? Simplicity 💯

I use Markdown for blogging on dev.to and on my personal blog site which is built on Hugo.
I use it for notes, to-do lists, reports and of course project documentation. MD (Markdown) is highly extensible and can be used in many applications.

Some important features that I rely heavily on in my workflow include:

1. Titles

  # heading 1
  ## heading 2
  ### heading 3
  #### heading 4
  ##### heading 5
  ###### heading 6
Enter full screen mode

Exit full screen mode

To go out:

title 2

title 3

title 4

Title 5

Title 6

2. Incorporating links in the text and link references

    (some text)(https://some.website)
Enter full screen mode

Exit full screen mode

To go out: Of text

3. Embedding media such as images and videos

  !(alt_text)(image.png)
Enter full screen mode

Exit full screen mode

  • For videos, there are several ways to do this. The easiest in my opinion is to use the HTML <video> label.

Another way is to embed a video using hosting services like YouTube and Vimeo, which provide you with an embed code that you can copy and paste into your Markdown file:

    <iframe width="560" height="315" src="https://www.youtube.com/embed/video-id" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
Enter full screen mode

Exit full screen mode

Another method is to use markdown specific syntax to embed videos. There are different syntaxes for different platforms. For example, YouTube and Vimeo etc.

    (!(alt text)(https://img.youtube.com/vi/video-id/0.jpg))(https://www.youtube.com/watch?v=video-id)
Enter full screen mode

Exit full screen mode

Whichever method you choose to use, carefully consider the user experience.

4. Check boxes for tasks to be performed

    - ( ) Write blog
    - ( ) Publish blog
    - ( ) Create summary
Enter full screen mode

Exit full screen mode

To go out:

  • ( ) Write a blog
  • ( ) Publish a blog
  • ( ) Create a summary

Note that checkboxes are rendered on most Markdown readers but not all, for example on this site.

5. Lists

    - item 1
    - item 2
    - item 3
Enter full screen mode

Exit full screen mode

To go out:

6. Quotes/Block Quotes

    > "Markdown is a simple and efficient language for documentation and note taking", theJoernal.
Enter full screen mode

Exit full screen mode

To go out:

“Markdown is a simple and efficient language for documentation and note-taking,” theJoernal.

7. Code Snippets and Blocks (I use these mostly in tutorials)

  • For inline code snippets, use single quotes
  • For larger blocks of code, use triple quotes; three to open the block and three after the code to close it.

screenshot of codeblock

8. Syntax highlighting in code blocks

To get syntax highlighting in code blocks, add the language name immediately after the opening quotes:

screenshot of code block with syntax highlighting

Markdown tooling is not a problem;

Prefer to work on VS Code? You can. On Notepad or Vim? You’re covered. And now you can do it on Zed Editor (I’m currently testing it on Linux), which has built-in Markdown support.

Besides these popular text editors and IDEs, there are also several Markdown-specific editors, which offer some advantages.
Here are some honorable mentions that I have personally enjoyed using in the past:

  • Obsidian (All Platforms)

  • Typora (Linux, Mac, Win)

  • Notion (Mac, Windows, Android, IOS)

  • iA Writer (Mac, Windows, Android, IOS)

  • Simplenote (Linux, Mac, Windows, Android, IOS)

  • InkDrop (Linux, Mac, Windows, Android, IOS)

To learn more about Markdown, click here: Getting Started with Markdown

Do you use Markdown?

This is a cross-post from the original on my blog site.