Example 1:
We work on the Visual Studio Code to create the markdown codes. We open the new text file and select the markdown language. After this, we add the link and open the preview window for the output. The link that we add to the text file is also given in the following. The text of the link that we want to show on the output is written inside the square brackets “[ ]”. Then, put parentheses in which we insert the link.
Here, we add the line that we want to display on the output as the link text. The line “This is a google link. Click on it” appears as the link text and the link of the google page that is added in parentheses after closing the square brackets. We add https://www.google.com/ in the parentheses so that when the user clicks on the link text in the output, the google page opens for the user.
In the preview window, only the link text appears. This link text appears in blue. When we press on this blue text, it opens the google page for us since we added the google link in the parentheses after adding the link text.
When we move the cursor on this link text, the underline is generated to this link text. After clicking, we get that page or website whose link is what we added in the code.
When we click on the previous link text, this page appears on the screen. This is the google website whose link is what we inserted inside the parentheses.
Example 2:
When we want to refer to a local resource with the help of a link on the same server, we may utilize the relative paths as shown in the following. Here, we put the text. Inside this text, we add a link. The name of the link text which we have given here is “About”. We add the link of the about page like “/about/” since this is present on the same server.
The previous code generates the following output. You can see that the “About” appears blue since it is the link text. When we press the “About” link text, it moves to the about page.
When we move the cursor on this blue text, it generates an underline. When we click on it, the about page renders for us whose link is what we previously added in the parentheses.
Example 3:
Now, we create the title link. The title links are those links where we add a title. When we move the cursor on the link text, the title is shown in a box. Here, we add “Yahoo” as the link text in the square brackets. Then, we put the parentheses and insert the yahoo link. After this, we also add the title in these parentheses which is “This is the yahoo link”. Now, this text is added as the title of that link.
Here is the link text which is “Yahoo”. When we move the cursor on this “Yahoo” link text, it shows the title which we added in the code. Also, it opens the yahoo page when we click on it.
Example 4:
We can also add the e-mail link and URLs in the markdown. Here, we add the link which is the e-mail account link. This link is added in “< >”. We first put the “<”, then add the link which is the e-mail, and then close it by putting “>”. We add the e-mail links in the first three lines. We add the URL in the fourth line. The URL is also added in the same way as we did for adding the email links. We place the URL in between “<” and “>”.
Here, the e-mail links and URL are shown in the following image. These are the e-mail links that we inserted after adding some text. The URL is also displayed here. We move to that URL address page of g-mail page when we click on this URL or e-mail link. These links are also shown in blue.
Example 5:
We can also apply some styles or we can also change the format of the link in the markdown as shown in this example. We apply the bold style to the link. In the first line, we add some text and then place the text of the link in the square brackets. The link is added in the parentheses. You can also note to put two asterisks “**” and place the square brackets which contain the text of the link. After this, we place the parentheses which contains the link. Then, we again add two asterisks “**” at the end.
Below, we add another link that is the same as the previous link by placing the asterisks before and after the link. We place the asterisks and put the link text and link inside these four asterisks. In the end, we add the link text again in square brackets “[ ]” and the link in the parentheses “()”. Here, we don’t add any asterisk.
Here, the link text is bold which is present in the first and second lines. But the link which is present in the third line is not bold. This is because we added the first two links inside the asterisks, so those link texts are bold. The last link is not added inside the asterisk, so it is not bold.
Example 6:
Now, we create the link text in italic. For this, we place the link text and link inside the two asterisks. We put one asterisk first and then add the square brackets and the text in these square brackets. Then, we add the parentheses. The link is also added in these parentheses. Then, we place another “*” asterisk there. We add the asterisks in the first two links. The third link is added simply without an asterisk.
The first two links appear in italic. The third line is not in italic since we added the first two link texts in asterisks. The last link is generated without asterisks.
Example 7:
We create the links in bold and italic here. We add three asterisks and then add a link. After adding a link, we again place the three asterisks. Those links where we added the three asterisks before and three asterisks after the links appear in bold and italic.
The first two links are in bold as well as in italic because we applied the formatting to those two links. We also rendered the simple link here so you can notice the difference.
Conclusion
We discussed the links in the markdown in this article. We explained how to add the links in the markdown. We also explained how to add the title links as well as how to format the links in the markdown in this article. We explored the “markdown link” concept theoretically and practically and explained the link text and links in detail. We wrote all the possible information about the “markdown link” concept and generated the links in our codes in this article.
