This tutorial explains how to use Markdown syntax in HTML documents. Here I will talk about a free JavaScript file, Strapdown.js that you can use in your HTML documents to use markdown syntax. After using the script, you can use the markdown syntax to design your content on a web page. It allows you to add GitHub style markdown formatting to build web pages of your websites. You can add headings, paragraphs, tables, lists, etc., along with the syntax highlighting. And you can place the original script file either on your server or serve it externally from a CDN.
In normal scenario, if you want to use Markdown syntax instead of HTML for your web pages, then you can’t do that easily. But the simple script, Strapdown.js helps you do that. Using this script, you just have to use a special tag in your HTML document and then insert the markdown code in it. If you have an idea how to write markdown code then you will easily understand that. You can create the whole web page in markdown and then publish it online. The web page that you create in markdown is search engine friendly too.
How to use Markdown Syntax in HTML Documents?
Strapdown.js is simple, yet powerful script file that you can try to use markdown syntax for creating web pages. You just have to include a script file in your document and then create the web page body. However, you will have to keep in mind that the script file should remain accessible to the web pages to create. And for that, you can place it in common folder or you can use CDN for that.
Here are a few steps to use Markdown syntax in HTML documents.
Step 1: Open code editor like Notepad++ and then create an HTML file. Add the starting and ending HTML (head, title, etc) tags in the HTML file and leave the main content part blank.
Step 2: Now, include the script file in your HTML document. For that, you can place that in inside tags. You can see the following screenshot.
Step 3: Now, it’s time to create the page content using Markdown. All the markdown that will be used will be written inside the tag. And there are other attributes that you can use with it. For example, it supports different themes and you can add them using those attributes. However, the limitation here is that you cannot use the XMP tag again.
Step 4: After creating the web page content, you can open the HTML file in the browser. After ensuring that everything is fine, you can publish your web page online.
In this way, you can easily use markdown syntax in HTML documents. And Strapdown.js script helps you do that in a very neat manner. You just have to include it and then start creating the web page content in markdown.
Final thoughts
Strapdown.js is a very nice tool that you can use to build your web pages using the markdown syntax. This is really a simple script that you can easily use to create your web pages. You will get your hands on it pretty quickly if you know how to use markdown. Also, I will suggest you to use some WYSIWYG markdown editors along with it to keep ensuring that the markdown you have created is producing the correct output.
