This post is by no means a comprehensive guide compared to the official guide , but it covers stuff you'll use/need most often.
And if you take note you will realize there are some features used in this post but not discussed. Examples include Table of contents and in page navigation.
Let's begin.
This guide could serve as a reference therefore a table of contents is necessary.
Markdown is a text-to-HTML conversion tool for web writers. Markdown allows you to write using an easy-to-read, easy-to-write plain text format, then convert it to structurally valid XHTML (or HTML).
Markdown allow you to wrap specific characters around text and the parser will render it in standard HTML. We'll discuss this in depth in this post, but for now let's talk about the features that's common in both editors.
The following features are available in the editors but, how to use them differs:
Post title
Tags
Inserting images
Cover image
Canonical URL
Series name
To make things simple and easier to follow let's discuss how to use these features in the rich + markdown verson then we'll proceed to the basic markdown version.
HOW TO USE COMMON EDITOR FEATURES IN "RICH + MARKDOWN"
The post title is the title of your post and you'll write it in the big input at the top of the editor.
The tags are keywords associated with your post. Inserting tags is quiet easy as depicted in the following image.
Inserting images in rich + markdown editor
Images can be uploaded on DEV for two purposes:
Cover image
Body images
Cover image
Cover image will appear at the top of your post before the post title
Body images
Body images will be used in your post
Inserting an image is quiet straight forward, all you have to do is click the Upload image icon at the top left corner of the editor.
Wait for the upload to complete and a Mardown image format will appear beside the Upload image icon.
Copy the Markdown Images and insert in your post.
We will talk more in depth about Markdown Images and Direct URLS in the section inserting images.
If you would like to upload a cover image click on the Add cover image button.
When the upload is complete image will appear before the title input in the editor.
You can remove the cover image by clicking the image icon and clicking the Remove button besid the Change button.
Inserting a canonical URL in "rich + markdown" editor
The canonical url is the URL of the post if the post has been published elsewhere on the internet.
To insert a canonical url click the icon beside the Save Draft button. The following image will appear and the first form input is an option to insert a canonical url.
Type the url and click done.
Inserting a series name in "rich + markdown" editor
The series name is the name given to related articles.
The series name should be included in the first article in the series then subsequent articles can be added to the series.
The series name is the second form option in the previous image. Here is it again.
When the post is published a box similar to the one below will appear before the first and last paragraph of each post in the series.
HOW TO USE COMMON EDITOR FEATURES IN BASIC MARKDOWN VERSION
The common features mentioned (with the exception of inserting images) are attached to a post in a format called Front Matter . This is depicted in the image below:
You can turn the Markdown link into a direct link by deleting the sorrounding charcaters around the link until you are left with something in the following format:
HTML tables are quiet tricky to insert in your post and words can not do justice in explaining how to go about them. Its best if we see a code example.
| column 1 | column 2 | column 3 |
| --------- |:---------:| -------:|
| some data | some data | some data |
| some data | some data | some data |
| some data | some data | some data |
Code snippets can be included in your post if a particular technical explanation requires it.
Code snippets on DEV are displayed in a dedicated division on the page on a black background and if you specify the language of the code, it will be displayed with the appropriate syntax highlighting.
A minimum of three requirement is required if you want your code snippet rendered in a dedicated division of the page. They are:
Three back-ticks (
```) as prefix
The code snippet(s)
Three back-ticks (```
) as suffix
In markdown this would be:
An example code would be rendered as:
function helloWorld() {
console.log("hello world ");
}
But, if you want syntax highlighting for the code you'll have to include the language before the code snippet(s).
In markdown:
The previous code snippet would be rendered as:
functionhelloWorld(){console.log("hello world ");}
Remember to replace JavaScript with your language of choice e.g CSS, HTML , Python e.t.c
...![[deleted user] image](https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fthepracticaldev.s3.amazonaws.com%2Fi%2F99mvlsfu5tfj9m7ku25d.png)
