 Hi everyone. Welcome to Markdown Essentials course. I am Rangmopal and I will help you to learn Markdown and how Markdown can be used at your regular activities. And I will be introducing standalone tools and online tools as well. I have been using Markdown for more than six years for various use cases, such as taking notes, writing synopsis, minutes of meeting, technical or functional design documents, enhancement documentation, even for the presentation and many more use cases. This is the course outline. We'll start with tools that are required and then the basic Markdown syntax. After that, we'll look at how Markdown can help us while writing the document. For that one, we'll write sample Markdown nodes for this course itself. Later, we'll go through Markdown online editors. In addition to this one, we'll look at how GIT Hub uses the Markdown. And along with that, we'll see how Markdown can help us to prepare presentations. For your information, the current presentation which I have been shared is made out of Markdown itself. These are the tools that I have been using for quite some time. I would recommend using Visual Studio Code as VS Code because it has many cool features. And I have been using VS Code for more than five years. I believe you would like it as well. I'll be using Windows machine for this course. Please download the VS Code software from the internet or from the link which I have mentioned on this slide. Along with that one, we'll look at another tool which is Notepad++. Please download the Notepad++ software from the internet. And the link has been provided on the slide as well. I've been using Notepad++ for a very long time and I like the tool a lot. For Visual Studio, after saving the file as either .md or .markdown file, please use Ctrl Shift V as a shortcut to preview the Markdown. In case of Notepad++, please use Ctrl Shift M. This is a shortcut for Markdown viewer preview. Hi, everyone. I have already installed VS Code on my local machine. You can download the VS Code software from the internet or the link which I have provided on the slide. Right now it is coming in white color. Sometimes it comes as a default, which is dark theme. But I select the white theme and you can change it from the file, preferences, and color theme, where you can select either the dark theme or light theme. These are the list of themes that are available. I chose Light Visual Studio, which gives this white color theme. And regarding the extensions, I have not installed any of the custom extensions related to Markdown. If you need to install any custom extensions, you can go to the Extensions tab and you can type Markdown. And these are the list of extensions that are supported. You can install any one of those. Select this one and install it. After that, you need to reopen the Visual Studio. Now, let's go back to our file explorer. I have already opened the file directory using the open folder and which was an empty folder. So that's why there are no files here. Now, let's create one dummy document testing that Markdown. As I mentioned, either you can create the Markdown R.md. I prefer Markdown. So here it automatically identifies this is the Markdown symbol. And then let's try something writing this testing header. After that, save it. After saving it, where can I see the Markdown preview? So here is the button where you can click on it, R-Ctrl-Shift-P, R-Ctrl-KV. All these reflect to opening a preview window next to the source code like this one by splitting window vertically. So right now the Markdown is working perfectly fine. This is not bad plus plus. And you might have installed by this time using the link that was provided on the slide or you would have downloaded from the internet. After opening the node path plus plus, go to the plugins and see for plugins admin. Most of the times this plugin will be installed along with the node path plus plus. Let's try to install Markdown plugin. So on my local laptop, it's already been installed. That's why it may not be visible at the available tab, but you need to search over here at the search box marked out and it will show you like here it shows us a Markdown panel, but we need a Markdown viewer plus plus plugin. So as it is already installed on my local box, so I'm showing it on my local environment. So go to the install tab and look for the Markdown viewer plus plus. So this is the plugin which I have been talking about. Once it's been installed, you will have a icon here at the toolbar or at the plugins you will see Markdown viewer plus plus and its own content. So you can see both of them. You can use either a Markdown viewer plus plus or this tool button both will open another window in parallel or vertical to the source code. For example, here I'm writing. This is testing and when I click on this one, it will open another window in parallel to this one and here is our Markdown content. So not only this one, I can write next header. This is second header and one way you can turn off turn on. Sometimes this might work or might not work. Just click on preview button again. We see this one. That means your plugin is working as expected. Let's learn about Markdown syntax. We'll start with headers and then one after another. So headers, we have six varieties of headers like basic HTML and all we need to do is prefix with hash and followed by our text. For example, this is a header and if you want to show it as a header one, all I need to do is one hash and write the content example. This is Markdown syntax for headers. It shows as h1 tag not to create h2 tag or h3 or h4. All we need to do is we need to increase the number of prefixes. For example, in case of h2, I need to use two hashes in case of h5, five hashes and each one has its own styling. h1 will be the bigger and nicely shown and h2, h3, h4, the size of the font will get reduced and h6 tag font will be equal to paragraph font size. So as I mentioned, headers are six types. So header one, header two, header three, header four, header five and header six. Let's see how those can be created. On visual studio code, I have creating a new file called headers markdown and hit enter. Let's write header one. As I mentioned on the slide, headers will be created by prefixing hash. So let's say hash, this is header one. And the next one, two hashes, this is for header two. This is header two. Next one, this is header three. This is header four. This is header five. This is header six. And say. Now to see the preview, you need to click on either preview button here or control shift V. Let's click on preview button. This is how it's going to be represented. By default, header one will have underline or a horizontal line separation. But it totally depends on the tool. Sometimes we need to use separators while writing the content for better visibility or this content separation. In that case, we can use horizontal line by using three high funds. There are no tailing spaces. Then a horizontal line will be shown. Let's create a new file, say separator or horizontal line, markdown. Let's say let's create header two. This is sample. For horizontal line, you need to use three high funds. Now write another header or paragraph text. This is sample paragraph. The horizontal separation line will be used for separating the content or sections or anything. Next, we have markdown text formatting. So we have multiple varieties. So we'll go with all basic formatting only. There are no advanced formatting supported here. But all basic would do our required job. So in case of bolding a text, we used to use either double hashtag or double underscore. Like I shown here, I am bold. I am hashtag, hashtag bold, hashtag, hashtag. Good result. I am bold. Bold will be in bold style. It's the same for italics. In case of italics, we need to use single hashtag or single underscore. I strongly suggest to follow one pattern. I always follow using stars, hashtags. So in case of the bold, I use double hashtag. In case of italics, it's a single hashtag. Next, we have type through. Sometimes we need to show as a type through, as part of this style. So in such cases, we can use tilt symbol for type through. For example, price is $99 instead of $100. So for that one, how we are going to write is price is tilt, tilt, dollar, hundred, tilt, tilt. It will show as hundred as a type through and we can write our own content, which suppose to be shown as dollar 90, which would reflect as price is $90 while $100 has been striked up. Next, we have blackboard. This will be used for saying purposes. For example, if we need to highlight it or famous quotes that you would like to paste it or the formulas are the most important factor. So such kind of notes or such kind of content will be shown as blackboard. All we need to do is use greater than symbol as a prefix followed by space and write the content that will be shown as a slogan or a blackboard. In our case, the slogan is doing is learning. So write greater than space doing is learning will be shown as as shown in the slide. Next, we have code several places we need to show as a code, particularly in case of technical representations or technical notes or technical specifications. So in such cases, we can use either inline code or code blocks. So if we want to show as an inline code, all we need to do is single backcode for the content. In case of code block, we need to use three blackboards and ending also three blackboards. So the example was shown here single code console log. This is testing single code that would represent as shown here. In case of the code block, we need to use three backcodes and write the content technical code and close it up with three backcodes. You can specify what kind of language that you are using. Most of the time, the syntax highlighting will be done like JavaScript. The code block which was showing on the slide is a JavaScript. So it has been notified as JavaScript. So backward, backward, backward, JavaScript content and closing backward, backward, backward three times, which will show as shown in the slide. Now let's discuss about text formation. Let's create another file called format. I'm writing as a plain text. This is bold. In order to get the bold, you need to use the double R stick or double underscore. Both results the same. Next, this is italics. For the italics, you need to use single as stick or single underscore. Both would result the same. It's a typo. Next, we have strike. Let's say price is instead of the hundred, I want to show it as 99 or 90. So let's say 99. So all you need to do is use double tilt. It's a strike. Now we have black code. Suppose we need to write any slogan, like our slogan, doing is learning. Here on the left side, you will have a special notation saying that this is a black code. Next, we have code. So you could write code either in line or code block. Let's see in line. This is a keyword. So let's make this keyword as a actual keyword by using back code, single backward. You see it on this tool, the preview has been changed to a different color. Now let's learn about code block. Three backwards and other three backwards within the whatever you write is a code block. Let's say JavaScript, so where I is equals to zero. So here there is no syntax violation, but most of the tools support syntax violation as I have written as a JavaScript. Let's write JavaScript. Now the highlight has been changed. Let's write some for i is equals to, let's say j is equals to zero. So I need to define what j++ and the condition is j less than i. Of course, this loop never executes, but just for saying I'm writing it. That's all. Log. This is testing. So it's very beautifully highlighted the syntax. And along with that, you can use several other languages. Most of the languages are supported, including diff. For example, in the same piece of code, I want to show as a diff. So in that case, you can write diff on the piece of code. And right now, instead of this one, I'm planning to write something else. So console.log. Here, let's write title plus j. So as this is a new line, we need to use plus. And this is the old line you need to use which supposed to be removed. So we'll define with minus. So this is how it's going to be very useful. Next, we'll go through the list. There are two varieties of lists. One is ordered and unordered. And markdown supports next list as well. And all text formatting which was discussed at previous slide will be used as part of the list. So let's go through ordered list. In case of order list, all we need to we need to prefix with number dot any number, for example, one, two or three, or you can use one always. In all such cases, it will show in proper order. So for example, if I write one dot one, one dot two, one dot three, it will show us one, one, two, three, three. The number ordering is not important, but it is suggested to maintain because if anybody looks at markdown, it would be easier to understand. Next, we have unordered list. In unordered list, we have different ways that we can represent either using a stick, icon or plus. But I strongly suggest to stick with one. In my case, I have used a stick called a stick round, a stick Lakshman, a stick Siddha, would represent as a list with bullets. In case of next list, all we need to do is give two spaces in front of either one dot or a stick. Both order list and unorder list, it's a similar equal number of spaces. Let's say two spaces. Let's discuss about lists. Create a new file called lists.markdown and create a header, say lists, and start creating the list. So first, I will start with order list. Order list will be given with number dot or number closing parenthesis. So let me write it as one, two, I'm using different syntax, which is a parenthesis, two, and I'm using dot again. So here, three dot, three. Either dot or closing parenthesis will give you the same result, which is number one. And you don't need to maintain the number. You just use the number. What I mean is for the same thing, I would have written like one dot one, one dot one, one dot one. It automatically adds the number. Let's learn about unordered list. Let's correct these things as this is as a four, this is five, and this is six. Let's write unordered list. In the unordered list, let's say names. So you need to use, as I mentioned, ASIC, iPhone or plus symbol. So I'm using ASIC and let's say names. This time, let's use iPhone. So at the end, the result would be the same. But I strongly suggest to stick to one format, which is either dots or parenthesis, because dots and parenthesis can be used for ordered list and the stick iPhone or plus will be used for unordered list. I strongly suggest to stick to one of these as for your convenience. I would use as one dot or two dot or three dot or in case of the unordered list, I use ASICs. Next, we have links. Links can be created very easily. And the standard syntax is link title in square brackets. And within the parenthesis, you can provide the URL along with the title. And title is optional. The title will be displayed when you hover over the content or over the link. So for example, if we need to write as a Google, this is Google. And where the Google is hyperlink in that case, within the square brackets, use Google. And within the parenthesis, provide the actual URL. And along with that, you want to provide any tooltip or title, you can provide that as well with double quotes. Always use double quotes to provide title. And don't forget to give the space between the URL and the title. And as part of the links, we can provide the link to other markdown files as well, either you can use absolute paths or relative paths. I strongly suggest to go with relative paths. And in case of the self links, if you want to show the same content, in that case, you can use simple empty parenthesis, which will take the link will be created for the same content or the same markdown file. Create a new file links.markdownampleheader, say links. And here I can use links as inline or as a part of any other text. So let's create as a list. So I'm going to create link www.google.com or I can use as a special syntax as www.google.com and I need to give the attached. So let's say Google search. And we can give the title to this one as well. For example, if we take it, sorry, there is a typo. We take it here, it gives the exactly the same way. And in case of the Google search, it gives the actual URL where it is going to be open or where it is going to be pointed to. But in case of the title, if you want to change that one, for example, let's write Yahoo search. So here www.let's say Yahoo.com. And the title can be given in the double course, say Yahoo search. That's it. Three dots. Now if you hover it, here you will get a different one, which is a title. Instead of the link, actual link where it is pointing to, it gives the title which you mentioned. One is to write as a list. You can write it as an inline text as well. For example, this is link to Google. So here I would like to say Google as a link. So let's convert it to www.google.com. So that's how it's going to be inline. And this is as part of another. Next images. Images can be created as an inline text or at the suffered one. In both the cases, the syntax is similar. Esclamatory mark, square brackets and balances brackets. Square brackets, you provide the alternate text and the URL in the balances. You want to provide a tooltip in double quotes and ensure that you are given the single space between the URL and the tooltip. And as shown here, I have created inline image and few tools supports references as well. Reference means you can provide the link URL at some other place and you can refer the same. But basic markdown syntax will not provide. For our convenience, I have already downloaded a sample PNG file, which is a markdown itself. Markdown logo. And I'm going to refer this image as part of our document. Let's create a new file. Images dot markdown header images. And just like a link, you need to provide URL to the image. So in our case, it would be the current directory. So let's say markdown dot PNG and just like similar to the links, you need to provide an alternate text on a URL where it needs to go. Now it acts as let's say alternate text will be markdown lower. For example, if this PNG is not available, then it will come. But right now it looks like a link. Yes, it is link syntax, but in order to convert it to image initiatives, that's complicated. Now we got image substituted. For example, if image is not exist, let's say markdown two, then the alternate text will be displayed. Let's correct it. And as I mentioned, you can use this as an inline or as a bullet points as well. And if you hover it, you will not get anything because there is no hyper, no alternate. If you hover it, you will not get anything unlike a link. Let's add a title to that. So the title can be added. Let's correct it is as a, let's change it. These two as alternate to image. And let's say dummy dot PNG. And let's use the actual image markdown dot PNG and alternate text as markdown logo. And the title, as I mentioned, you need to give it in the double quotes. Let's say markdown logo. Now before it, you will get the title as a tooltip. Next, we have escape characters. Sometimes we need to show the special symbols which I've been using in markdown syntaxes as in our content. So in that case, we need to use backslash to escape the character. For example, in order to show as a Aztec, if you provide an Aztec, it will take it as a list. So if you want to show it as a Aztec, just use backslash Aztec. I have listed here a couple of these symbols like Aztec back quote itself and iPhone plus this guy. Let's write escape dot markdown. As I mentioned, Aztec, iPhone plus these are all our hash. These are all part of our markdown syntaxes. You finish to write for some reason or to write it as part of your text or for any other use case. You cannot write it because the markdown identifies its own syntax and tries to convert it. But in order to get the actual result, you need to use escape character. In our case, it's a backslash. So it will be like looking like this. Next, we have tables. For the tables, it's a quite different syntax than any other markdown syntaxes. So for the columns operators, we use pipes. And for the first line separator, we use pipes, iPhones. So for the header column is always bold and centerline. For the data column, it's always left aligned. In order to change the alignment, you need to use colon. So in case of the central alignment, colon, iPhone colon, in case of the left alignment, which is default, colon, iPhone, in case of the right alignment, iPhone colon. Table which was shown previously here as a symbol and syntax, the exact code is been here. So for the header, we use pipe, symbol, pipe, syntax. And the next will give the percent aligned data columns. So for that, we use pipe colon, iPhone colon, pi. And we follow the content. Data columns are also being separated with parts. So which would result a perfect table? Create a new file, tables dot markdown. First of all, we need to create the table headers. So let's say headers as a title for the serial number. Let's say serial number and name. So serial number and name. In case of tables, we need to use pipe as a separator. So let's say pipe, serial number, pipe, closing pipe. And in order to recognize this one as we need to use iPhones, these iPhones will be used only for the first row. So pipe, iPhone, pipe, iPhone, closing. So it comes as now you write as a data for one, one and name. Let's say from closing pipe to let's say Lakshman and closing. By default, the header columns are center aligned and bold in nature. But in case of the data columns by default, data is left aligned. For any reason, we want to make it as right aligned or center aligned or default, which is left aligned by force it, you need to use colon like this. You need to use both like this. All three needs to be the same line, iPhone, colon and pipe. Now data is represented as right aligned. Let's say numbers are center aligned. In case of the center aligned, you need to use colon middle like this. Now it's a center aligned. If you provide only left one, then it's a left aligned. Pretty simple. Welcome back. These are the two online editors, which I like the most. One Dlinger and another one is stock edit. We are not going to discuss about all the features of these online editors, but I will introduce two basic necessary, which is writing background syntaxes. Let's start it. I have opened Dlinger in my browser and this is the default content that Dlinger provides it. This is for our easy uses and giving the a little brush up or refresh of our Markdown syntax. So here it will be used all the features that are supported in Dlinger. Not only the basic features, it has a couple more additional features. Those also be listed here. So this is our Markdown text, which they have given and this is how the preview will be very nice. Isn't it? So if you see it here, the code blocks has some different background color. Like this is because of this Dlinger feature and even the table has alternate rows has been highlighted. It's as simple as that. Let's copy the notes that we have prepared a few moments back and I'm going to remove the entire default text and paste it. Here I have pasted and this is how it's going to be shown in Dlinger online editor. Now we are going to learn about stack edit.io online editor. Right now I have opened stack edit.io on my browser and this is the interface how it looks like. You can go through and explore much more later. Let's get start writing. Click on start writing button and it will open online editor where you can see left side some interface, left side where the files are there and the editor and the preview. If your interface is different than mine, it's okay. Maybe the site has been updated or I might have closed a few more. Let's copy the same content which our notes has been written into the stack edit editor. I just pasted from the notes and it's not working perfectly fine because of the additional spaces. Let's delete the additional spaces. So just I keep one line there and here remove the additional ones. This looks better and let me, some additional space has come during copy paste. Edit syntax, let's delete this line. Now it should start showing table. Yes, it is showing table as we expected. So let me clean up rushed as well. Yes, I cleaned up rushed as well. So this is our actual markdown code and it's coming here. So one advantage here, few of the features directly will be shown here before we check at preview like headers are bold, italics, all will be shown on the flag except few like tables are the features like slow ones, but codes also will work in the same manner. So if we see it here, it automatically shown as a code. Let's write a code block here. For example, JavaScript console. We see it after entering proper code block. So already started showing JavaScript syntax violation. Let's write for Java. I'm finishing up the code block first. So it's a proper code block. Now start writing system.out.println testing. You see it Java syntax has been already working already showing exactly same as preview. This is one of the advantages of the live editors. Now let's see couple of the features if you want to completely work without any disturbance. If you want to see only preview, you just click on the readable mode so you can see it all the document at once. We start writing it click on edit button again. If you want to write completely edit mode or this is turning off the navigation bar and completely edit mode, I believe this one. Yes. So we can concentrate writing it whatever we want to whatever our nodes that we can complete it once it is done. You can preview it or you can go with both left side and right side where you can write it and you can see preview next to it. Thank you. Next we have exporting markdown content. Until now we learned the markdown syntaxes and we have written a sample markdown file as well. Let's try to export the markdown file which we have written as a nodes for this course itself and we'll try to export it as either html or pdf. These are the tools that are available for us Nodeware++, Dealinger Online Editor or Stack Editor Online Editor. VSCode has several extensions to export the content as html or pdf but VSCode default extension doesn't have the feature as export. So we need to install additional extensions for exporting the markdown content. In this course I'm not showing those options but the one which I like the most is Nodeware++ markdown viewer export. I always use markdown viewer++ extension to export my content as pdf. Let's see how we can export the content as pdf or html using Nodeware++. I have opened markdown nodes which we have written a couple of minutes back in Nodeware++ and I have enabled the previewer so this is how our content looks like. So here is the table that we have it and the list and the slogan everything. So simply click on export here as a html and it'll ask you to where to download it. Let's download that one and let's see how preview pdf will be. So I exported as html and pdf just now and let's view how those looks like. Here is the nodes.html which was exported from Nodeware++++. This is how the content looks like. It's a very simple plan but it does its purpose. That means it summarizes all the content into one place. Let's see how nodes pdf would look like. This is how markdown viewer++ creates the pdf while exporting as a pdf. This is how markdown viewer++ creates the content as pdf. It's exactly similar as it's shown in the view. In the same manner we have send option. Either you can send over the email as a text or html. The one which is shown here exactly the same way. Exactly same we have printer as well. Either you can send it to the printer or html clipboard. So entire html will be copied to the clipboard. So I'm opening a new file and paste it. So entire content has been pasted as a html code. All markdown content has been converted to html code and you can add the styles as it required and shows beautifully. Let's get back. In the next we have Dlinger and stocked it online editors. Both the tools support html and pdf but in case of the stocked it html export is free but not pdf export. So here I'm going to use html export from the Dlinger and stocked it but pdf only from the Dlinger as I have not subscribed for pdf export. Here is the code which we have written and all the content and there is an option called either preview or export. Both of them generate a similar one. So let's try preview and html and you click on here the html it shows is a very plain old style. So there won't be any styles that are applied but if you preview as a styled html where you can see the preview are the styles that are applied exactly similar to the markdown view exactly similar to Dlinger. So here either you right click and save as or you can use directly export as similar and now let's see how pdf looks like this is how our markdown content looks like as a pdf applying style sheets of course it is black and white thing it's not a color them it's a black and white thing but it shows our purpose so either you save it download it or you can use exactly the same features as html or style html or pdf and the markdown itself is nothing but when you click on it and you click on as a markdown it shows all your markdown whatever it's been written is for exporting purpose there is nothing difference. So you can use either pdm and preview or the export both gives the same options both html and pdf is supported at Dlinger in the styled html also it's the same content that we have written most like we copy pasted here so this is how our preview looks like so here to export it click on this button where you have several options are available one of them is export or import click on it and here you will as a export as a markdown of course it's a copy paste only and pdf are sponsored one that means which are nothing but where we need to pay for so that's a subscription so I don't have the subscription I'm going to try only export as html and I click on it it lasts for that in which style it has to be so let's say style default one and there are a couple of the templates that are available but I'm going with default one click on the file is open so the content looks like this one this is the export that was happened from stack edit so as I mentioned we can write the markdown content and we can use any of these tools to export it that's our turn now thank you how we are going to use markdown at jthub jthub is a very famous portion control system at jthub we can create the issues or the enhancement tickets or other so how we are going to use markdown in such cases jthub supports markdown very well either at the comments or at the preview or at the ticket syntaxing or the comments where you write for the conversations wherever you want to use it use markdown syntaxes and the content will be represented very nicely in case of the tasks you can provide the task name in case of the issues you can provide the issue number or the commuter id or you can use the smileys very famous smileys like love sad such kind of things and you can mention any of the other jthub members using at the rate all jthub links are automated so if you provide a link automatically it will be created i have provided the link for the jthub markdown documentation what are the formats that are supported all basic writing or formatting is same as our markdown syntax basic syntax which we have discussed and few more additional will be there which only supported at the jthub i've provided links over here you can go through them and learn better let's talk about a use case as part of the use case we are going to write a sample loads for our learnings where we are going to use headers paragraph lists slogan and a table let's write it create a new file let's say nodes dot markdown and we're going to use title as markdown learnings and as a paragraph markdown is a simple language or simple way of writing documentation so inside it let's say markdown as fold so as i mentioned double artistic and simple way as italic single artistic so if you see it in the preview markdown become bold and simplify as italic and this is how we write the paragraph you can write any length of text after that let's write a list so let's give a title for it so i'm going to use three headers which is phs and here i'm going to use unordered list so as stick let's say headers and text formatting slogan let's write a slogan here doing is learning three dots let's write a table and for the table so let's give a title for it headers syntax let's create a basic table having two columns so three pipes and the first name will be syntax and description or let's say output description let's say description itself and iphone iphone now tables layout is been ready so let's write so syntax for that one i need to use inline 40 so single so hash h1 and this one results to header one and closing pipe let's copy the same paste paste paste paste the total six let's say header two header three header four header five and header six and the syntax for the header two is two and header three s3 header four as four header five as five header six as six hash let's give the separations so far easy really so let's connect the descriptions as two header two header three header four header five and header six let's say all these headers are left aligned let's make them as right aligned so how we are going to do is right aligned as colon on the right side voila this is a very simple use case and you can use it for anything next we are going to discuss about the presentations the current presentation which you are seeing using remark j's there are several other markdown presentations softwares are available at internet these two which i like the most remark j's and privileges both are freeware and open source so you can follow the links which were provided here and i can show you you can learn from the official documentations and the links has been provided here on the slide for the remark j's which i have created i can show you how easy it is let's go to the jt hub for the remark j's i have opened remark j's at jt hub and if you see it all we need to do is here is the one we need to exactly copy paste it and you can start writing your markdown syntaxes within the body tag which is nothing but the text area source so this will provide basic markdown presentation you can follow the official documentation for adding more content to it or for the styling purposes there are several things that are available as a open source you can find them easily or the internet here we just write our markdown content within this text area that's all we need to do rest of things remark j's would show us a nice presentation next we have reveal j's i have provided the official link on the slide for the reveal j's and jt hub link as well i have opened reveal j's at jt hub and you can follow the documentation which they have mentioned at the jt hub to create the slides if you want to see the slide representation if you want to see the demo slides just click on the demo slides at about section just click on it it takes to the official site let's go back to the remark j's and i will show you the slides that i have prepared using remark j's i'm going to open the remark j's content in visual studio i have opened markdown presentation which was written in remark j's at visual studio so this is all our my content which i have written for this slide i have added additional cj's as it is required at my slides congratulations completing the course now we have learned the markdown tools and use cases doing is learning and please keep practicing with practice you will be comfortable with markdown syntaxes and can write the markdown content with ease and last but not least please provide your valuable feedback your feedback would help me to improve the quality of the course and the content in every aspect once again thanks and please keep practicing all the best