10 Quick Tips About A Great Markdown Editor
Markdown is a lightweight markup language with a plain text formatting syntax. So, like HTML, it is a markup language, but it doesn’t use tags. It is also a very readable syntax, and it can be converted into HTML, XHTML, and other formats. Markdown’s primary purpose, however, is readability. The creators of markdown intended documents look like plain text documents without any HTML tags or anything like that. With Markdown, what you see is what you get.
Let’s take a closer look. With markdown, when you put a space in your document, it shows a space with no need for a line break tag. Markdown keeps that positioning in place. After that, you can use specific characters or punctuation marks to format stuff and make it bold or italic. You can also create lists and things like that.
This article will discuss 10 quick tips about what makes a great markdown editor.
What Are The 10 Quick Tips About A Great Markdown Editor?
1. How Can You Add Headings?
You add headings with Markdown using the hash sign (#). The number of hash signs is used to specify the level of the heading. For example, for the h1 heading, you use one hash sign. For an h2 heading, you use two hash signs. Markdown supports six levels of headings. Check out the example below:
# Heading 1
## Heading 2
### Heading 3
#### Heading 4
##### Heading 5
###### Heading 6This is the HTML equivalent of the same Markdown code:
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>2. How Can You Format Text?
Text formatting often emphasizes a particular piece of text within a paragraph. Markdown supports basic text formatting such as italic and bold. To italicize the text, you enclose it in asterisks (*), for bold, enclose it in two asterisks (**), and for bold-italic, enclose it in three asterisks (***).
*This is italic*
**This is bold**
***This is bold-italic***This renders as:
This is italic
This is bold
This is bold-italic
You can also add quotes to a markdown document by adding a greater-than sign (>) before the text.
> The greatest glory in living lies not in never falling, but in rising every time we fall.This renders as:
3. How Can You Use Horizontal Rules?
Markdown syntax supports horizontal rules you can use to separate document sections. In Markdown, you add horizontal rules by using three or more underscores, hyphens, or asterisks. Here are some ways to add a horizontal rule in markdown:
___
---
***The HTML equivalent for the above syntaxis:
<hr >
<hr >
<hr >However, when you add a horizontal rule, you can’t have any other text on that line. In addition to that, except at the top of the document, it should be surrounded by empty lines.
4. How Can You Add Code Snippets?
Markdown supports both inline code and code blocks. Inline code emphasizes a small command or a piece of syntax within the line. Inline code can be added by putting backticks (`) around the code. For example, `Array.prototype.length` will appear as Array.prototype.length in the document.
On the other hand, you use code blocks for longer or more detailed snippets of code. This allows you to add multiline code snippets, that Markdown will render inside a separate box. You can add code blocks by enclosing the code between three backticks (“`). Here is an example for adding a code block in a markdown document:
```
let fruits = ['Apple', 'Banana']
console.log(fruits.length)
fruits.forEach(function(item, index, array) {
console.log(item, index)
})
```This is how it renders in the document:
let fruits = ['Apple', 'Banana']
console.log(fruits.length)
fruits.forEach(function(item, index, array) {
console.log(item, index)
})5. What Are Reference Lists And Titles?
Markdown also handles reference lists and titles, which reference external sources in the document. Here is an example of using links and titles in markdown:
[Albert Einstein][1] was born in [Munich][2], [Germany][3].
[1]: https://en.wikipedia.org/wiki/Albert_Einstein "Wikipedia: Albert Einstein"
[2]: https://en.wikipedia.org/wiki/Munich "Wikipedia: Munich"
[3]: https://en.wikipedia.org/wiki/Germany "Wikipedia: Germany"You can keep references separate from the markdown code. This makes it easier to read in the raw format. Markdown inserts the links into the text when it renders the document during rendering. The example above appears like this:
Albert Einstein was born in Munich, Germany.
You can also add references without using the reference list. For example, instead of using [Germany][3] we can also write it as [Germany](https://en.wikipedia.org/wiki/Germany “Wikipedia: Germany”). This eliminates the need for a separate reference list.
6. How Can You Use Escaping?
If you want to use a special character that is part of the Markdown syntax you use escaping. This means you add a backslash before the character. For example *really* would render as really in the HTML even though the formatting was not intentional. To ensure it renders correctly, you would type \*really\* to ensure it gets rendered correctly when converted to HTML.
7. How Can You Add Links?
In Markdown, you add links by enclosing the link text in square brackets ([]) and then enclosing the link in round brackets (()).
[link text](https://www.link.com)Markdown also supports automatic links. Simply writing https://www.link.com to the raw Markdown will convert it to a link when it renders.
8. How Can You Add Images?
You can also add images to a Markdown document. The syntax for adding an image is similar to adding a link. First, you prefix it with an exclamation mark (!). Next, you enclose the image description in square brackets ([]). Then enclose the image path in round brackets (()). You can set the image path relative to the markdown file or to an image online.
Renders like this:
9. How Can You Use Syntax Highlighting?
Many markdown engines support syntax highlighting, including GitHub, which uses markdown documents to create the repository’s landing page. Specifying the language of the code block will allow the rendering engine to highlight and color the code like an IDE. For example, if we want to specify JavaScript as the language of the code block that we have used above, we rewrite it as:
```js
let fruits = ['Apple', 'Banana']
console.log(fruits.length)
fruits.forEach(function(item, index, array) {
console.log(item, index)
})
```This will be rendered as:
let fruits = ['Apple', 'Banana']
console.log(fruits.length)
fruits.forEach(function(item, index, array) {
console.log(item, index)
})10. How Can You Add Shortcuts?
Power users tend to love shortcuts because they make it easier to perform frequent tasks. Most Markdown editors support the following shortcuts:
Ctrl + H for HeadingCtrl + I for ItalicCtrl + B for BoldCtrl + K for link
Conclusion
Hopefully, this gives you a good idea of what markdown is, what it is used for, and of course, its straightforward syntax. The syntax is pretty easy to remember. You may not remember it right away and have to look at the cheat sheet a couple of times, but you will get it pretty quick. That being said, Markdown is not perfect. There are several problems that come with using Markdown like a lack of features or unpredictability. Therefore, it would be wise to know how to solve markdown problems.
FAQs
How do I create a Markdown file?
You’ve probably encountered a “.md” file before. That’s a Markdown file, which is essentially a text file that contains Markdown content that can be converted into XHTML or HTML using a Markdown app. To create a Markdown file, just open a text editor of your choice, create a new file, save it with a “.md” extension, and start writing Markdown to your heart’s content.
What is the use of HTML content in Markdown editors?
Even though Markdown language is easier than HTML, it’s not as self-sufficient. For instance, there are some requirements that are difficult or even impossible to do using Markdown but easy with HTML. Furthermore, if you’ll use only Markdown, there’ll be additional performance costs due to HTML parsing.
No comment yet, add your voice below!