{% extends 'base.html.twig' %}

{% block title %}Markdown Cheat Sheet{% endblock %}

{% block stylesheets %}
<link href="/theme/assets/css/main.css" rel="stylesheet" />
<link href='/theme/assets/css/jquery-ui.theme.css' rel='stylesheet' />
<link href='/theme/assets/css/jquery-ui.structure.css' rel='stylesheet' />
<link href='/css/style.css' rel='stylesheet' />
<link href='//cdn.datatables.net/2.0.8/css/dataTables.dataTables.min.css' rel='stylesheet' />
{% endblock %}

{% block javascripts %}
<script src="/theme/assets/js/jquery.min.js"></script>
<script src='/theme/assets/js/jquery-ui.js'></script>
<script src="/theme/assets/js/browser.min.js"></script>
<script src="/theme/assets/js/breakpoints.min.js"></script>
<script src="/theme/assets/js/util.js"></script>
<script src="/theme/assets/js/main.js"></script>
<script src='//momentjs.com/downloads/moment-with-locales.js'></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/markdown-it/13.0.2/markdown-it.min.js" integrity="sha512-ohlWmsCxOu0bph1om5eDL0jm/83eH09fvqLDhiEdiqfDeJbEvz4FSbeY0gLJSVJwQAp0laRhTXbUQG+ZUuifUQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src='//cdn.datatables.net/2.0.8/js/dataTables.min.js'></script>
<script src='/js/script.js'></script>
{% endblock %}

{% block body %}
<div style='padding-left:5px;'>
<h1>Markdown Cheat Sheet</h1>

<p>The following was provided by <a href='https://www.markdownguide.com'>The Markdown Guid</a></p>

<p> This Markdown cheat sheet provides a quick overview of all the Markdown syntax elements.  It can't cover every edge case, so if you need more information about any of these elements, refere to the reference guides for <a href='//www.markdownguide.org/basic-syntax/'>basic syntax</a> and </a href='//www.markdownguide.org/extended-syntax/'>extended syntax</a>.</p>

<h2>Basic Syntax</h2>

<p>These are the elements outlined in John Gruberal's original design document. All Markdown applications support these elements. The quoted text is what is needed to render what is displayed right below</p>

<h3>Headings</h3>

"# H1"<br/>
<h1># H1</h1>

"## H2"<br/>
<h2>## H2</h2>

"### H3"<br/>
<h3>### H3</h3>

<h3>Bold</h3>

"**bold text**"<br/>
<strong>bold text</strong>

<h3>Italic</h3>

"*italicized text*"<br/>
<i>italicized text</i>

<h3>Blockquote</h3>

"> blockquote"<br/>
<blockquote>blockquote</blockquote>

<h3>Ordered List</h3>

"1. First item"<br/>
"2. Second item"<br/>
"3. Third item"<br/>
<br/>

<ol style='list-style-position:inside;'>
    <li>First item</li>
    <li>Second item</li>
    <li>Third item</li>
</ol>

<h3>Unordered List</h3>

"- First item"<br/>
"- Second item"<br/>
"- Third item"<br/>
<br/>

<ul style='list-style-position:inside;'>
    <li>First item</li>
    <li>Second item</li>
    <li>Third item</li>
</ul>

<h3>Code</h3>

"`code`"<br/>

<code>code</code><br/>

<h3>Horizontal Rule</h3>

"---"<br/>

<hr/>

<h3>Link</h3>

"[Markdown Guide](https://www.markdownguide.org)"<br/>

<a href='//www.markdownguide.org'>Markdown Guide</a><br/>

<h3>Image</h3>

"![alt text](https://www.markdownguide.org/assets/images/tux.png)"<br/>

<img src='//www.markdownguide.org/assets/images/tux.png' alt='alt text' /><br/>

<h2>Extended Syntax</h2>

<p>These elements extend the basic syntax by adding additional features. Not all Markdown applications support these elements.</p>

<h3>Table</h3>

| Syntax | Description |<br/>
| ----------- | ----------- |<br/>
| Header | Title |<br/>
| Paragraph | Text |<br/>
<br/>

<table>
<thead>
<th>Syntax</th>
<th>Description</th>
</thead>
<tbody>
<tr>
<td>Header</td>
<td>Title</td>
</tr>
<tr>
<td>Paragraph</td>
<td>Text</td>
</tr>
</tbody>
</table>

<h3>Fenced Code Block</h3>

<p>Specifying the language after the first 3 backticks may help with text formatting and highlighting based on the language entered, may or may not be supported in a given Markdown tools implementation</p>

```json<br/>
{<br/>
&nbsp;&nbsp;"firstName": "John",<br/>
&nbsp;&nbsp;"lastName": "Smith",<br/>
&nbsp;&nbsp;"age": 25,<br/>
}<br/>
```<br/>

<pre>
{
  "firstName": "John",
  "lastName": "Smith",
  "age": 25
}
</pre>
</div>
{% endblock %}