{"id":369,"date":"2017-05-15T09:32:30","date_gmt":"2017-05-15T09:32:30","guid":{"rendered":"http:\/\/imalogic.com\/blog\/?p=369"},"modified":"2017-05-15T09:36:32","modified_gmt":"2017-05-15T09:36:32","slug":"first-step-to-mark-down","status":"publish","type":"post","link":"https:\/\/imalogic.com\/blog\/2017\/05\/15\/first-step-to-mark-down\/","title":{"rendered":"First step to Mark Down"},"content":{"rendered":"<body><p><\/p>\n<div id=\"wmd-preview-section-1293\" class=\"wmd-preview-section preview-content\">\n<h1 id=\"mark-down\"><a href=\"https:\/\/i0.wp.com\/imalogic.com\/blog\/wp-content\/uploads\/2017\/05\/austin.png?ssl=1\"><img data-recalc-dims=\"1\" decoding=\"async\" data-attachment-id=\"375\" data-permalink=\"https:\/\/imalogic.com\/blog\/2017\/05\/15\/first-step-to-mark-down\/austin\/\" data-orig-file=\"https:\/\/i0.wp.com\/imalogic.com\/blog\/wp-content\/uploads\/2017\/05\/austin.png?fit=512%2C512&amp;ssl=1\" data-orig-size=\"512,512\" data-comments-opened=\"0\" data-image-meta=\"{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;,&quot;orientation&quot;:&quot;0&quot;}\" data-image-title=\"austin\" data-image-description=\"\" data-image-caption=\"\" data-large-file=\"https:\/\/i0.wp.com\/imalogic.com\/blog\/wp-content\/uploads\/2017\/05\/austin.png?fit=512%2C512&amp;ssl=1\" class=\" wp-image-375 alignright\" src=\"https:\/\/i0.wp.com\/imalogic.com\/blog\/wp-content\/uploads\/2017\/05\/austin.png?resize=184%2C184&#038;ssl=1\" alt=\"\" width=\"184\" height=\"184\" loading=\"lazy\" srcset=\"https:\/\/i0.wp.com\/imalogic.com\/blog\/wp-content\/uploads\/2017\/05\/austin.png?resize=300%2C300&amp;ssl=1 300w, https:\/\/i0.wp.com\/imalogic.com\/blog\/wp-content\/uploads\/2017\/05\/austin.png?resize=150%2C150&amp;ssl=1 150w, https:\/\/i0.wp.com\/imalogic.com\/blog\/wp-content\/uploads\/2017\/05\/austin.png?w=512&amp;ssl=1 512w\" sizes=\"auto, (max-width: 184px) 100vw, 184px\" \/><\/a>Mark Down !<\/h1>\n<p><a href=\"http:\/\/daringfireball.net\/projects\/markdown\/\">Markdown<\/a> is a way to style text on the web. You control the display of the document; formatting words as bold or italic, adding images, and creating lists are just a few of the things we can do with Markdown. Mostly, Markdown is just regular text with a few non-alphabetic characters thrown in, like <code class=\"highlighter-rouge\">#<\/code> or <code class=\"highlighter-rouge\">*<\/code>.<\/p>\n<p>You can use Markdown most places around GitHub:<\/p>\n<ul>\n<li><a href=\"https:\/\/gist.github.com\/\">Gists<\/a><\/li>\n<li>Comments in Issues and Pull Requests<\/li>\n<li>Files with the <code class=\"highlighter-rouge\">.md<\/code> or <code class=\"highlighter-rouge\">.markdown<\/code> extension<\/li>\n<\/ul>\n<h1>Examples<\/h1>\n<h2>Text<\/h2>\n<pre class=\"source\">It's very easy to make some words **bold** and other words *italic* with Markdown. You can even [link to Google!](http:\/\/google.com)\r\n<\/pre>\n<div class=\"rendered\">It\u2019s very easy to make some words <strong>bold<\/strong> and other words <em>italic<\/em> with Markdown. You can even <a href=\"http:\/\/google.com\/\">link to Google!<\/a><\/div>\n<h2>Lists<\/h2>\n<pre class=\"source\">Sometimes you want numbered lists:\r\n\r\n1. One\r\n2. Two\r\n3. Three\r\n\r\nSometimes you want bullet points:\r\n\r\n* Start a line with a star\r\n* Profit!\r\n\r\nAlternatively,\r\n\r\n- Dashes work just as well\r\n- And if you have sub points, put two spaces before the dash or star:\r\n  - Like this\r\n  - And this\r\n<\/pre>\n<div class=\"rendered\">\n<p>Sometimes you want numbered lists:<\/p>\n<ol>\n<li>One<\/li>\n<li>Two<\/li>\n<li>Three<\/li>\n<\/ol>\n<p>Sometimes you want bullet points:<\/p>\n<ul>\n<li>Start a line with a star<\/li>\n<li>Profit!<\/li>\n<\/ul>\n<p>Alternatively,<\/p>\n<ul>\n<li>Dashes work just as well<\/li>\n<li>And if you have sub points, put two spaces before the dash or star:\n<ul>\n<li>Like this<\/li>\n<li>And this<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<\/div>\n<h2>Images<\/h2>\n<pre class=\"source\">If you want to embed images, this is how you do it:\r\n\r\n![Image of Yaktocat](https:\/\/octodex.github.com\/images\/yaktocat.png)\r\n<\/pre>\n<div class=\"rendered\">\n<p>If you want to embed images, this is how you do it:<\/p>\n<p><img data-recalc-dims=\"1\" decoding=\"async\" src=\"https:\/\/i0.wp.com\/octodex.github.com\/images\/yaktocat.png?w=810&#038;ssl=1\" alt=\"Image of Yakotocat\" loading=\"lazy\"><\/p>\n<\/div>\n<h2>Headers &amp; Quotes<\/h2>\n<pre class=\"source\"># Structured documents\r\n\r\nSometimes it's useful to have different levels of headings to structure your documents. Start lines with a `#` to create headings. Multiple `##` in a row denote smaller heading sizes.\r\n\r\n### This is a third-tier heading\r\n\r\nYou can use one `#` all the way up to `######` six for different heading sizes.\r\n\r\nIf you'd like to quote someone, use the &gt; character before the line:\r\n\r\n&gt; Coffee. The finest organic suspension ever devised... I beat the Borg with it.\r\n&gt; - Captain Janeway\r\n<\/pre>\n<div class=\"rendered\">\n<h1>Structured documents<\/h1>\n<p>Sometimes it\u2019s useful to have different levels of headings to structure your documents. Start lines with a <code>#<\/code> to create headings. Multiple <code>##<\/code> in a row denote smaller heading sizes.<\/p>\n<h3>This is a third-tier heading<\/h3>\n<p>You can use one <code>#<\/code> all the way up to <code>######<\/code> six for different heading sizes.<\/p>\n<p>If you\u2019d like to quote someone, use the &gt; character before the line:<\/p>\n<blockquote><p>Coffee. The finest organic suspension ever devised\u2026 I beat the Borg with it. \u2013 Captain Janeway<\/p><\/blockquote>\n<\/div>\n<h2><span style=\"color: #000000;\">Code<\/span><\/h2>\n<pre class=\"source\">There are many different ways to style code with GitHub's markdown. If you have inline code blocks, wrap them in backticks: `var example = true`.  If you've got a longer block of code, you can indent with four spaces:\r\n\r\n    if (isAwesome){\r\n      return true\r\n    }\r\n\r\nGitHub also supports something called code fencing, which allows for multiple lines without indentation:\r\n\r\n```\r\nif (isAwesome){\r\n  return true\r\n}\r\n```\r\n\r\nAnd if you'd like to use syntax highlighting, include the language:\r\n\r\n```javascript\r\nif (isAwesome){\r\n  return true\r\n}\r\n```\r\n<\/pre>\n<div class=\"rendered\">\n<p>There are many different ways to style code with GitHub\u2019s markdown. If you have inline code blocks, wrap them in backticks: <code>var example = true<\/code>. If you\u2019ve got a longer block of code, you can indent with four spaces:<\/p>\n<pre><code>if (isAwesome){\r\n  return true\r\n}\r\n<\/code><\/pre>\n<p>GitHub also supports something called code fencing, which allows for multiple lines without indentation:<\/p>\n<pre><code>if (isAwesome){\r\nreturn true\r\n}\r\n<\/code><\/pre>\n<p>And if you\u2019d like to use syntax highlighting, include the language:<\/p>\n<div class=\"highlight highlight-javascript\">\n<pre><span class=\"k\" style=\"color: #ff0000;\">if <\/span><span class=\"p\">(<\/span><span class=\"nx\">isAwesome<\/span><span class=\"p\">){<\/span>\r\n  <span class=\"k\">return<\/span> <span class=\"kc\" style=\"color: #ff0000;\">true<\/span>\r\n<span class=\"p\">}<\/span><\/pre>\n<\/div>\n<\/div>\n<ul class=\"example-nav js-examples-nav\">\n<li>Extras<\/li>\n<\/ul>\n<pre class=\"source\">GitHub supports many extras in Markdown that help you reference and link to people. If you ever want to direct a comment at someone, you can prefix their name with an @ symbol: Hey @kneath \u2014 love your sweater!\r\n\r\nBut I have to admit, tasks lists are my favorite:\r\n\r\n- [x] This is a complete item\r\n- [ ] This is an incomplete item\r\n\r\nWhen you include a task list in the first comment of an Issue, you will see a helpful progress bar in your list of issues. It works in Pull Requests, too!\r\n\r\nAnd, of course emoji! :sparkles: :camel: :boom:\r\n<\/pre>\n<div class=\"rendered\">\n<p>GitHub supports many extras in Markdown that help you reference and link to people. If you ever want to direct a comment at someone, you can prefix their name with an @ symbol: Hey <a class=\"user-mention\" href=\"https:\/\/github.com\/kneath\">@kneath<\/a> \u2014 love your sweater!<\/p>\n<p>But I have to admit, tasks lists are my favorite:<\/p>\n<ul class=\"task-list\">\n<li class=\"task-list-item\"><input class=\"task-list-item-checkbox\" checked disabled type=\"checkbox\"> This is a complete item<\/li>\n<li class=\"task-list-item\"><input class=\"task-list-item-checkbox\" disabled type=\"checkbox\"> This is an incomplete item<\/li>\n<\/ul>\n<p>When you include a task list in the first comment of an Issue, you will see a helpful progress bar in your list of issues. It works in Pull Requests, too!<\/p>\n<p>And, of course emoji! <img data-recalc-dims=\"1\" decoding=\"async\" class=\"emoji\" title=\":sparkles:\" src=\"https:\/\/i0.wp.com\/assets-cdn.github.com\/images\/icons\/emoji\/unicode\/2728.png?resize=20%2C20&#038;ssl=1\" alt=\":sparkles:\" width=\"20\" height=\"20\" align=\"absmiddle\" loading=\"lazy\"> <img data-recalc-dims=\"1\" decoding=\"async\" class=\"emoji\" title=\":camel:\" src=\"https:\/\/i0.wp.com\/assets-cdn.github.com\/images\/icons\/emoji\/unicode\/1f42b.png?resize=20%2C20&#038;ssl=1\" alt=\":camel:\" width=\"20\" height=\"20\" align=\"absmiddle\" loading=\"lazy\"> <img data-recalc-dims=\"1\" decoding=\"async\" class=\"emoji\" title=\":boom:\" src=\"https:\/\/i0.wp.com\/assets-cdn.github.com\/images\/icons\/emoji\/unicode\/1f4a5.png?resize=20%2C20&#038;ssl=1\" alt=\":boom:\" width=\"20\" height=\"20\" align=\"absmiddle\" loading=\"lazy\"><\/p>\n<\/div>\n<h2>Syntax guide<\/h2>\n<p>Here\u2019s an overview of Markdown syntax that you can use anywhere on GitHub.com or in your own text files.<\/p>\n<h3>Headers<\/h3>\n<div class=\"language-markdown highlighter-rouge\">\n<pre class=\"highlight\"><code><span class=\"gh\"># This is an &lt;h1&gt; tag<\/span>\r\n<span class=\"gu\">## This is an &lt;h2&gt; tag<\/span>\r\n<span class=\"gu\">###### This is an &lt;h6&gt; tag<\/span>\r\n<\/code><\/pre>\n<\/div>\n<h3>Emphasis<\/h3>\n<div class=\"language-markdown highlighter-rouge\">\n<pre class=\"highlight\"><code><span class=\"ge\">*This text will be italic*<\/span>\r\n<span class=\"ge\">_This will also be italic_<\/span>\r\n\r\n<span class=\"gs\">**This text will be bold**<\/span>\r\n<span class=\"gs\">__This will also be bold__<\/span>\r\n\r\n<span class=\"ge\">_You **can** combine them_<\/span>\r\n<\/code><\/pre>\n<\/div>\n<h3>Lists<\/h3>\n<h4>Unordered<\/h4>\n<div class=\"language-markdown highlighter-rouge\">\n<pre class=\"highlight\"><code><span class=\"p\">*<\/span> Item 1\r\n<span class=\"p\">*<\/span> Item 2\r\n<span class=\"p\">  *<\/span> Item 2a\r\n<span class=\"p\">  *<\/span> Item 2b\r\n<\/code><\/pre>\n<\/div>\n<h4>Ordered<\/h4>\n<div class=\"language-markdown highlighter-rouge\">\n<pre class=\"highlight\"><code><span class=\"p\">1.<\/span> Item 1\r\n<span class=\"p\">1.<\/span> Item 2\r\n<span class=\"p\">1.<\/span> Item 3\r\n<span class=\"p\">   1.<\/span> Item 3a\r\n<span class=\"p\">   1.<\/span> Item 3b\r\n<\/code><\/pre>\n<\/div>\n<h3>Images<\/h3>\n<div class=\"language-markdown highlighter-rouge\">\n<pre class=\"highlight\"><code><span class=\"p\">![<\/span><span class=\"nv\">GitHub Logo<\/span><span class=\"p\">](<\/span><span class=\"sx\">\/images\/logo.png<\/span><span class=\"p\">)<\/span>\r\nFormat: !<span class=\"p\">[<\/span><span class=\"nv\">Alt Text<\/span><span class=\"p\">](<\/span><span class=\"sx\">url<\/span><span class=\"p\">)<\/span>\r\n<\/code><\/pre>\n<\/div>\n<h3>Links<\/h3>\n<div class=\"language-markdown highlighter-rouge\">\n<pre class=\"highlight\"><code>http:\/\/github.com - automatic!\r\n<span class=\"p\">[<\/span><span class=\"nv\">GitHub<\/span><span class=\"p\">](<\/span><span class=\"sx\">http:\/\/github.com<\/span><span class=\"p\">)<\/span>\r\n<\/code><\/pre>\n<\/div>\n<h3>Blockquotes<\/h3>\n<div class=\"language-markdown highlighter-rouge\">\n<pre class=\"highlight\"><code>As Kanye West said:\r\n<span class=\"gt\">\r\n&gt; We're living the future so<\/span>\r\n<span class=\"gt\">&gt; the present is our past.<\/span>\r\n<\/code><\/pre>\n<\/div>\n<h3>Inline code<\/h3>\n<div class=\"highlighter-rouge\">\n<pre class=\"highlight\"><code>I think you should use an\r\n`&lt;addr&gt;` element here instead.\r\n<\/code><\/pre>\n<\/div>\n<h2>GitHub Flavored Markdown<\/h2>\n<p>GitHub.com uses its own version of the Markdown syntax that provides an additional set of useful features, many of which make it easier to work with content on GitHub.com.<\/p>\n<p>Note that some features of GitHub Flavored Markdown are only available in the descriptions and comments of Issues and Pull Requests. These include @mentions as well as references to SHA-1 hashes, Issues, and Pull Requests. Task Lists are also available in Gist comments and in Gist Markdown files.<\/p>\n<h3>Syntax highlighting<\/h3>\n<p>Here\u2019s an example of how you can use syntax highlighting with <a href=\"https:\/\/help.github.com\/articles\/github-flavored-markdown\">GitHub Flavored Markdown<\/a>:<\/p>\n<div class=\"highlighter-rouge\">\n<pre class=\"highlight\"><code>```javascript\r\nfunction fancyAlert(arg) {\r\n  if(arg) {\r\n    $.facebox({div:'#foo'})\r\n  }\r\n}\r\n```\r\n<\/code><\/pre>\n<\/div>\n<p>You can also simply indent your code by four spaces:<\/p>\n<div class=\"highlighter-rouge\">\n<pre class=\"highlight\"><code>    function fancyAlert(arg) {\r\n      if(arg) {\r\n        $.facebox({div:'#foo'})\r\n      }\r\n    }\r\n<\/code><\/pre>\n<\/div>\n<p>Here\u2019s an example of Python code without syntax highlighting:<\/p>\n<div class=\"highlighter-rouge\">\n<pre class=\"highlight\"><code>def foo():\r\n    if not bar:\r\n        return True\r\n<\/code><\/pre>\n<\/div>\n<h3>Task Lists<\/h3>\n<div class=\"highlighter-rouge\">\n<pre class=\"highlight\"><code>- [x] @mentions, #refs, [links](), **formatting**, and &lt;del&gt;tags&lt;\/del&gt; supported\r\n- [x] list syntax required (any unordered or ordered list supported)\r\n- [x] this is a complete item\r\n- [ ] this is an incomplete item\r\n<\/code><\/pre>\n<\/div>\n<p>If you include a task list in the first comment of an Issue, you will get a handy progress indicator in your issue list. It also works in Pull Requests!<\/p>\n<h3>Tables<\/h3>\n<p>You can create tables by assembling a list of words and dividing them with hyphens <code class=\"highlighter-rouge\">-<\/code> (for the first row), and then separating each column with a pipe <code class=\"highlighter-rouge\">|<\/code>:<\/p>\n<div class=\"highlighter-rouge\">\n<pre class=\"highlight\"><code>First Header | Second Header\r\n------------ | -------------\r\nContent from cell 1 | Content from cell 2\r\nContent in the first column | Content in the second column\r\n<\/code><\/pre>\n<\/div>\n<p>Would become:<\/p>\n<table>\n<thead>\n<tr>\n<th>First Header<\/th>\n<th>Second Header<\/th>\n<\/tr>\n<\/thead>\n<tbody>\n<tr>\n<td>Content from cell 1<\/td>\n<td>Content from cell 2<\/td>\n<\/tr>\n<tr>\n<td>Content in the first column<\/td>\n<td>Content in the second column<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<h3>SHA references<\/h3>\n<p>Any reference to a commit\u2019s <a href=\"http:\/\/en.wikipedia.org\/wiki\/SHA-1\">SHA-1 hash<\/a> will be automatically converted into a link to that commit on GitHub.<\/p>\n<div class=\"highlighter-rouge\">\n<pre class=\"highlight\"><code>16c999e8c71134401a78d4d46435517b2271d6ac\r\nmojombo@16c999e8c71134401a78d4d46435517b2271d6ac\r\nmojombo\/github-flavored-markdown@16c999e8c71134401a78d4d46435517b2271d6ac\r\n<\/code><\/pre>\n<\/div>\n<h3>Issue references within a repository<\/h3>\n<p>Any number that refers to an Issue or Pull Request will be automatically converted into a link.<\/p>\n<div class=\"highlighter-rouge\">\n<pre class=\"highlight\"><code>#1\r\nmojombo#1\r\nmojombo\/github-flavored-markdown#1\r\n<\/code><\/pre>\n<\/div>\n<h3>Username @mentions<\/h3>\n<p>Typing an <code class=\"highlighter-rouge\">@<\/code> symbol, followed by a username, will notify that person to come and view the comment. This is called an \u201c@mention\u201d, because you\u2019re <em>mentioning<\/em> the individual. You can also @mention teams within an organization.<\/p>\n<h3>Automatic linking for URLs<\/h3>\n<p>Any URL (like <code class=\"highlighter-rouge\">http:\/\/www.github.com\/<\/code>) will be automatically converted into a clickable link.<\/p>\n<h3>Strikethrough<\/h3>\n<p>Any word wrapped with two tildes (like <code class=\"highlighter-rouge\">~~this~~<\/code>) will appear crossed out.<\/p>\n<h3>Emoji<\/h3>\n<p>GitHub supports <a href=\"https:\/\/help.github.com\/articles\/basic-writing-and-formatting-syntax\/#using-emoji\">emoji<\/a>! <img data-recalc-dims=\"1\" decoding=\"async\" class=\"emoji\" title=\":sparkles:\" src=\"https:\/\/i0.wp.com\/assets-cdn.github.com\/images\/icons\/emoji\/unicode\/2728.png?resize=20%2C20&#038;ssl=1\" alt=\":sparkles:\" width=\"20\" height=\"20\" align=\"absmiddle\" loading=\"lazy\"> <img data-recalc-dims=\"1\" decoding=\"async\" class=\"emoji\" title=\":camel:\" src=\"https:\/\/i0.wp.com\/assets-cdn.github.com\/images\/icons\/emoji\/unicode\/1f42b.png?resize=20%2C20&#038;ssl=1\" alt=\":camel:\" width=\"20\" height=\"20\" align=\"absmiddle\" loading=\"lazy\"> <img data-recalc-dims=\"1\" decoding=\"async\" class=\"emoji\" title=\":boom:\" src=\"https:\/\/i0.wp.com\/assets-cdn.github.com\/images\/icons\/emoji\/unicode\/1f4a5.png?resize=20%2C20&#038;ssl=1\" alt=\":boom:\" width=\"20\" height=\"20\" align=\"absmiddle\" loading=\"lazy\"><\/p>\n<p>To see a list of every image we support, check out the <a href=\"http:\/\/www.emoji-cheat-sheet.com\/\">Emoji Cheat Sheet<\/a>.<\/p>\n<h1>Markdown Extra<\/h1>\n<h3><a href=\"http:\/\/michelf.ca\/projects\/php-markdown\/extra\/#table\">Tables<\/a><\/h3>\n<p>The following markdown:<\/p>\n<div class=\"highlight highlight-source-gfm\">\n<pre>| Item      | Value | Qty |\r\n| --------- | -----:|:--: |\r\n| Computer  | $1600 | 5   |\r\n| Phone     |   $12 | 12  |\r\n| Pipe      |    $1 |234  |<\/pre>\n<\/div>\n<p>will render to something like this depending on how you choose to style it:<\/p>\n<table>\n<thead>\n<tr>\n<th>Item<\/th>\n<th align=\"right\">Value<\/th>\n<th align=\"center\">Qty<\/th>\n<\/tr>\n<\/thead>\n<tbody>\n<tr>\n<td>Computer<\/td>\n<td align=\"right\">$1600<\/td>\n<td align=\"center\">5<\/td>\n<\/tr>\n<tr>\n<td>Phone<\/td>\n<td align=\"right\">$12<\/td>\n<td align=\"center\">12<\/td>\n<\/tr>\n<tr>\n<td>Pipe<\/td>\n<td align=\"right\">$1<\/td>\n<td align=\"center\">234<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p>You can also specify a class for the generated tables using <code>Markdown.Extra.init(converter, {table_class: \"table table-striped\"})<\/code> for instance.<\/p>\n<p>Span-level markdown inside of table cells will also be converted.<\/p>\n<h3><a id=\"user-content-fenced-code-blocks\" class=\"anchor\" href=\"https:\/\/github.com\/jmcmanus\/pagedown-extra\/blob\/master\/README.md#fenced-code-blocks\"><\/a><a href=\"http:\/\/github.github.com\/github-flavored-markdown\/\">Fenced Code Blocks<\/a><\/h3>\n<p>Fenced code blocks are supported \u00e0 la GitHub. This markdown:<\/p>\n<pre><code>```\r\nvar x = 2;\r\n```\r\n<\/code><\/pre>\n<p>Will be transformed into:<\/p>\n<div class=\"highlight highlight-text-html-basic\">\n<pre>&lt;<span class=\"pl-ent\">pre<\/span>&gt;\r\n    &lt;<span class=\"pl-ent\">code<\/span>&gt;var x = 2;&lt;\/<span class=\"pl-ent\">code<\/span>&gt;\r\n&lt;\/<span class=\"pl-ent\">pre<\/span>&gt;<\/pre>\n<\/div>\n<p>You can specify a syntax highlighter in the options object passed to <code>Markdown.Extra.init<\/code>, in order to generated html compatible with either <a title=\"Prettify\" href=\"http:\/\/code.google.com\/p\/google-code-prettify\/\">google-code-prettify<\/a> or <a title=\"HighlightJs\" href=\"http:\/\/softwaremaniacs.org\/soft\/highlight\/en\/\">Highlight.js<\/a>:<\/p>\n<div class=\"highlight highlight-source-js\">\n<pre><span class=\"pl-c\">\/\/ highlighter can be either `prettify` or `highlight`<\/span>\r\n<span class=\"pl-smi\">Markdown<\/span>.<span class=\"pl-smi\">Extra<\/span>.<span class=\"pl-en\">init<\/span>(converter, {highlighter<span class=\"pl-k\">:<\/span> <span class=\"pl-s\"><span class=\"pl-pds\">\"<\/span>prettify<span class=\"pl-pds\">\"<\/span><\/span>});<\/pre>\n<\/div>\n<p>If either of those is specified, the language type will be added to the code tag, e.g. <code>&lt;code class=\"language-javascript\"&gt;<\/code>, otherwise you just get the standard <code>&lt;code class=\"javascript\"&gt;<\/code> as in PHP Markdown Extra. If <code>prettify<\/code> is specified, <code>&lt;pre&gt;<\/code>also becomes <code>&lt;pre class=\"prettyprint\"&gt;<\/code>. Otherwise, the markup is the same as what Pagedown produces for regular indented code blocks. For example, when using <code>{highlighter: \"prettify\"}<\/code> as shown above, this:<\/p>\n<pre><code>```javascript\r\nvar x = 2;\r\n```\r\n<\/code><\/pre>\n<p>Would generate the following html:<\/p>\n<div class=\"highlight highlight-text-html-basic\">\n<pre>&lt;<span class=\"pl-ent\">pre<\/span> <span class=\"pl-e\">class<\/span>=<span class=\"pl-s\"><span class=\"pl-pds\">\"<\/span>prettyprint<span class=\"pl-pds\">\"<\/span><\/span>&gt;\r\n    &lt;<span class=\"pl-ent\">code<\/span> <span class=\"pl-e\">class<\/span>=<span class=\"pl-s\"><span class=\"pl-pds\">\"<\/span>language-javascript<span class=\"pl-pds\">\"<\/span><\/span>&gt;var x = 2;&lt;\/<span class=\"pl-ent\">code<\/span>&gt;\r\n&lt;\/<span class=\"pl-ent\">pre<\/span>&gt;<\/pre>\n<\/div>\n<h3><a id=\"user-content-definition-lists\" class=\"anchor\" href=\"https:\/\/github.com\/jmcmanus\/pagedown-extra\/blob\/master\/README.md#definition-lists\"><\/a><a href=\"http:\/\/michelf.ca\/projects\/php-markdown\/extra\/#def-list\">Definition Lists<\/a><\/h3>\n<div class=\"highlight highlight-source-gfm\">\n<pre>Term 1\r\n:   Definition 1\r\n\r\nTerm 2\r\n:   This definition has a code block.\r\n\r\n        code block\r\n<\/pre>\n<\/div>\n<p>becomes:<\/p>\n<div class=\"highlight highlight-text-html-basic\">\n<pre>&lt;<span class=\"pl-ent\">dl<\/span>&gt;\r\n  &lt;<span class=\"pl-ent\">dt<\/span>&gt;Term 1&lt;\/<span class=\"pl-ent\">dt<\/span>&gt;\r\n  &lt;<span class=\"pl-ent\">dd<\/span>&gt;\r\n    Definition 1\r\n  &lt;\/<span class=\"pl-ent\">dd<\/span>&gt;\r\n  &lt;<span class=\"pl-ent\">dt<\/span>&gt;Term 2&lt;\/<span class=\"pl-ent\">dt<\/span>&gt;\r\n  &lt;<span class=\"pl-ent\">dd<\/span>&gt;\r\n    This definition has a code block.\r\n    &lt;<span class=\"pl-ent\">pre<\/span>&gt;&lt;<span class=\"pl-ent\">code<\/span>&gt;code block&lt;\/<span class=\"pl-ent\">code<\/span>&gt;&lt;\/<span class=\"pl-ent\">pre<\/span>&gt;\r\n  &lt;\/<span class=\"pl-ent\">dd<\/span>&gt;\r\n&lt;\/<span class=\"pl-ent\">dl<\/span>&gt;<\/pre>\n<\/div>\n<p>Definitions can contain both inline and block-level markdown.<\/p>\n<h3><a id=\"user-content-footnotes\" class=\"anchor\" href=\"https:\/\/github.com\/jmcmanus\/pagedown-extra\/blob\/master\/README.md#footnotes\"><\/a><a href=\"https:\/\/github.com\/fletcher\/MultiMarkdown\/blob\/master\/Documentation\/MultiMarkdown%20User%27s%20Guide.md#footnotes\">Footnotes<\/a><\/h3>\n<div class=\"highlight highlight-source-gfm\">\n<pre>Here is a footnote[^footnote].\r\n\r\n  [<span class=\"pl-e\">^footnote<\/span>]: Here is the <span class=\"pl-mi\">*text*<\/span> of the <span class=\"pl-mb\">**footnote**<\/span>.<\/pre>\n<\/div>\n<p>becomes:<\/p>\n<div class=\"highlight highlight-text-html-basic\">\n<pre>&lt;<span class=\"pl-ent\">p<\/span>&gt;Here is a footnote&lt;<span class=\"pl-ent\">a<\/span> <span class=\"pl-e\">href<\/span>=<span class=\"pl-s\"><span class=\"pl-pds\">\"<\/span>#fn:footnote<span class=\"pl-pds\">\"<\/span><\/span> <span class=\"pl-e\">id<\/span>=<span class=\"pl-s\"><span class=\"pl-pds\">\"<\/span>fnref:footnote<span class=\"pl-pds\">\"<\/span><\/span> <span class=\"pl-e\">title<\/span>=<span class=\"pl-s\"><span class=\"pl-pds\">\"<\/span>See footnote<span class=\"pl-pds\">\"<\/span><\/span> <span class=\"pl-e\">class<\/span>=<span class=\"pl-s\"><span class=\"pl-pds\">\"<\/span>footnote<span class=\"pl-pds\">\"<\/span><\/span>&gt;1&lt;\/<span class=\"pl-ent\">a<\/span>&gt;.&lt;\/<span class=\"pl-ent\">p<\/span>&gt;\r\n\r\n&lt;<span class=\"pl-ent\">div<\/span> <span class=\"pl-e\">class<\/span>=<span class=\"pl-s\"><span class=\"pl-pds\">\"<\/span>footnotes<span class=\"pl-pds\">\"<\/span><\/span>&gt;\r\n&lt;<span class=\"pl-ent\">hr<\/span>&gt;\r\n&lt;<span class=\"pl-ent\">ol<\/span>&gt;\r\n&lt;<span class=\"pl-ent\">li<\/span> <span class=\"pl-e\">id<\/span>=<span class=\"pl-s\"><span class=\"pl-pds\">\"<\/span>fn:footnote<span class=\"pl-pds\">\"<\/span><\/span>&gt;Here is the &lt;<span class=\"pl-ent\">em<\/span>&gt;text&lt;\/<span class=\"pl-ent\">em<\/span>&gt; of the &lt;<span class=\"pl-ent\">strong<\/span>&gt;footnote&lt;\/<span class=\"pl-ent\">strong<\/span>&gt;. &lt;<span class=\"pl-ent\">a<\/span> <span class=\"pl-e\">href<\/span>=<span class=\"pl-s\"><span class=\"pl-pds\">\"<\/span>#fnref:footnote<span class=\"pl-pds\">\"<\/span><\/span> <span class=\"pl-e\">title<\/span>=<span class=\"pl-s\"><span class=\"pl-pds\">\"<\/span>Return to article<span class=\"pl-pds\">\"<\/span><\/span> <span class=\"pl-e\">class<\/span>=<span class=\"pl-s\"><span class=\"pl-pds\">\"<\/span>reversefootnote<span class=\"pl-pds\">\"<\/span><\/span>&gt;\u21a9&lt;\/<span class=\"pl-ent\">a<\/span>&gt;&lt;\/<span class=\"pl-ent\">li<\/span>&gt;\r\n&lt;\/<span class=\"pl-ent\">ol<\/span>&gt;\r\n&lt;\/<span class=\"pl-ent\">div<\/span>&gt;<\/pre>\n<\/div>\n<h3><a id=\"user-content-special-attributes\" class=\"anchor\" href=\"https:\/\/github.com\/jmcmanus\/pagedown-extra\/blob\/master\/README.md#special-attributes\"><\/a><a href=\"http:\/\/michelf.ca\/projects\/php-markdown\/extra\/#spe-attr\">Special Attributes<\/a><\/h3>\n<p>You can add class and id attributes to headers and gfm fenced code blocks.<\/p>\n<pre><code>``` {#gfm-id .gfm-class}\r\nvar foo = bar;\r\n```\r\n\r\n## A Header {#header-id}\r\n\r\n### Another One ### {#header-id .hclass}\r\n\r\nUnderlined  {#what}\r\n==========\r\n<\/code><\/pre>\n<h3><a id=\"user-content-smartypants\" class=\"anchor\" href=\"https:\/\/github.com\/jmcmanus\/pagedown-extra\/blob\/master\/README.md#smartypants\"><\/a><a href=\"http:\/\/daringfireball.net\/projects\/smartypants\/\">SmartyPants<\/a><\/h3>\n<p>SmartyPants extension converts ASCII punctuation characters into \u201csmart\u201d typographic punctuation HTML entities. For example:<\/p>\n<table>\n<thead>\n<tr>\n<th><\/th>\n<th>ASCII<\/th>\n<th>HTML<\/th>\n<\/tr>\n<\/thead>\n<tbody>\n<tr>\n<td>Single backticks<\/td>\n<td><code>'Isn't this fun?'<\/code><\/td>\n<td>\u2018Isn\u2019t this fun?\u2019<\/td>\n<\/tr>\n<tr>\n<td>Quotes<\/td>\n<td><code>\"Isn't this fun?\"<\/code><\/td>\n<td>\u201cIsn\u2019t this fun?\u201d<\/td>\n<\/tr>\n<tr>\n<td>Dashes<\/td>\n<td><code>This -- is an en-dash and this --- is an em-dash<\/code><\/td>\n<td>This \u2013 is an en-dash and this \u2014 is an em-dash<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<h3><a id=\"user-content-newlines\" class=\"anchor\" href=\"https:\/\/github.com\/jmcmanus\/pagedown-extra\/blob\/master\/README.md#newlines\"><\/a><a href=\"https:\/\/help.github.com\/articles\/github-flavored-markdown#newlines\">Newlines<\/a><\/h3>\n<p>Newlines \u00e0 la GitHub (without the need of two white spaces):<\/p>\n<div class=\"highlight highlight-source-lisp\">\n<pre>Roses are red\r\nViolets are blue<\/pre>\n<\/div>\n<p>becomes:<\/p>\n<div class=\"highlight highlight-text-html-basic\">\n<pre>&lt;<span class=\"pl-ent\">p<\/span>&gt;Roses are red &lt;<span class=\"pl-ent\">br<\/span>&gt;\r\nViolets are blue&lt;\/<span class=\"pl-ent\">p<\/span>&gt;<\/pre>\n<\/div>\n<h3><a id=\"user-content-strikethrough\" class=\"anchor\" href=\"https:\/\/github.com\/jmcmanus\/pagedown-extra\/blob\/master\/README.md#strikethrough\"><\/a><a href=\"https:\/\/help.github.com\/articles\/github-flavored-markdown#strikethrough\">Strikethrough<\/a><\/h3>\n<p>Strikethrough \u00e0 la GitHub:<\/p>\n<div class=\"highlight highlight-source-lisp\">\n<pre>~~Mistaken text.~~<\/pre>\n<\/div>\n<p>becomes:<\/p>\n<div class=\"highlight highlight-text-html-basic\">\n<pre>&lt;<span class=\"pl-ent\">p<\/span>&gt;&lt;<span class=\"pl-ent\">del<\/span>&gt;Mistaken text.&lt;\/<span class=\"pl-ent\">del<\/span>&gt;&lt;\/<span class=\"pl-ent\">p<\/span>&gt;<\/pre>\n<\/div>\n<h2><a id=\"user-content-extension--option-reference\" class=\"anchor\" href=\"https:\/\/github.com\/jmcmanus\/pagedown-extra\/blob\/master\/README.md#extension--option-reference\"><\/a>Extension \/ Option Reference<\/h2>\n<p>You can enable all of the currently supported extensions with <code>{extensions: \"all\"}<\/code>. This is also the default. If specifying multiple extensions, you must provide them as an array. Here is a list of the current and planned options and extensions. I\u2019ve chosen to use the same naming scheme as the excellent Python Markdown library.<\/p>\n<table>\n<thead>\n<tr>\n<th>Extension<\/th>\n<th>Description<\/th>\n<\/tr>\n<\/thead>\n<tbody>\n<tr>\n<td>fenced_code_gfm<\/td>\n<td>GFM fenced code blocks<\/td>\n<\/tr>\n<tr>\n<td>tables<\/td>\n<td>Pretty tables!<\/td>\n<\/tr>\n<tr>\n<td>def_list<\/td>\n<td>Definition lists<\/td>\n<\/tr>\n<tr>\n<td>attr_list<\/td>\n<td>Special attributes list for headers and fenced code blocks<\/td>\n<\/tr>\n<tr>\n<td>footnotes<\/td>\n<td>Footnotes<\/td>\n<\/tr>\n<tr>\n<td>smartypants<\/td>\n<td>SmartyPants<\/td>\n<\/tr>\n<tr>\n<td>newlines<\/td>\n<td>GFM newlines<\/td>\n<\/tr>\n<tr>\n<td>strikethrough<\/td>\n<td>GFM strikethrough<\/td>\n<\/tr>\n<tr>\n<td><em>smart_strong<\/em><\/td>\n<td>No strong emphasis in the middle of words<\/td>\n<\/tr>\n<tr>\n<td><em>abbr<\/em><\/td>\n<td>Abbreviations<\/td>\n<\/tr>\n<tr>\n<td><em>fenced_code<\/em><\/td>\n<td>PHP Markdown Extra fenced code blocks<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<table>\n<thead>\n<tr>\n<th>Option<\/th>\n<th>Description<\/th>\n<\/tr>\n<\/thead>\n<tbody>\n<tr>\n<td>table_class<\/td>\n<td>Class added to all markdown tables. Useful when using frameworks like bootstrap.<\/td>\n<\/tr>\n<tr>\n<td>highlighter<\/td>\n<td>Code highlighter. Must be one of <code>highlight<\/code> and <code>prettify<\/code> for now<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p><em>Italicized extensions are planned, and will be added in roughly the order shown<\/em><\/p>\n<p>See PHP Markdown Extra\u2019s <a title=\"Markdown Extra Table Documentation\" href=\"http:\/\/michelf.ca\/projects\/php-markdown\/extra\/#table\">documentation<\/a> for a more complete overview of syntax. In situations where it differs from how things are done on GitHub \u2014 alignment of table headers, for instance \u2014 I\u2019ve chosen compatibility with gfm, which seems to be quickly becoming the most widely used markdown implementation.<\/p>\n<h3><a id=\"user-content-special-characters\" class=\"anchor\" href=\"https:\/\/github.com\/jmcmanus\/pagedown-extra\/blob\/master\/README.md#special-characters\"><\/a>Special Characters<\/h3>\n<p>Markdown Extra adds two new special characters, <code>|<\/code> and <code>:<\/code>, that can be escaped by preceding them with <code>\\<\/code>. Doing so will cause the escaped character to be ignored when determining the extent of code blocks and definition lists.<\/p>\n<\/div>\n<div id=\"wmd-preview-section-footnotes\" class=\"preview-content\"><\/div>\n<p><\/p>\n<\/body>","protected":false},"excerpt":{"rendered":"<p>Mark Down ! Markdown is a way to style text on the web. You control the display of the document;<\/p>\n","protected":false},"author":1,"featured_media":375,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"jetpack_post_was_ever_published":false,"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_publicize_message":"","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":true,"jetpack_social_options":{"image_generator_settings":{"template":"highway","default_image_id":0,"font":"","enabled":false},"version":2}},"categories":[7],"tags":[68,67,69],"class_list":["post-369","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-coding","tag-down","tag-mark","tag-markdown"],"jetpack_publicize_connections":[],"jetpack_featured_media_url":"https:\/\/i0.wp.com\/imalogic.com\/blog\/wp-content\/uploads\/2017\/05\/austin.png?fit=512%2C512&ssl=1","jetpack_sharing_enabled":true,"jetpack_shortlink":"https:\/\/wp.me\/p8J21V-5X","jetpack-related-posts":[],"_links":{"self":[{"href":"https:\/\/imalogic.com\/blog\/wp-json\/wp\/v2\/posts\/369","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/imalogic.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/imalogic.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/imalogic.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/imalogic.com\/blog\/wp-json\/wp\/v2\/comments?post=369"}],"version-history":[{"count":2,"href":"https:\/\/imalogic.com\/blog\/wp-json\/wp\/v2\/posts\/369\/revisions"}],"predecessor-version":[{"id":377,"href":"https:\/\/imalogic.com\/blog\/wp-json\/wp\/v2\/posts\/369\/revisions\/377"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/imalogic.com\/blog\/wp-json\/wp\/v2\/media\/375"}],"wp:attachment":[{"href":"https:\/\/imalogic.com\/blog\/wp-json\/wp\/v2\/media?parent=369"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/imalogic.com\/blog\/wp-json\/wp\/v2\/categories?post=369"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/imalogic.com\/blog\/wp-json\/wp\/v2\/tags?post=369"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}