First thing's first! What the Hell is a Markdown?
The easiest explanation，They are shortcut tags of HTML. Using shorter tags and/or different writing layouts, to produce the HTML output. Instead of writing the proper HTML codes; you just use shorter special characters and procedures to gain the desired HTML function.
- Links that Explain Markdown comprehensively:
- http://whatismarkdown.com
- http://michelf.ca/projects/php-markdown/extra/#html
- http://en.wikipedia.org/wiki/Markdown
- http://designshack.net/articles/html/mastering-markdown-30-resources-app...
- http://daringfireball.net/projects/markdown/syntax#philosophy
- http://blog.teamtreehouse.com/explaining-markdown
- http://mashable.com/2013/06/24/markdown-tools
implemented Module http://drupal.org/project/markdown
- Common Restrictions and Rules in implementing MarkDowns （Ｍ↓）：
- All tags are Case-Sensitive．
- Ｍ↓'s must be the first Character of in a line of a body/command/field．
- Ｍ↓'s codes Don't work in block-level HTML elements — e.g. <div>，<li>，<pre>，<p>，<table>；Unless Activated using
markdown=1inside the code tags．
<div markdown=1>##### sample Header 5 size using div block; & testing the {# tag markers right after this text} {#ids}</div>sample Header 5 size using div block; & testing the {# tag markers right after this text}
- ＜id＝＂ ＂＞ Leave a space then start Ｍ↓ tag
{#id name of the tag must be right next to the # and closed by } tag; to start the Id tag equivalent to<id= >；As seen above． - ．
- Special Characters are now used as Ｍ↓'s trigger tags; So check conditions below．
- Code comparison are separated with this marker．
- Ｍ↓
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
► ▼ Input format
Filtered HTML
<h2> <h3> <h4> <h5> <h6> <em> <strong> <code> <del> <blockquote> <q> <sub> <p> <br> <pre> <ul> <ol> <li> <dl> <dt> <dd> <a> <b> <u> <i> <sup> <img> <table> <tbody> <td> <th> <tr> <strike> <acronym> <br/> <caption> <hr>.
<code>...</code> (generic) or <?php ... > (highlighted PHP) tags.
Filtered HTML -- No Markdown
<h2> <h3> <h4> <h5> <h6> <em> <strong> <code> <del> <blockquote> <q> <sub> <p> <br> <pre> <ul> <ol> <li> <dl> <dt> <dd> <a> <b> <u> <i> <sup> <img> <table> <tbody> <td> <th> <tr> <strike> <acronym> <br/> <caption> <hr>.
<code>...</code> (generic) or <?php ... > (highlighted PHP) tags.
Proposes a Smaller ACCURATE description.
- Allowed HTML tags：
</h>，</b>，</em>，</i>，</del>，</strike>，</sup>，</sub>，</u>，<a href=""></a>，<acronym title=""><acronym>，<ol><li></li></ol>，<ul><li></li></ul>，<dl><dt></dt><dd></dd></dl>，</blockquote>，<br>，<hr>，<p>，<table><caption></caption><tr><th></th><td></td></tr></table>，</thead></tbody></tfoot><img src="/.g">． - Images are not allowed; except /1051742#img．
- Web page addresses and e-mail addresses turn into links automatically．
- Some Line breaks are made by pressing Enter or (carriage)◄┘Return Key．
Filtered HTML
- All the information above with the additional stuff below：
- [ ](http://) for Links．
-  for Images．
- Click the Link below to know which Markdowns Work in G.D.O．
Filtered HTML -- No Markdown
More information about formatting options
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
- Ｍ↓ List of Entities:
- Adding "＼" before the special character; Deactivates its' Ｍ↓ function and show it as a Text instead of a tag.
Freelinking Does NOT work Normal
\[[Freelinking Does NOT work]] How it shows with the backslash.
[[Freelinking Does NOT work]] How it shows with the backslash. - Using a "＜" character, initializes the Ｍ↓; to deactivate the tag but still want to us the Tag name use
<to show the Less Than sign.
<pre> <code> without the fear of activating the tag.</pre><code> without the fear of activating the tag.
- Ｍ↓
# Header 1 is always Disabled!
======== even the Setext style of using = also Does NOT work!
<h2>Header 2;</h2> compared to the actual HTML code. {#idmarker0}
## Header 2 using only 2 hash keys with ## {#idmarker3}
Header 2; only one dash line underneath the text needed; {#idmarker1}
-
Header 2; or more, dominating one line with idmarkers. {#idmarker2}
--------Header 2;
compared to the actual HTML code. {#idmarker0}
Header 2 using only 2 hash keys with
Header 2; only one dash line underneath the text needed;
Header 2; or more, dominating one line with idmarkers.
| ＴＹＰＥ | Ｃｏｄｅ Ｕｓｅｄ | Ｙｏｕ Ｇｅｔ 。。。 |
|---|---|---|
| ＜Ｈ１＞ ＜／Ｈ＞ |
＜Ｈ１＞ ｉｓ Ｄｉｓａｂｌｅｄ
|
Header 1; No effect |
</h2>## |
<h2>Header 2</h2>line |
Header 2line |
</h3>### |
<h3>Header 3</h3>line |
Header 3line Header 3 |
</h4>#### |
<h4>Header 4</h4>line |
Header 4line Header 4 |
</h5>##### |
<h5>Header 5</h5>line |
Header 5line Header 5 |
</h6>###### |
<h6>Header 6</h6>line |
Header 6line Header 6 |
</h7>####### |
<h7>Header 7;</h7>line Up to... |
Header 7;line Up to...
# Header 7 |
</h9>######### |
<h9>Header 9;</h9>Non-existent |
Header 9;Non-existent
### Header 9 |
</i> |
<i>Italicized text</i> Italics |
Italicized text Italics |
</em> |
<em>Italicized text</em> emphasized |
Italicized text emphasized |
</cite> |
<cite>Cited text NOT working</cite> |
Cited text NOT working |
| * | *Italicized*1 asterisks |
Italicized1 asterisks |
| _ | _Italicized_1 underscores |
_Italicized_1 underscores |
<b></b> |
<b>Bold</b>Text |
BoldText |
<strong></strong> |
<strong>Bold strong</strong>Text</td> |
Bold strongText |
| ＜ｈ４＞ | <h4>Bold header 4</h4>Text |
Bold header 4Text |
| ** | **Bold 2** asterisks |
Bold 2 asterisks |
| __ | __Bold__ 2 underscores |
Bold 2 underscores |
| *** | ***Combination of Both***Italics and Bold 3 asterisks |
***Combination of Both***Italics and Bold 3 asterisks |
| ___ | ___Combination of Both___Italics and Bold 3 underscore |
___Combination of Both___Italics and Bold 3 underscore |
</s> |
<s>StrikeOut</s> S code doesn't work |
StrikeOut S code doesn't work |
<del></del> |
<del>StrikeOut</del>Delete line |
|
<strike></strike> |
<strike>StrikeOut</strike>Strike line |
|
<u></u> |
<u>Underlined</u> |
Underlined |
<sup></sup> |
<sup>Super</sup>scripted |
SuperScripted |
<sub></sub> |
<sub>Sub</sub>Scripted |
SubScripted |
Anchors<a href=http://></a>are used to make Links to pages. And directs a head Reference them. |
<a href="http:// URL address" title="Title; Hover and this msg appears‼ remember id=tags are Case-Sensitive" id="ID">Check the id=tag identifier inside the anchor</a> |
Check the id=tag identifier inside the anchor |
<a href=subpage title="If the site you are on is groups.drupal.org/sub1/typography the href=subpage would redirect you to the groups.drupal.org/sub1/subpage">Goes to the Sub-page named in the href="subpage" of the present site address. Hover in this link and check the link address below the status/add-on bar.</a> |
Goes to the Sub-page named in the href="subpage" of the present site address. Hover in this link and check the link address below the status/add-on bar. | |
<a href=#></a> |
<a href=#tables title="In href= a # sign before the id name; like in this example; Hyperlinks to the id=tag marker; This link sends you to where ever ＜id=tables＞ tag is located ON the page you are viewing.">You can also use the Anchors for Abbreviations and Acronyms by using the title="．" as a Popup Tooltip/Hover Help/etc...</a> |
You can also use the Anchors for Abbreviations and Acronyms by using the title="．" as a Popup Tooltip/Hover Help/etc...
The problem is the whole text will be highlighted as a Link。 And any space gaps are automatically deleted。You need to use a gap tag like |
Abbreviation<abbr title=><abbr> |
<abbr title="NO Hover Message.">the Abbr-eviation code Does NOT work here; with either ending Tags.</abbr> |
the Abbr-eviation code Does NOT work here; with either ending Tags. the Abbr-eviation code Does NOT work here; with either ending Tags or without. |
Acronym<acronym title=""><acronym> |
<acronym title="Hovering over the Text or Sentence; will show you this caption without the need for a link.">the Acronym code can be in a sentence or just one word.<acronym> |
the Acronym code can be in a sentence or just one word. |
Ｍ↓
[ ](http://)
[Text that will appear when you Hover cursor over。](http://groups.drupal.org/faq "This is the Hover Message that appears; when you place the texts in these quotation marks; Single quotes also works'. Works just like ＜Title=＞. Remember to add a space between the end of the address line and quotation mark; more than one Space deactivates the Ｍ↓")
Text that will appear when you Hover cursor over。
[Hover here； This is a Link using / as an address in (parenthesis)。](/faq 'uses the default site address and removes the subsite address. No matter how deep you are in the directory a / will direct to the original host site.com/')
Hover here； This is a Link using / as an address in (parenthesis)。
[Hover here； Without the backslash / and just place a word in the (parenthesis)。](faq 'It goes to the Subsite of the current tree address your on. Check the link address below; the status/add-on bar.')
Hover here； Without the backslash / and just place a word in the (parenthesis)。
[Hover here； Using the hash sign # ](#idmarker1 'sends you to the Hyperlink REFerence ID anchor of the {#idname} or id=idname.')
Hover here； Using the hash sign #
[Reference Links][] Are used by writing a Blank/Empty Square brackets.
Another way of using [Reference Link][0] is assigning a Numbers ONLY inside the following square brackets.
The Following assigning Link Rules still apply like stated above:
* [After the : using only / then address will direct you to the same][00]
* [With out the backslash :gotohere will Direct you the the subsite of your present address][000]
[reference links]:http://groups.drupal.org/node/311633#ref1 "Must have exact same name inside the Bracket; Non-Case Sensitive and space between address and DOUBLE Quotes are maintained. BUT Must have a Link Issued before placing Hovering Tittles. And can place all the link reference together as a Footer, Header, Etc... After the colon. Specail characters inside the quotes will deactivate the Ｍ↓"
[0]:#ref1 "So the Footer reference is shorter also the link address assigned to it."
[00]:/node/311633#ref2 "link reference from the Home website name. http://groups.drupal.org is automatically understood as the Root source location."
[000]:gotohere "an example link http://groups.drupal.org/your/current/browsing will go to http://groups.drupal.org/your/current/browsing/gotohere"
Reference Links Are used by writing a Blank/Empty Square brackets.
Another way of using Reference Link is assigning a Numbers ONLY inside the following square brackets.
The Following assigning Link Rules still apply like stated above:
* After the : using only / then address will direct you to the same
* With out the backslash :gotohere will Direct you the the subsite of your present address
<img>Width size is the only value that can be altered. |
Ｂａｓｉｃ Ｃｏｄｅ∶ <img src="/.g"> |
           
|
- Ｍ↓
１ ＜＝ Hover cursor Over Icon。
![Reference Style Syntax Link can also be used][id]２ ＜＝ Hover cursor Over Icon。
[id]:/misc/favicon.ico "Also Pop-up highlight tool tip TITLE= can be still blocked together for fast Edit if Image location File changes. AND ONLY Characters are used as Id instead of numbers."
１ ＜＝ Hover cursor Over Icon。
２ ＜＝ Hover cursor Over Icon。
<ol><li></li></ol> Ordered Lists |
Line Before Tag Marker. |
Line Before Tag Marker.
Line after Last TAG list... Auto Line Break after the last Marker even if it's next to the tag。。。 |
- Ｍ↓
#. etc.
Any number ## Regardless the number of digits then a period ． After it; and a single space _ then the text entry contruct an ordered list．
666. First Entry: even if the Digits are greater than the later,
2013. Number of digits doesn't dictate the Placement within the list,
Note: the spacing that occurs HERE at the BOTTOM is Activated not by this line but the Empty line ABOVE；between the 1st and 2nd ordered List.
8. You can use Identical numbers to consolidate Identical items in the same List,
8Spacing Before this line doesn't affect Line placement.
8. Still shows the next ordered number from the previous entry;
4Also as a Drupal way of typing End every List entry with a period．
-
First Entry: even if the Digits are greater than the later,
-
Number of digits doesn't dictate the Placement within the list,
Note: the spacing that occurs HERE at the BOTTOM is Activated not by this line but the Empty line ABOVE；between the 1st and 2nd ordered List. - You can use Identical numbers to consolidate Identical items in the same List,
8Spacing Before this line doesn't affect Line placement. - Still shows the next ordered number from the previous entry;
4Also as a Drupal way of typing End every List entry with a period．
<ul><li></li></ul> Un-ordered Lists |
Line Before Tag Marker.<ul> |
Line Before Tag Marker.
Line after Last TAG list... Extra space if you entered, After the last Tag List Marker。。。 |
- Ｍ↓
<li>Using list <b>\<li></b> as an UnOrdered Lists marker will show you this kind of Line.
<li>the Gap ABOVE this line is caused by no Closing Tag on the 1st list item.
<li> _a Space at the beginning of this line; has no effect.
<li>The Following lists will have No more spacing issues, like the 1st one. When the rest of the list doesn't have Closing Tags.
Ｉｎ ｔｈｉｓ Ｎｅｗ Ｌｉｓｔ Ｏｒｄｅｒ：the Line Gaps ABOVE are removed and a Line Gap is placed Below here instead.
<li>To remove the Gap line of the 1st list; Is to add a Closing <b><code></li>＜/code> Tag HERE ＝＞</li>
<li>So the 2nd Line will be Together as one.
<li>Even when the rest Without Order list tag ＜ul>＜/ul>＜ol>＜/ol> markers the gap below is removed.</li>
•using Alt-7 appears like this in comparison.
There MUST be a LINE Gap; Before using the Ｍ↓ Lists: ＊，－，＋ as lists. And a Space after the Ｍ↓ marker. otherwise it will not work.
* an Asterisks
* Adding more space is usless
* and
- 1 Minus
- 2 or
- 3 Hyphen,
+ 4 also
+ 5 a Plus
+ 6 sign
Can Be used; As you can see the spacing is limited only to one indentation within a list. and this following line, follows the list before it, regardless the indentation.
* 8 a Tab has 4 spaces.
* 9 a Tab +1 more space is considered another indention.
<li> as an UnOrdered Lists marker will show you this kind of Line.Ｉｎ ｔｈｉｓ Ｎｅｗ Ｌｉｓｔ Ｏｒｄｅｒ：the Line Gaps ABOVE are removed and a Line Gap is placed Below here instead.
</li> Tag HERE ＝＞<ul></ul><ol></ol> markers the gap below is removed.•using Alt-7 appears like this in comparison.
There MUST be a LINE Gap; Before using the Ｍ↓ Lists: ＊，－，＋ as lists. And a Space after the Ｍ↓ marker. otherwise it will not work.
- an Asterisks
- Adding more space is usless
- and
- 1 Minus
- 2 or
- 3 Hyphen,
- 4 also
- 5 a Plus
- 6 sign
Can Be used; As you can see the spacing is limited only to one indentation within a list. and this following line, follows the list before it, regardless the indentation. - 8 a Tab has 4 spaces.
- 9 a Tab +1 more space is considered another indention.
<dl><dt></dt><dd></dd></dl>Definition Lists |
Before starting the Tags.<dl>Begins the Definition List..<dt>Begins the Definition Term:</dt><dd>and begins the Definition Description.</dd><dd>Definition Description always ends in period.</dd><dd>Spacing is automatically assigned between Definitions.<dt>Spacing assigned even close together: |
Before starting the Tags.
|
</q> |
<q>Quote does ＮＯＴ WORK</q> |
Quote does ＮＯＴ WORK |
</quote> |
<quote>Quote does ＮＯＴ WORK</quote> |
Quote does ＮＯＴ WORK |
<blockquote></blockquote> |
<blockquote>Block Quote |
Block Quote |
| <code></code> | <code>_code boxNext Line </code> |
_code box |
| <?php?> | <?php ．．． ?> |
<?php |
<pre>in Coded Box Combo Ｍ↓ works but <b>HTML codes</b> Does NOT.</pre>
While in Preformed Box ___Combo Ｍ↓ does NOT work___ & HTML codes DOES inside the Preformated box.
- Ｍ↓
`this code is covered by SINGLE BackTick ‵ the button on the upper most right of the keyboard; below the ESC key.`
this code is covered by <b>SINGLE BackTick ‵ </b>the button on the upper most right of the keyboard; below the ESC key.
``this code is covered by DOUBLE BackTick ‵ the button on the upper most right of the keyboard; below the ESC key.``
this code is covered by <b>DOUBLE BackTick ‵ </b>the button on the upper most right of the keyboard; below the ESC key.
- Ｍ↓
To start a Code Block Paragraph; Leave a space then
add Four (4) spaces; the Tab amount to Activate the coding block paragraph Rendering All HTML tags <b><u><i><pre> are inert and converted to Code, with the exception of <code>＜/code> . Even pressing enter,
is coded this line is considered new. Add a ＜/CODE＞ closing Tag to End the Code Block.
To start a Code Block Paragraph; Leave a space then
add Four (4) spaces; the Tab amount to Activate the coding block paragraph Rendering All HTML tags <b><u><i><pre> are inert and converted to Code, with the exception of </code> . Even pressing enter, is coded this line is considered new. Add a ＜/CODE＞ closing Tag to End the Code Block. Spaces are negated.
- Ｍ↓
Fenced Code Block
~~~
3 Tildes or more from Top and Bottom <p>aragraph
Places All the text in a code block.
Regardless of spaces in between.
~~~
Fenced Code Block
3 Tildes or more from Top and Bottom <p>aragraph
Places All the text in a code block.
Regardless of spaces in between.
<br> line BReaka Simple ◄┘Enter key is enough. |
Line<br/>Break |
Line Break |
<p>Paragraph |
Line<p>Break |
Line
Break |
| New Line Gap | Line |
Line Break |
| are the same as Multiple Line Gap. | Line |
Line
Break |
| Double Break. | Line<br><br>Break |
Line Break |
<hr>Horizontal Line |
<code>No space after Horizontal Line; Must be beside the line after period.<hr> |
No space Before Horizontal Line; Tag must be beside the line after period. |
For Space after Horizontal Line; Horizontal Line tag must be in front of a new line.<hr> |
For Space after Horizontal Line; Horizontal Line tag must be in front of a new line.
|
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝Maximum Width of line of a Left Side Panel of this site.
- Ｍ↓
3 asterisks
***
3 underscores
___
3 Dash with space gaps
- - -
3 asterisks with space gaps
* * *
3 underscores with space gaps
_ _ _
3 asterisks
3 underscores
3 Dash with space gaps
3 asterisks with space gaps
3 underscores with space gaps
Tables : Codes are Shown below and the difference divided by Horizontal divider.
-- www.w3schools.com
-- www.quackit.com
-- www.htmlcodetutorial.com
return back to hRef ID.
<table border="2" cellpadding="3">...Start of table Tag
<caption>:only one Caption and this is the default position on table:</caption>
<tfoot>...Footer Text<th>All elements in the footer Table are placed at the bottom; even IF it's written on top. But constrained on the initial column divisions provided by the header.</th></tfoot>
<tr><td>Table cell individual placement; stand alone.</td></tr>
<thead>
<tr>...start of Table Row, needs a tag data
<th>a Table header Tag; elements are bold by default; And different Background color.
</th>...closed 1st section/column TableHead
<td>Table Data tag; for regular elements; and Opens another for two or more columns you can have another Table Header.
</td>...closed 1st section/column TableData
</tr>...closed Table Row
</thead>
<tr>
<td>Start of a new Table Row and cell. Decide how many columns/Divisions you want to make.</td>
<th>Another Table Header in between the</th>
<td>3rd Data entry.</td>
</tr>
<tr>.....Table Row with out table-header/data/divider. This text never shows properly in the Table</tr></table>
<table><td></td><td></td><th>new table line that stretches to the other columns; and not associated to the previous table. With 2 new columns before this cell.</th></table>| All elements in the footer Table are placed at the bottom; even IF it's written on top. But constrained on the initial column divisions provided by the header. | ||
|---|---|---|
| Table cell individual placement; stand alone. | ||
| a Table header Tag; elements are bold by default; And different Background color. | Table Data tag; for regular elements; and Opens another for two or more columns you can have another Table Header. | |
| Start of a new Table Row and cell. Decide how many columns/Divisions you want to make. | Another Table Header in between the | 3rd Data entry. |
| new table line that stretches to the other columns; and not associated to the previous table. With 2 new columns before this cell. |
|---|
- Ｍ↓
| Category 1 | Spaced |
| -----------------: |-----------------:|
| Colon on the right | above the divder |
| makes these text align | to the right |
|no matter what the gap size|or spacing between|
| the pipe`|` |is the divider．|
| Category 1 | Spaced |
|---|---|
| Colon on the right | above the divder |
| makes these text align | to the right |
| no matter what the gap size | or spacing between |
the pipe| |
is the divider． |
Smallest|Table|Divider
-|
a dash and a pipe|is enough to seperate|the Header and the Body.
To seperate the Content|Just add the|pipe
|blank 1st entry by using the 1st pipe divider| more than the header|negated divider.
| Smallest | Table | Divider |
|---|---|---|
| a dash and a pipe | is enough to seperate | the Header and the Body. |
| To seperate the Content | Just add the | pipe |
| blank 1st entry by using the 1st pipe divider | more than the header|＜＝negated. |
Left|Bold|Header
-:|-|-:|
Right|`Default`|Right
Aligned|`Left`|Aligned
| Left | Bold | Header |
|---|---|---|
| Right | Default |
Right |
| Aligned | Left |
Aligned |
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
Comments
1234567890123456789012345678901234567890123456789012345678901230
Comment: *