HOME

5h-3LL 1.0
DIR: /srv/http/vyvoj.adent.cz/vyvoj/moodle_esf_vz/lang/en_utf8/help
/srv/http/vyvoj.adent.cz/vyvoj/moodle_esf_vz/lang/en_utf8/help/
Current File : /srv/http/vyvoj.adent.cz/vyvoj/moodle_esf_vz/lang/en_utf8/help/markdown.html
<h2>Enhancing Text With Markdown</h2>

<div id="Main">

<div class="article">
<p>Markdown expands upon the simple text entry format available in Moodle by allowing you to easily add emphasis (bold, italics), structure (bullet points and headings) and links (to images or other web resources). You can use Markdown in many places in Moodle, simply select it from the <strong>formatting</strong> drop down list which is found below the text entry area wherever you have the choice.</p>

<ul>
<li><a href="#concepts">Basic Concepts</a></li>
<li><a href="#emphasis">Emphasising Text</a></li>
<li><a href="#headings">Headings</a></li>
<li><a href="#lists">Lists</a></li>
<li><a href="#quotes">Quoted Paragraphs</a></li>
<li><a href="#links">Web Links</a></li>
<li><a href="#images">Images</a></li>
<li><a href="#advanced">Advanced Topics</a></li>
</ul>

<h2><a id="concepts">Basic Concepts</a></h2>

<p>To enter text simply type into the text entry area or text box, pressing the return key twice at the end of a paragraph to leave a blank line between the end of one paragraph and the start of the next.</p>

<h2><a id="emphasis">Emphasising Text</a></h2>

<p>You can add three levels of emphasis with Markdown, <em>italic</em> text, <strong>bold</strong> text, or <strong><em>bold and italic</em></strong> text. This is achieved by surrounding the text you wish to emphasise with asterisks e.g.</p>

<p><strong><code>*italic*</code></strong> -> <em>italic</em> <br />
<strong><code>**bold**</code></strong> -> <strong>bold</strong> <br />
<strong><code>***bold italic***</code></strong> -> <strong><em>bold italic</em></strong></p>

<p>Emphasis can be added to single words, a sequence of words, or even parts of words:</p>

<p><strong><code>a *single* word</code></strong> -> a <em>single</em> word <br />
<strong><code>***a sequence of words***</code></strong> -> <strong><em>a sequence of words</em></strong> <br />
<strong><code>in**distinguish**able</code></strong> -> in<strong>distinguish</strong>able</p>

<p>Underscores (_) can be used interchangeably with asterisks for this purpose.</p>

<h2><a id="headings">Headings</a></h2>

<p>Markdown allows you to subdivide your text with headings; six different levels are available though it is unusual for a normal text to use more than three. For example, there are three levels of heading used in the text you are currently reading.</p>

<p>You can create a heading by starting a line with one or more hash characters (#).  One hash is the largest and most important heading, and six hashes gives you the least important or smallest heading.</p>

<p><strong><code># section heading</code></strong> <br />
<strong><code>## sub-section heading</code></strong> <br />
<strong><code>### sub-sub-section heading</code></strong> <br />
etc.</p>

<p>The first two levels of headings are most common and can be created in alternative ways that make them stand out more in the text version (though the output is identical to the previous method). This alternative uses a line of equal signs (=) or hyphens (-) under the title as follows:</p>

<p><strong><code>section heading</code></strong> <br />
<strong><code>===============</code></strong></p>

<p><strong><code>subsection heading</code></strong> <br />
<strong><code>------------------</code></strong>   </p>

<h2><a id="lists">Lists</a></h2>

<h3>bullet point lists</h3>

<p>Bullet point lists can be created by starting each line with an asterisk followed by a space before the content of the bullet point. Note that the space is important and should not be forgotten.</p>

<p><strong><code>* first point</code></strong> <br />
<strong><code>* second point</code></strong> <br />
<strong><code>* third point</code></strong>  </p>

<p>becomes</p>

<ul>
<li>first point</li>
<li>second point</li>
<li>third point</li>
</ul>

<h3>Numbered Lists</h3>

<p>Similarly, numbered lists can be created by starting each line with a number followed by a space and then the relevant text. </p>

<p><strong><code>1. first point</code></strong> <br />
<strong><code>2. second point</code></strong> <br />
<strong><code>3. third point</code></strong></p>

<p>becomes</p>

<ol>
<li>first point</li>
<li>second point</li>
<li>third point</li>
</ol>

<h3>Indented Lists</h3>

<p>You can nest or indent bullet and numbered lists, even mixing bullet point and numbered lists in one structure:
<b></p>

<pre>
    * top level bullet one
      * sub-bullet  
      * sub-bullet 2 
    * top level bullet two  
    1. numbered point one
       1. nested numbered point  
    2. numbered point two
</pre>

<p></b>
becomes</p>

<ul>
<li>top level bullet one
<ul>
<li>sub-bullet</li>
<li>sub-bullet 2</li>
</ul></li>
<li>top level bullet two
<ol>
<li>numbered point one
<ol>
<li>nested numbered point  </li>
</ol></li>
<li>numbered point two</li>
</ol></li>
</ul>

<h2><a id="quotes">quoted paragraphs</a></h2>

<p>You can indicate a quoted section of text by beginning each line with an angle bracket (>). This character was chosen as many email programs use it to indicate quoted sections. The output will generally indent the quoted section in from both margins.</p>

<p><strong><code>&gt; This is a quoted paragraph</code> <br />
<code>&gt; spread over two lines</code></strong>  </p>

<p>becomes</p>

<blockquote>
  <p>This is a quoted paragraph
  spread over two lines</p>
</blockquote>

<p>You can save some typing by only using a a single angle bracket at the beginning of the first line of the paragraph</p>

<p><strong><code>&gt; this is all one single quoted</code> <br />
<code>paragraph even though it is spread</code> <br />
<code>over several lines.</code></strong></p>

<p>becomes</p>

<blockquote>
  <p>this is all one single quoted
  paragraph even though it is spread over
  several lines.</p>
</blockquote>

<h2><a id="links">Web Links</a></h2>

<p>There are two ways to create links to web resources: the first is to include the link inline, placing the text you wish readers to click on in square brackets, and the URL of the page they will be taken to immediately afterwards in parentheses with no space or gap between the two sets of brackets; you can also add an optional title for the link in quotes after the URL.</p>

<p><strong><code>An [example link](http://example.com/ "Optional Title") in a sentence.</code></strong></p>

<p>becomes </p>

<p>An <a href="http://example.com/" title="Optional Title">example link</a> in a sentence.</p>

<p>The title, if supplied, is displayed in a 'tooltip' which appears when the user hovers their mouse over the link text. Try it on the link that appears above.</p>

<p>For longer links you can avoid disrupting the flow of text by using a footnote style, attaching a short identifying name to the  link in a second set of square brackets (either using a short explanatory word, phrase or simply a number).</p>

<p><strong><code>An [example link][ex] in a sentence.</code></strong></p>

<p>Then, anywhere else in the document, but preferably either directly after the paragraph with the link, or collected with other link URLs at the bottom of the document, you can define the URL associated with the id:</p>

<p><strong><code>[ex]: http://example.com/  "Optional Title"</code></strong></p>

<p>The output of this second example would be indistinguishable from the first. It is simply a matter of keeping the working document neatly organised to aid further editing (particularly if you are working with others).</p>

<p>A final shortcut, if you wish your linked text to be the same as the URL, is to place the URL within angled brackets like so:</p>

<p><strong><code>&lt;http://moodle.org/&gt;</code></strong></p>

<p>which becomes</p>

<p><a href="http://moodle.org">http://moodle.org</a></p>

<h2><a id="images">Images</a></h2>

<p>Images are included in a very similar manner to web links, but are preceded by an exclamation mark. The 'alt text' (<em>alt</em> meaning <em>alternative</em>) is provided to users that cannot see the image for various reasons, thus the text should make sense without any visual cues. Doing this will also provide a reminder or hint to those editing the text in Markdown as to the purpose of the image.</p>

<p>The 'title' is displayed in a small pop up when the user hovers over the image and so can provide additional information.</p>

<p><strong><code>![alt text](/path/img.jpg "Optional Title")</code></strong></p>

<p>And, like web links, you can organise your document by keeping all the URLs together with 'footnote' style references. Just give the image a short, unique name:</p>

<p><strong><code>![alt text][photo]</code></strong></p>

<p>and anywhere else in your document, associate that name with an image file:</p>

<p><strong><code>[photo]: /url/to/img.jpg "Optional Title"</code></strong></p>

<p>Here is an example followed by its output:</p>

<p><strong><code>![Google logo](http://www.google.com/images/logo.gif "The Google logo")</code></strong></p>

<p><img src="http://www.google.com/images/logo.gif" alt="Google logo" title="The Google logo" /></p>

<p>The 'alt text', which is also important for accessibility reasons, will often be used by browsers when links to images are broken or temporarily unavailable:</p>

<p><strong><code>![alt text for broken image](http://example.com/intentionally.broken.link "This image will never display")</code></strong></p>

<p>becomes (exact output dependant upon your browser)</p>

<p><img src="http://example.com/intentionally.broken.link" alt="alt text for broken image" title="This image will never display" /></p>

<h2><a id="advanced">Advanced Topics</a></h2>

<p>This short introduction covers the features of Markdown that are used in the vast majority of cases. It is possible to achieve far more complex results, particularly if you already know how to write HTML, but these are covered in a separate document on the Advanced Use of Markdown</p>
<p class="moreinfo"><a href="help.php?file=advanced_markdown.html">More info about advanced use of Markdown</a></p>
</div>
</div>