{"id":1679,"date":"2017-10-31T12:25:07","date_gmt":"2017-10-31T12:25:07","guid":{"rendered":"http:\/\/www.sanjaywebdesigner.com\/articles\/?p=1679"},"modified":"2017-10-31T12:25:07","modified_gmt":"2017-10-31T12:25:07","slug":"tips-to-use-markdown-in-web-development","status":"publish","type":"post","link":"https:\/\/www.sanjaywebdesigner.com\/articles\/tips-to-use-markdown-in-web-development\/","title":{"rendered":"Tips to use Markdown in Web Development"},"content":{"rendered":"<div class=\"4b5c905834746893f548144bd2becc18\" data-index=\"1\" style=\"float: none; margin:10px 0 10px 0; text-align:center;\">\n<script async src=\"\/\/pagead2.googlesyndication.com\/pagead\/js\/adsbygoogle.js\"><\/script>\r\n<!-- blog last -->\r\n<ins class=\"adsbygoogle\"\r\n     style=\"display:inline-block;width:336px;height:280px\"\r\n     data-ad-client=\"ca-pub-8831529092902674\"\r\n     data-ad-slot=\"8814291746\"><\/ins>\r\n<script>\r\n(adsbygoogle = window.adsbygoogle || []).push({});\r\n<\/script>\n<\/div>\n<h1><strong>Tips to use Markdown in Web Development<\/strong><\/h1>\n<p>As web designers and also content creators, we generally spend a lot of time composing message that&#8217;s covered inside HTML code. What if we informed you that there&#8217;s a far better method to do it with Markdown? A method which you had the ability to focus on the writing and also not the code?<\/p>\n<p><a href=\"http:\/\/www.sanjaywebdesigner.com\/articles\/wp-content\/uploads\/2017\/10\/Tips-to-use-Markdown-in-Web-Development.jpg\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-large wp-image-1680\" src=\"http:\/\/www.sanjaywebdesigner.com\/articles\/wp-content\/uploads\/2017\/10\/Tips-to-use-Markdown-in-Web-Development-1024x768.jpg\" alt=\"Tips to use Markdown in Web Development\" width=\"665\" height=\"499\" srcset=\"https:\/\/www.sanjaywebdesigner.com\/articles\/wp-content\/uploads\/2017\/10\/Tips-to-use-Markdown-in-Web-Development.jpg 1024w, https:\/\/www.sanjaywebdesigner.com\/articles\/wp-content\/uploads\/2017\/10\/Tips-to-use-Markdown-in-Web-Development-300x225.jpg 300w, https:\/\/www.sanjaywebdesigner.com\/articles\/wp-content\/uploads\/2017\/10\/Tips-to-use-Markdown-in-Web-Development-768x576.jpg 768w, https:\/\/www.sanjaywebdesigner.com\/articles\/wp-content\/uploads\/2017\/10\/Tips-to-use-Markdown-in-Web-Development-660x495.jpg 660w\" sizes=\"auto, (max-width: 665px) 100vw, 665px\" \/><\/a><\/p>\n<p>Markdown is a plain-text, lightweight markup language created in 2004 by John Gruber and Aaron Swartz. Initially developed to make composing XHTML\/HTML easier by converting plain-text documents into structurally legitimate HTML or XHTML, Markdown can be utilized for practically any sort of writing: manuscripts, tutorials, notes, web content and more. in this article you will read\u00a0<strong>Tips to use Markdown in Web Development<\/strong><\/p>\n<p>Although fairly simple, Markdown can be a little bit daunting when you first start out. Once you get the hang of it, you&#8217;ll swiftly understand just how much time was invested formatting your code rather than inputting your content.<\/p>\n<p><strong>\u00a0<\/strong><\/p>\n<ol>\n<li>\n<h2><strong> Pick up any Markdown editor<\/strong><\/h2>\n<\/li>\n<\/ol>\n<p>When you&#8217;re dealing with Markdown for the web, it&#8217;s important to recognize the fundamental phrase structure and constraints you may face. Prior to you start, you require some sort of editor and also an interpreter for your website. Alternately, you can transform the Markdown before publishing.<\/p>\n<p><a href=\"http:\/\/www.sanjaywebdesigner.com\/articles\/wp-content\/uploads\/2017\/10\/92jtF.png\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-1681\" src=\"http:\/\/www.sanjaywebdesigner.com\/articles\/wp-content\/uploads\/2017\/10\/92jtF.png\" alt=\"Tips to use Markdown in Web Development\" width=\"220\" height=\"250\" \/><\/a><\/p>\n<p>You&#8217;ll require some kind of editor to get started<\/p>\n<p>There are numerous editors from which you could pick. Adage is awesome due to the fact that it provides a wide variety of export choices, consisting of HTML and also PDF. One more excellent alternative is StackEdit&#8211; a cost-free, on the internet Markdown editor. Of course, any type of plain text editor will certainly function.<\/p>\n<p><a href=\"http:\/\/www.sanjaywebdesigner.com\/articles\/wp-content\/uploads\/2017\/10\/m1.jpg\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-1682\" src=\"http:\/\/www.sanjaywebdesigner.com\/articles\/wp-content\/uploads\/2017\/10\/m1.jpg\" alt=\"Tips to use Markdown in Web Development\" width=\"650\" height=\"191\" srcset=\"https:\/\/www.sanjaywebdesigner.com\/articles\/wp-content\/uploads\/2017\/10\/m1.jpg 650w, https:\/\/www.sanjaywebdesigner.com\/articles\/wp-content\/uploads\/2017\/10\/m1-300x88.jpg 300w\" sizes=\"auto, (max-width: 650px) 100vw, 650px\" \/><\/a><\/p>\n<p>Jetpack is handy for usage with WordPress<\/p>\n<p>If you don&#8217;t intend to transform your Markdown to HTML, you can obtain a plugin (or interrupter) for your site. For WordPress, Jetpack has exceptional support for Markdown, which allows you to make use of Markdown straight inside posts and also comments&#8211; as long as you make it possible for that option.<\/p>\n<p>Like any type of markup language, Markdown has its own phrase structure. Note: There are a number of various flavours or ranges of Markdown. In this write-up, we&#8217;ll only cover the generally shared syntax.<\/p>\n<p><strong>\u00a0<\/strong><\/p>\n<ol start=\"2\">\n<li>\n<h2><strong> Establish headings<\/strong><\/h2>\n<\/li>\n<\/ol>\n<p>In HTML, there are 6 going designs: h1, h2, h3, h4, h5 and also h6. To recreate these in Markdown, make use of a collection of hashtag signs (#)&#8211; representing the going number&#8211; adhered to by the going text. As an example, to develop an &lt;h1&gt;tag, use one hashtag #; for an &lt;h2&gt; tag, make use of 2 hashtags ##; and so on etc.<\/p>\n<h3><strong>Markdown input:<\/strong><\/h3>\n<pre class=\"line-numbers  language-markdown\"><code class=\"  language-markdown\"># Heading 1\r\n## Heading 2\r\n### Heading 3\r\n#### Heading 4\r\n##### Heading 5\r\n###### Heading 6<\/code><\/pre>\n<h3><strong>HTML output:<\/strong><\/h3>\n<pre class=\"line-numbers  language-html\"><code class=\"  language-html\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>h1<span class=\"token punctuation\">&gt;<\/span><\/span>Heading 1<span class=\"token tag\"><span class=\"token punctuation\">&lt;\/<\/span>h1<span class=\"token punctuation\">&gt;<\/span><\/span>\r\n<span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>h2<span class=\"token punctuation\">&gt;<\/span><\/span>Heading 2<span class=\"token tag\"><span class=\"token punctuation\">&lt;\/<\/span>h2<span class=\"token punctuation\">&gt;<\/span><\/span>\r\n<span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>h3<span class=\"token punctuation\">&gt;<\/span><\/span>Heading 3<span class=\"token tag\"><span class=\"token punctuation\">&lt;\/<\/span>h3<span class=\"token punctuation\">&gt;<\/span><\/span>\r\n<span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>h4<span class=\"token punctuation\">&gt;<\/span><\/span>Heading 4<span class=\"token tag\"><span class=\"token punctuation\">&lt;\/<\/span>h4<span class=\"token punctuation\">&gt;<\/span><\/span>\r\n<span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>h5<span class=\"token punctuation\">&gt;<\/span><\/span>Heading 5<span class=\"token tag\"><span class=\"token punctuation\">&lt;\/<\/span>h5<span class=\"token punctuation\">&gt;<\/span><\/span>\r\n<span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>h6<span class=\"token punctuation\">&gt;<\/span><\/span>Heading 6<span class=\"token tag\"><span class=\"token punctuation\">&lt;\/<\/span>h6<span class=\"token punctuation\">&gt;<\/span><\/span><\/code><\/pre>\n<p><strong>\u00a0<\/strong><\/p>\n<ol start=\"3\">\n<li>\n<h2><strong> Mark up paragraphs<\/strong><\/h2>\n<\/li>\n<\/ol>\n<p>Paragraphs are stood for by the &lt;p&gt; tag in HTML. In Markdown, they&#8217;re divided by several blank lines. Like HTML, whitespace is ignored. So if you add 20 blank lines, you&#8217;re still only going to have one paragraph.<\/p>\n<h3>Markdown input:<\/h3>\n<pre class=\"line-numbers  language-markdown\"><code class=\"  language-markdown\">The quick brown fox jumps over the lazy dog.\r\nThe lazy dog doesn't care, because he's a lazy dog.<\/code><\/pre>\n<h3>HTML output:<\/h3>\n<pre class=\"line-numbers  language-html\"><code class=\"  language-html\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>p<span class=\"token punctuation\">&gt;<\/span><\/span>The quick brown fox jumps over the lazy dog.<span class=\"token tag\"><span class=\"token punctuation\">&lt;\/<\/span>p<span class=\"token punctuation\">&gt;<\/span><\/span>\r\n<span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>p<span class=\"token punctuation\">&gt;<\/span><\/span>The lazy dog doesn't care, because he's a lazy dog.<span class=\"token tag\"><span class=\"token punctuation\">&lt;\/<\/span>p<span class=\"token punctuation\">&gt;<\/span><\/span><\/code><\/pre>\n<p><strong>\u00a0<\/strong><\/p>\n<ol start=\"4\">\n<li>\n<h2><strong> Style the line breaks<\/strong><\/h2>\n<\/li>\n<\/ol>\n<p>Line breaks, which are stood for in HTML with the &lt;br&gt; tag, are included utilizing a single line break, with 2 areas at the end of the previous line.<\/p>\n<h3>Markdown input:<\/h3>\n<pre class=\"line-numbers  language-markdown\"><code class=\"  language-markdown\">The quick brown fox  \r\njumps over the lazy dog<\/code><\/pre>\n<h3>HTML output:<\/h3>\n<pre class=\"line-numbers  language-html\"><code class=\"  language-html\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>p<span class=\"token punctuation\">&gt;<\/span><\/span>The quick brown fox<span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>br<span class=\"token punctuation\">&gt;<\/span><\/span>jumps over the lazy dog.<span class=\"token tag\"><span class=\"token punctuation\">&lt;\/<\/span>p<span class=\"token punctuation\">&gt;<\/span><\/span><\/code><\/pre>\n<p><strong>\u00a0<\/strong><\/p>\n<ol start=\"5\">\n<li>\n<h2><strong> Mark emphasis<\/strong><\/h2>\n<\/li>\n<\/ol>\n<p>There are 2 ways to included focus to your text: Italic (&lt;em&gt; in HTML) or Strong (&lt;strong&gt; in HTML).<\/p>\n<p>In Markdown, you complete this utilizing a couple of asterisks (*). You can also utilize emphasizes (_), but I stick with asterisks, since there are various other flavours of Markdown that utilize highlights for various other things.<\/p>\n<h3>Markdown input:<\/h3>\n<pre class=\"line-numbers  language-markdown\"><code class=\"  language-markdown\">*Italic Text*\r\n**Bold Text**<\/code>\r\n\r\n<\/pre>\n<p><strong>HTML output<\/strong>:.<\/p>\n<pre class=\"line-numbers  language-html\"><code class=\"  language-html\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>em<span class=\"token punctuation\">&gt;<\/span><\/span>Italic Text<span class=\"token tag\"><span class=\"token punctuation\">&lt;\/<\/span>em<span class=\"token punctuation\">&gt;<\/span><\/span>\r\n<span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>strong<span class=\"token punctuation\">&gt;<\/span><\/span>Bold Text<span class=\"token tag\"><span class=\"token punctuation\">&lt;\/<\/span>strong<span class=\"token punctuation\">&gt;<\/span><\/span><\/code><\/pre>\n<p><strong>Note:<\/strong> You can likewise develop bold-italic message using 3 asterisks: *** Bold and Italic Text ***.<\/p>\n<p><strong>\u00a0<\/strong><\/p>\n<ol start=\"6\">\n<li>\n<h2><strong> Produce horizontal rules.<\/strong><\/h2>\n<\/li>\n<\/ol>\n<p>To develop a Straight Policy (or &lt;hr&gt; in HTML), utilize a series of three or even more dashboards (&#8211;) or equal signs (== =-RRB-. It&#8217;s your choice which one you prefer, but simply make certain you consist of a vacant line over and listed below.<\/p>\n<h3>Markdown input:.<\/h3>\n<pre class=\"line-numbers  language-markdown\"><code class=\"  language-markdown\">Learning something new is always a lot fun.\r\n\r\n\u2013 \r\n\r\nIt sure is!<\/code>\r\n\r\n<\/pre>\n<h3><strong>HTML output<\/strong>:.<\/h3>\n<pre class=\"line-numbers  language-html\"><code class=\"  language-html\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>p<span class=\"token punctuation\">&gt;<\/span><\/span>Learning something new is always a lot fun.<span class=\"token tag\"><span class=\"token punctuation\">&lt;\/<\/span>p<span class=\"token punctuation\">&gt;<\/span><\/span>\r\n<span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>hr<span class=\"token punctuation\">&gt;<\/span><\/span>\r\n<span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>p<span class=\"token punctuation\">&gt;<\/span><\/span>It sure is!<span class=\"token tag\"><span class=\"token punctuation\">&lt;\/<\/span>p<span class=\"token punctuation\">&gt;<\/span><\/span><\/code><\/pre>\n<p><strong>\u00a0<\/strong><\/p>\n<ol start=\"7\">\n<li>\n<h2><strong> Include pictures and also web links.<\/strong><\/h2>\n<\/li>\n<\/ol>\n<p>In HTML, an image is added making use of the &lt;img&gt; tag and web links are included using the &lt;a&gt; tag.<\/p>\n<p>In Markdown, images start with an exclamation point (!), adhered to by square braces ([] for the &#8216;alt message&#8217;, as well as parentheses (()) for the path to the picture. You can also consist of an optional title inside double quotes (&#8220;&#8221;).<\/p>\n<p>With web links, it&#8217;s practically the exact same, other than there is no exclamation point.<\/p>\n<h3>Markdown input:<\/h3>\n<pre class=\"line-numbers  language-markdown\"><code class=\"  language-markdown\">![Alt Text](\/path\/to\/image.jpg \"Optional Title\")\r\n[Link Text](http:\/\/example.com \"Optional Title\")<\/code><\/pre>\n<p><strong>Keep in mind:<\/strong> You can additionally make use of referral links and also photos, but that&#8217;s not covered below.<\/p>\n<p>&nbsp;<\/p>\n<h3><strong>HTML output<\/strong>:<\/h3>\n<pre class=\"line-numbers  language-html\"><code class=\"  language-html\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>img <span class=\"token attr-name\">src<\/span><span class=\"token attr-value\"><span class=\"token punctuation\">=<\/span><span class=\"token punctuation\">\"<\/span>\/path\/to\/image.jpg<span class=\"token punctuation\">\"<\/span><\/span> <span class=\"token attr-name\">alt<\/span><span class=\"token attr-value\"><span class=\"token punctuation\">=<\/span><span class=\"token punctuation\">\"<\/span>Alt Text<span class=\"token punctuation\">\"<\/span><\/span> <span class=\"token attr-name\">title<\/span><span class=\"token attr-value\"><span class=\"token punctuation\">=<\/span><span class=\"token punctuation\">\"<\/span>Optional Title<span class=\"token punctuation\">\"<\/span><\/span><span class=\"token punctuation\">\/&gt;<\/span><\/span>\r\n<span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>a <span class=\"token attr-name\">href<\/span><span class=\"token attr-value\"><span class=\"token punctuation\">=<\/span><span class=\"token punctuation\">\"<\/span>http:\/\/example.com<span class=\"token punctuation\">\"<\/span><\/span> <span class=\"token attr-name\">title<\/span><span class=\"token attr-value\"><span class=\"token punctuation\">=<\/span><span class=\"token punctuation\">\"<\/span>Optional Title<span class=\"token punctuation\">\"<\/span><\/span><span class=\"token punctuation\">&gt;<\/span><\/span>Link Text<span class=\"token tag\"><span class=\"token punctuation\">&lt;\/<\/span>a<span class=\"token punctuation\">&gt;<\/span><\/span><\/code><\/pre>\n<p>&nbsp;<\/p>\n<ol start=\"8\">\n<li>\n<h2><strong> Create Lists.<\/strong><\/h2>\n<\/li>\n<\/ol>\n<p>There are two sorts of listings in HTML: purchased (&lt;ul&gt;) and also unordered(). With Markdown, use numbers for bought listings, and asterisks or hyphens (-) for unordered checklists.<\/p>\n<h3>Markdown input:<\/h3>\n<pre class=\"line-numbers  language-markdown\"><code class=\"  language-markdown\">1. Item 1\r\n2. Item 2\r\n* First Item\r\n* Second Item\r\n- First Item\r\n- Second Item<\/code>\r\n\r\n<\/pre>\n<h3><strong>HTML output<\/strong>:.<\/h3>\n<pre class=\"line-numbers  language-html\"><code class=\"  language-html\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>ol<span class=\"token punctuation\">&gt;<\/span><\/span>\r\n<span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>li<span class=\"token punctuation\">&gt;<\/span><\/span>Item 1<span class=\"token tag\"><span class=\"token punctuation\">&lt;\/<\/span>li<span class=\"token punctuation\">&gt;<\/span><\/span>\r\n<span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>li<span class=\"token punctuation\">&gt;<\/span><\/span>Item 2<span class=\"token tag\"><span class=\"token punctuation\">&lt;\/<\/span>li<span class=\"token punctuation\">&gt;<\/span><\/span>\r\n<span class=\"token tag\"><span class=\"token punctuation\">&lt;\/<\/span>ol<span class=\"token punctuation\">&gt;<\/span><\/span>\r\n<span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>ul<span class=\"token punctuation\">&gt;<\/span><\/span>\r\n<span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>li<span class=\"token punctuation\">&gt;<\/span><\/span>First Item<span class=\"token tag\"><span class=\"token punctuation\">&lt;\/<\/span>li<span class=\"token punctuation\">&gt;<\/span><\/span>\r\n<span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>li<span class=\"token punctuation\">&gt;<\/span><\/span>Second Item<span class=\"token tag\"><span class=\"token punctuation\">&lt;\/<\/span>li<span class=\"token punctuation\">&gt;<\/span><\/span>\r\n<span class=\"token tag\"><span class=\"token punctuation\">&lt;\/<\/span>ul<span class=\"token punctuation\">&gt;<\/span><\/span>\r\n<span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>ul<span class=\"token punctuation\">&gt;<\/span><\/span>\r\n<span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>li<span class=\"token punctuation\">&gt;<\/span><\/span>First Item<span class=\"token tag\"><span class=\"token punctuation\">&lt;\/<\/span>li<span class=\"token punctuation\">&gt;<\/span><\/span>\r\n<span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>li<span class=\"token punctuation\">&gt;<\/span><\/span>Second Item<span class=\"token tag\"><span class=\"token punctuation\">&lt;\/<\/span>li<span class=\"token punctuation\">&gt;<\/span><\/span>\r\n<span class=\"token tag\"><span class=\"token punctuation\">&lt;\/<\/span>ul<span class=\"token punctuation\">&gt;<\/span><\/span><\/code><\/pre>\n<p><strong>\u00a0<\/strong><\/p>\n<ol start=\"9\">\n<li>\n<h2><strong> Include inline code as well as code blocks.<\/strong><\/h2>\n<\/li>\n<\/ol>\n<p>When you&#8217;re working with code in HTML, you can either include it as an inline aspect making use of the &lt;code&gt; tags; or as a pre-formatted text block making use of the &lt;pre&gt;&lt;code&gt; combination.<\/p>\n<p>In Markdown, these components are delimited making use of either a solitary backtick on each side (&#8216;); or by using a fenced-style, which includes 3 backticks above as well as listed below the code block (&#8220;&#8216;).<\/p>\n<h3>Markdown input:<\/h3>\n<pre class=\"line-numbers  language-markdown\"><code class=\"  language-markdown\">The `numberOfPoints` variable holds the player's score.\r\nif player.wins {\r\nnumberOfPoints += 1\r\n}<\/code><\/pre>\n<p>&nbsp;<\/p>\n<h3>HTML Output:<\/h3>\n<pre class=\"line-numbers  language-html\"><code class=\"  language-html\">The <span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>code<span class=\"token punctuation\">&gt;<\/span><\/span>numberOfPoints<span class=\"token tag\"><span class=\"token punctuation\">&lt;\/<\/span>code<span class=\"token punctuation\">&gt;<\/span><\/span> variable holds the player's score.\r\n<span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>pre<span class=\"token punctuation\">&gt;<\/span><\/span><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>code<span class=\"token punctuation\">&gt;<\/span><\/span>\r\nif player.wins {\r\nnumberOfPoints += 1\r\n}\r\n<span class=\"token tag\"><span class=\"token punctuation\">&lt;\/<\/span>pre<span class=\"token punctuation\">&gt;<\/span><\/span><span class=\"token tag\"><span class=\"token punctuation\">&lt;\/<\/span>code<span class=\"token punctuation\">&gt;<\/span><\/span><\/code><\/pre>\n<p><strong>\u00a0<\/strong><\/p>\n<ol start=\"10\">\n<li>\n<h2><strong> Style up blockquotes.<\/strong><\/h2>\n<\/li>\n<\/ol>\n<p>Blockquotes are added in HTML making use of the &lt;blockquote&gt; tag. In Markdown, use the above sign (&gt;) prior to the line.<\/p>\n<h3>Markdown input:<\/h3>\n<pre class=\"line-numbers  language-markdown\"><code class=\"  language-markdown\">&gt; This is my blockquote.\r\n&gt;  \r\n&gt; This is part of the same blockquote.\r\n&gt; This is a new blockquote.<\/code>\r\n\r\n<\/pre>\n<h3>HTML Output:<\/h3>\n<pre class=\"line-numbers  language-html\"><code class=\"  language-html\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>blockquote<span class=\"token punctuation\">&gt;<\/span><\/span>\r\n<span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>p<span class=\"token punctuation\">&gt;<\/span><\/span>This is my blockquote.<span class=\"token tag\"><span class=\"token punctuation\">&lt;\/<\/span>p<span class=\"token punctuation\">&gt;<\/span><\/span>\r\n<span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>br<span class=\"token punctuation\">&gt;<\/span><\/span>\r\n<span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>p<span class=\"token punctuation\">&gt;<\/span><\/span>This is part of the same blockquote.<span class=\"token tag\"><span class=\"token punctuation\">&lt;\/<\/span>p<span class=\"token punctuation\">&gt;<\/span><\/span>\r\n<span class=\"token tag\"><span class=\"token punctuation\">&lt;\/<\/span>blockquote<span class=\"token punctuation\">&gt;<\/span><\/span>\r\n<span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>blockquote<span class=\"token punctuation\">&gt;<\/span><\/span>  \r\n<span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>p<span class=\"token punctuation\">&gt;<\/span><\/span>This is a new blockquote.<span class=\"token tag\"><span class=\"token punctuation\">&lt;\/<\/span>p<span class=\"token punctuation\">&gt;<\/span><\/span>\r\n<span class=\"token tag\"><span class=\"token punctuation\">&lt;\/<\/span>blockquote<span class=\"token punctuation\">&gt;<\/span><\/span><\/code><\/pre>\n<p><strong>\u00a0<\/strong><\/p>\n<ol start=\"11\">\n<li>\n<h2><strong> Embed inline HTML.<\/strong><\/h2>\n<\/li>\n<\/ol>\n<p>There are times when you should produce an HTML element that is not sustained; as an example, you might need a &lt;table&gt; or &lt;div&gt; tag.<\/p>\n<p>If that&#8217;s the case, you could mix Markdown and HTML, however there are some restrictions. As an example, you can not include Markdown within block-level HTML tags.<\/p>\n\n<div style=\"font-size: 0px; height: 0px; line-height: 0px; margin: 0; padding: 0; clear: both;\"><\/div>","protected":false},"excerpt":{"rendered":"<p>Tips to use Markdown in Web Development As web designers and also content creators, we generally spend a lot of time composing message that&#8217;s covered inside HTML code. What if we informed you that there&#8217;s a far better method to do it with Markdown? A method which you had the ability to focus on the [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":1680,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[3],"tags":[859],"class_list":["post-1679","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-web-designing","tag-tips-to-use-markdown-in-web-development"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v26.9 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Tips to use Markdown in Web Development - Sanjay Web Designer<\/title>\n<meta name=\"description\" content=\"Tips to use Markdown in Web Development. Markdown is a plain-text, lightweight markup language for composing XHTML\/HTML easier\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.sanjaywebdesigner.com\/articles\/tips-to-use-markdown-in-web-development\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Tips to use Markdown in Web Development - Sanjay Web Designer\" \/>\n<meta property=\"og:description\" content=\"Tips to use Markdown in Web Development. Markdown is a plain-text, lightweight markup language for composing XHTML\/HTML easier\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.sanjaywebdesigner.com\/articles\/tips-to-use-markdown-in-web-development\/\" \/>\n<meta property=\"og:site_name\" content=\"Sanjay Web Designer\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/sanjaywebdesigner\" \/>\n<meta property=\"article:author\" content=\"https:\/\/www.facebook.com\/sanjay73jain\" \/>\n<meta property=\"article:published_time\" content=\"2017-10-31T12:25:07+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.sanjaywebdesigner.com\/articles\/wp-content\/uploads\/2017\/10\/Tips-to-use-Markdown-in-Web-Development.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1024\" \/>\n\t<meta property=\"og:image:height\" content=\"768\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Sanjay Jain\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@https:\/\/twitter.com\/sanjaywebdesign\" \/>\n<meta name=\"twitter:site\" content=\"@sanjaywebdesign\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Sanjay Jain\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"7 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/www.sanjaywebdesigner.com\/articles\/tips-to-use-markdown-in-web-development\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.sanjaywebdesigner.com\/articles\/tips-to-use-markdown-in-web-development\/\"},\"author\":{\"name\":\"Sanjay Jain\",\"@id\":\"https:\/\/www.sanjaywebdesigner.com\/articles\/#\/schema\/person\/7f15927dca46fba8128eebb678a0ae41\"},\"headline\":\"Tips to use Markdown in Web Development\",\"datePublished\":\"2017-10-31T12:25:07+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.sanjaywebdesigner.com\/articles\/tips-to-use-markdown-in-web-development\/\"},\"wordCount\":999,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/www.sanjaywebdesigner.com\/articles\/#organization\"},\"image\":{\"@id\":\"https:\/\/www.sanjaywebdesigner.com\/articles\/tips-to-use-markdown-in-web-development\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.sanjaywebdesigner.com\/articles\/wp-content\/uploads\/2017\/10\/Tips-to-use-Markdown-in-Web-Development.jpg\",\"keywords\":[\"Tips to use Markdown in Web Development\"],\"articleSection\":[\"Web Designing\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/www.sanjaywebdesigner.com\/articles\/tips-to-use-markdown-in-web-development\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.sanjaywebdesigner.com\/articles\/tips-to-use-markdown-in-web-development\/\",\"url\":\"https:\/\/www.sanjaywebdesigner.com\/articles\/tips-to-use-markdown-in-web-development\/\",\"name\":\"Tips to use Markdown in Web Development - Sanjay Web Designer\",\"isPartOf\":{\"@id\":\"https:\/\/www.sanjaywebdesigner.com\/articles\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.sanjaywebdesigner.com\/articles\/tips-to-use-markdown-in-web-development\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.sanjaywebdesigner.com\/articles\/tips-to-use-markdown-in-web-development\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.sanjaywebdesigner.com\/articles\/wp-content\/uploads\/2017\/10\/Tips-to-use-Markdown-in-Web-Development.jpg\",\"datePublished\":\"2017-10-31T12:25:07+00:00\",\"description\":\"Tips to use Markdown in Web Development. Markdown is a plain-text, lightweight markup language for composing XHTML\/HTML easier\",\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.sanjaywebdesigner.com\/articles\/tips-to-use-markdown-in-web-development\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.sanjaywebdesigner.com\/articles\/tips-to-use-markdown-in-web-development\/#primaryimage\",\"url\":\"https:\/\/www.sanjaywebdesigner.com\/articles\/wp-content\/uploads\/2017\/10\/Tips-to-use-Markdown-in-Web-Development.jpg\",\"contentUrl\":\"https:\/\/www.sanjaywebdesigner.com\/articles\/wp-content\/uploads\/2017\/10\/Tips-to-use-Markdown-in-Web-Development.jpg\",\"width\":1024,\"height\":768,\"caption\":\"Tips to use Markdown in Web Development\"},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.sanjaywebdesigner.com\/articles\/#website\",\"url\":\"https:\/\/www.sanjaywebdesigner.com\/articles\/\",\"name\":\"Sanjay Web Designer\",\"description\":\"Learn Web Designing &amp; Graphic Designing in Depth\",\"publisher\":{\"@id\":\"https:\/\/www.sanjaywebdesigner.com\/articles\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.sanjaywebdesigner.com\/articles\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/www.sanjaywebdesigner.com\/articles\/#organization\",\"name\":\"Sanjay Web Designer\",\"url\":\"https:\/\/www.sanjaywebdesigner.com\/articles\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.sanjaywebdesigner.com\/articles\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/www.sanjaywebdesigner.com\/articles\/wp-content\/uploads\/2021\/08\/cropped-footer-logo-1.png\",\"contentUrl\":\"https:\/\/www.sanjaywebdesigner.com\/articles\/wp-content\/uploads\/2021\/08\/cropped-footer-logo-1.png\",\"width\":240,\"height\":72,\"caption\":\"Sanjay Web Designer\"},\"image\":{\"@id\":\"https:\/\/www.sanjaywebdesigner.com\/articles\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/sanjaywebdesigner\",\"https:\/\/x.com\/sanjaywebdesign\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.sanjaywebdesigner.com\/articles\/#\/schema\/person\/7f15927dca46fba8128eebb678a0ae41\",\"name\":\"Sanjay Jain\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.sanjaywebdesigner.com\/articles\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/e80a626482bdb2e323343f4f015bc61d8655097da7dd1e684b2e2facb0b8c833?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/e80a626482bdb2e323343f4f015bc61d8655097da7dd1e684b2e2facb0b8c833?s=96&d=mm&r=g\",\"caption\":\"Sanjay Jain\"},\"description\":\"I am a graphic and web designer in Delhi and Professional Web and Graphics Designer &amp; Animator. I provide SEO Service in Delhi along with SEO, Web and Graphics Designing Courses training with latest technique.\",\"sameAs\":[\"http:\/\/www.sanjaywebdesigner.com\",\"https:\/\/www.facebook.com\/sanjay73jain\",\"http:\/\/www.linkedin.com\/company\/sanjay-web-designer\",\"https:\/\/x.com\/https:\/\/twitter.com\/sanjaywebdesign\",\"https:\/\/www.youtube.com\/channel\/UCbBRE3GjyAhf1qd6nHg-vQw\",\"http:\/\/sanjaywebdesigner.tumblr.com\/\"],\"url\":\"https:\/\/www.sanjaywebdesigner.com\/articles\/author\/sanjaywe\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Tips to use Markdown in Web Development - Sanjay Web Designer","description":"Tips to use Markdown in Web Development. Markdown is a plain-text, lightweight markup language for composing XHTML\/HTML easier","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.sanjaywebdesigner.com\/articles\/tips-to-use-markdown-in-web-development\/","og_locale":"en_US","og_type":"article","og_title":"Tips to use Markdown in Web Development - Sanjay Web Designer","og_description":"Tips to use Markdown in Web Development. Markdown is a plain-text, lightweight markup language for composing XHTML\/HTML easier","og_url":"https:\/\/www.sanjaywebdesigner.com\/articles\/tips-to-use-markdown-in-web-development\/","og_site_name":"Sanjay Web Designer","article_publisher":"https:\/\/www.facebook.com\/sanjaywebdesigner","article_author":"https:\/\/www.facebook.com\/sanjay73jain","article_published_time":"2017-10-31T12:25:07+00:00","og_image":[{"width":1024,"height":768,"url":"https:\/\/www.sanjaywebdesigner.com\/articles\/wp-content\/uploads\/2017\/10\/Tips-to-use-Markdown-in-Web-Development.jpg","type":"image\/jpeg"}],"author":"Sanjay Jain","twitter_card":"summary_large_image","twitter_creator":"@https:\/\/twitter.com\/sanjaywebdesign","twitter_site":"@sanjaywebdesign","twitter_misc":{"Written by":"Sanjay Jain","Est. reading time":"7 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.sanjaywebdesigner.com\/articles\/tips-to-use-markdown-in-web-development\/#article","isPartOf":{"@id":"https:\/\/www.sanjaywebdesigner.com\/articles\/tips-to-use-markdown-in-web-development\/"},"author":{"name":"Sanjay Jain","@id":"https:\/\/www.sanjaywebdesigner.com\/articles\/#\/schema\/person\/7f15927dca46fba8128eebb678a0ae41"},"headline":"Tips to use Markdown in Web Development","datePublished":"2017-10-31T12:25:07+00:00","mainEntityOfPage":{"@id":"https:\/\/www.sanjaywebdesigner.com\/articles\/tips-to-use-markdown-in-web-development\/"},"wordCount":999,"commentCount":0,"publisher":{"@id":"https:\/\/www.sanjaywebdesigner.com\/articles\/#organization"},"image":{"@id":"https:\/\/www.sanjaywebdesigner.com\/articles\/tips-to-use-markdown-in-web-development\/#primaryimage"},"thumbnailUrl":"https:\/\/www.sanjaywebdesigner.com\/articles\/wp-content\/uploads\/2017\/10\/Tips-to-use-Markdown-in-Web-Development.jpg","keywords":["Tips to use Markdown in Web Development"],"articleSection":["Web Designing"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.sanjaywebdesigner.com\/articles\/tips-to-use-markdown-in-web-development\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.sanjaywebdesigner.com\/articles\/tips-to-use-markdown-in-web-development\/","url":"https:\/\/www.sanjaywebdesigner.com\/articles\/tips-to-use-markdown-in-web-development\/","name":"Tips to use Markdown in Web Development - Sanjay Web Designer","isPartOf":{"@id":"https:\/\/www.sanjaywebdesigner.com\/articles\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.sanjaywebdesigner.com\/articles\/tips-to-use-markdown-in-web-development\/#primaryimage"},"image":{"@id":"https:\/\/www.sanjaywebdesigner.com\/articles\/tips-to-use-markdown-in-web-development\/#primaryimage"},"thumbnailUrl":"https:\/\/www.sanjaywebdesigner.com\/articles\/wp-content\/uploads\/2017\/10\/Tips-to-use-Markdown-in-Web-Development.jpg","datePublished":"2017-10-31T12:25:07+00:00","description":"Tips to use Markdown in Web Development. Markdown is a plain-text, lightweight markup language for composing XHTML\/HTML easier","inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.sanjaywebdesigner.com\/articles\/tips-to-use-markdown-in-web-development\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.sanjaywebdesigner.com\/articles\/tips-to-use-markdown-in-web-development\/#primaryimage","url":"https:\/\/www.sanjaywebdesigner.com\/articles\/wp-content\/uploads\/2017\/10\/Tips-to-use-Markdown-in-Web-Development.jpg","contentUrl":"https:\/\/www.sanjaywebdesigner.com\/articles\/wp-content\/uploads\/2017\/10\/Tips-to-use-Markdown-in-Web-Development.jpg","width":1024,"height":768,"caption":"Tips to use Markdown in Web Development"},{"@type":"WebSite","@id":"https:\/\/www.sanjaywebdesigner.com\/articles\/#website","url":"https:\/\/www.sanjaywebdesigner.com\/articles\/","name":"Sanjay Web Designer","description":"Learn Web Designing &amp; Graphic Designing in Depth","publisher":{"@id":"https:\/\/www.sanjaywebdesigner.com\/articles\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.sanjaywebdesigner.com\/articles\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.sanjaywebdesigner.com\/articles\/#organization","name":"Sanjay Web Designer","url":"https:\/\/www.sanjaywebdesigner.com\/articles\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.sanjaywebdesigner.com\/articles\/#\/schema\/logo\/image\/","url":"https:\/\/www.sanjaywebdesigner.com\/articles\/wp-content\/uploads\/2021\/08\/cropped-footer-logo-1.png","contentUrl":"https:\/\/www.sanjaywebdesigner.com\/articles\/wp-content\/uploads\/2021\/08\/cropped-footer-logo-1.png","width":240,"height":72,"caption":"Sanjay Web Designer"},"image":{"@id":"https:\/\/www.sanjaywebdesigner.com\/articles\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/sanjaywebdesigner","https:\/\/x.com\/sanjaywebdesign"]},{"@type":"Person","@id":"https:\/\/www.sanjaywebdesigner.com\/articles\/#\/schema\/person\/7f15927dca46fba8128eebb678a0ae41","name":"Sanjay Jain","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.sanjaywebdesigner.com\/articles\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/e80a626482bdb2e323343f4f015bc61d8655097da7dd1e684b2e2facb0b8c833?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/e80a626482bdb2e323343f4f015bc61d8655097da7dd1e684b2e2facb0b8c833?s=96&d=mm&r=g","caption":"Sanjay Jain"},"description":"I am a graphic and web designer in Delhi and Professional Web and Graphics Designer &amp; Animator. I provide SEO Service in Delhi along with SEO, Web and Graphics Designing Courses training with latest technique.","sameAs":["http:\/\/www.sanjaywebdesigner.com","https:\/\/www.facebook.com\/sanjay73jain","http:\/\/www.linkedin.com\/company\/sanjay-web-designer","https:\/\/x.com\/https:\/\/twitter.com\/sanjaywebdesign","https:\/\/www.youtube.com\/channel\/UCbBRE3GjyAhf1qd6nHg-vQw","http:\/\/sanjaywebdesigner.tumblr.com\/"],"url":"https:\/\/www.sanjaywebdesigner.com\/articles\/author\/sanjaywe\/"}]}},"_links":{"self":[{"href":"https:\/\/www.sanjaywebdesigner.com\/articles\/wp-json\/wp\/v2\/posts\/1679","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.sanjaywebdesigner.com\/articles\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.sanjaywebdesigner.com\/articles\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.sanjaywebdesigner.com\/articles\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.sanjaywebdesigner.com\/articles\/wp-json\/wp\/v2\/comments?post=1679"}],"version-history":[{"count":0,"href":"https:\/\/www.sanjaywebdesigner.com\/articles\/wp-json\/wp\/v2\/posts\/1679\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.sanjaywebdesigner.com\/articles\/wp-json\/wp\/v2\/media\/1680"}],"wp:attachment":[{"href":"https:\/\/www.sanjaywebdesigner.com\/articles\/wp-json\/wp\/v2\/media?parent=1679"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.sanjaywebdesigner.com\/articles\/wp-json\/wp\/v2\/categories?post=1679"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.sanjaywebdesigner.com\/articles\/wp-json\/wp\/v2\/tags?post=1679"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}