Line breaks, pictures, links and other formatting tricks
Using Markdown to Format your Posts
Contents
?Introduction
?Adding Images to your Post
?Preliminaries: Obtaining an Image URL
?Markdown Example
?Troubleshooting
?Posting a Picture From Your Own Computer
?Adding Links
?Obtaining a URL
?Markdown Syntax: Special Characters
?Markdown Example
?Troubleshooting your link
?Bolded Text
?Headings
?Italicized Text
?Line Breaks and Spacing
?Single Spacing
?Double Spacing
?Tables
?Table Definitions
?Table Markdown Examples
?Table Markdown Example: 2 Columns
?Table Markdown Example: 3 Columns
?Table Markdown Example: 5 Columns, No Set Header
?Other Resources and Links
Introduction
Overview
Many people have shown interest in knowing some of the tricks to formatting that can be used within the "Answers" section. Previously, I posted an attempted explanation at some of the uses of HTML that are available. While the use of HTML (also know as "markup") allows you to perform a variety of formatting tricks, its syntax can also be a bit tricky at first, especially to those with little or no interest or experience in computer languages or programming.
That being said, the web-writer that Spanishdict uses (the text-to-HTML program that is used to publish what you write to the web) actually employs a language called "Markdown," a language that is a bit simpler and a bit more intuitive (albeit more limited) than HTML. If you have done much posting on SpanishDict you are probably already familiar with at least some of the syntax of the markdown language. Here I will try to discuss and provide additional examples with which you might not be quite so familiar
Back to Table of Contents
Adding Images to Your Post
Preliminaries: Obtaining an Image URL
To add a picture, you mustl first know the picture's web address/URL (the web address will usually start with the letters "http://www."). A simple way to find the web address for your desired picture is by right clicking on the picture and then clicking on the option that reads, "Copy Image Location." This will automatically copy the URL to your virtual clipboard. Once the URL has been copied to your virtual clipboard, you can later paste the URL into the appropriate position within the Markdown code by holding down "Ctrl + P."
Back to Table of Contents
Posting the Image
To post the image you will need to use the following set of characters:
| Character | Example | Explanation |
|---|---|---|
| Exclamation Point | ! |
Marks the Markdown to follow as an image link. The exclamation point will be followed by a set of square brackets immediately followed by a set of parenthesis containing the images URL |
| Square Brackets | [ ] |
The set of square brackets follow directly after the exclamation point. Inside the square brackets, you can place text to describe what the picture is supposed to be. The square brackets are a mandatory part of the code. Text inside the brackets is optional but can be useful should the picture fail to post. |
| Parenthesis | ( ) |
You will paste the URL for the desired image within the set of parenthesis. The set of parenthesis follows directly after the set of square brackets |
Back to Table of Contents
Markdown Example
Result
Back to Table of Contents
Troubleshooting
There may be times when you find that a picture does not post. Many times the reason for this is that the URL address for the picture that you have selected is not formatted in a way in which the editor is able to recognize. If the URL contains any blank spaces, the pic will not post. For example, note the following differences:
| Unrecognizable | http://www.A picture that you want.gif |
| Recognizable | http://www.A_picture_that_you_want.gif |
| Recognizable | http://www.A+picture+that+you+want.gif |
Back to Table of Contents
Posting a Picture from Your Own Computer
Files from your own computer have not been published on the web and do not carry a URL. Because of this, there is no direct way to post a picture from your computer onto the forum. However, there is a roundabout way to achieve this goal. If you open up a free account with an image hosting websites such as photobucket you can load your photo to your account on that website and copy the URL from there. When doing this, just remember that when you name your file, you will have to give it a name that does not use any blank spaces. For example, YourFileName or Your_File_Name (correctly named) vs. Your File Name (incorrectly named).
Back to Table of Contents
Adding Links
Obtaining a URL
To add a link, it will first be necessary to know the picture's web address/URL (the web address will usually start with the letters "http://www."). To capture the target web address, navigate to the desired webpage and right click on the URL as it appears in the navigation bar at the top of your screen. Make sure that the entire URL is highlighted and then click on the option that reads "copy" and this will copy the URL to your virtual clipboard where you can save it until you are ready to paste it into the appropriate position within the Markdown code (you can paste the URL by holding down "Ctrl + P").
Back to Table of Contents
Markdown Syntax
Explanation of Special Characters
To post a link you will need to use the following set of characters:
| Character | Example | Explanation |
|---|---|---|
| Square Brackets | [ ] |
The set of square brackets tells the text editor to look for a link. Type your desired link label inside the square brackets. The square brackets are a mandatory part of the code, but the text is optional yet useful in case the link fails to post. |
| Parenthesis | ( ) |
You will paste the URL for the desired link within the set of parenthesis. The set of parenthesis follows directly after the set of square brackets |
Back to Table of Contents
Markdown Example
[A Link to SpanishDict's Reference Page](http://www.spanishdict.com/answers/100000/spanishdict-reference-guide)
Result
Back to Table of Contents
Troubleshooting
There may be times when you find that a link does not post. Many times the reason for this is that the URL address for the link that you have selected is not formatted in a way in which the editor is able to recognize it. If the URL contains any blank spaces, the link will not post. For example, note the following differences:
| Unrecognizable | http://www.A link that you want.com |
| Recognizable | http://www.A_link_that_you_want.com |
| Recognizable | http://www.A+link+that+you+want.com |
Back to Table of Contents
Bold Text
To bold text you can either use the "double-asterisk" (**), with which most of you are probably already familiar, or you can use the "double-underscore" (__). For example, the Mardown in this example would produce the following results:
Markdown
**Bold** using "double-asterisks" or __Bold__ using "double-underscores"
Result
Bold using "double-asterisks" or Bold using "double-underscores"
Back to Table of Contents
Headings
Markdown supports six different heading sizes (although there actually does not appear to be much descernable difference between heading 4 and 5 - see below). These can be accomplished by placing from 1 to 6 hashmarks (#) in front of the text that you wish to use as your heading. For example, the Markdown in this example would produce the following results:
Markdown
# Heading Level 1
## Heading Level 2
### Heading Level 3
#### Heading Level 4
#####Heading Level 5
######Heading Level 6
Result
Heading Level 1
Heading Level 2
Heading Level 3
Heading Level 4
Heading Level 5
Heading Level 6
Additionally, a level 1 and level 2 heading can be created by simply placing, on the line directly below your desired text, two or more dashes (-) for a level 2 heading or one or more equal signs (=) for a level 1 heading. For example
Markdown
Heading Level 1
==
Heading Level 2
--
Result
Heading Level 1
Heading Level 2
Back to Table of Contents
Italicized Text
To italicize text you can either use the "single-asterisk" (*), with which most of you are probably already familiar, or you can use the "single-underscore" (_). For example, the Markdown in this example would produce the following results:
Markdown
*Italicized* using "single-asterisks" or _Italicized_ using "single-underscores"
Result
Italicized using "single-asterisks" or Italicized using "single-underscores"
Back to Table of Contents
Line Breaks and Spacing
While Markdown does not allow you to add three or more blank lines between blocks of text, it does allow for both single and double spacing. Being able to separate lines of text is probably one of the most useful as well as one of the simplest formatting techniques to do using Markdown.
Back to Table of Contents
Single Spacing
Placing single line breaks between blocks of text is very easy and useful (especially if you are trying to post lines of poetry). All that you have to do in order to single space your text is to place two or more blank spaces after your text before you hit enter (i.e. to start a new line, press the space-bar key twice before you hit ENTER). For example, using these keystrokes would produce the following results:
Markdown
| Desired Text | Keystrokes Needed |
|---|---|
| To end your line | [SPACE][SPACE][ENTER] |
| With single spaces | [SPACE][SPACE][ENTER] |
| Just end the line | [SPACE][SPACE][ENTER] |
| With two blank places | [SPACE][SPACE][ENTER] |
Result
To end your line
With single spaces
Just end the line
With two blank places
*Corny, but I hope it gets the point across
Back to Table of Contents
Double Spacing
Creating line breaks using double spacing is very simple. All you have to do is press ENTER twice at the desired break point and you will create a new line of text with a blank space in between each line of text. For example, using these keystrokes would produce the following results:
Markdown
| Desired Text | Keystrokes Needed |
|---|---|
| To place a space | [ENTER][ENTER] |
| Between two lines | [ENTER][ENTER] |
Just hit ENTER |
[ENTER][ENTER] |
| Two more times | [ENTER][ENTER] |
Result
To place a space
Between two lines
Just press ENTER
Two more times
Back to Table of Contents
Tables
Defining Tables
Creating tables with Markdown take a little getting used to, but once you understand the key concepts, it is really very easy. Before looking at an example of table formatting, let’s first look at what makes up a basic table.
Three Key Points
1). Headers/Row1Each column of the table will be represented by placing each column between a set of pipes ? | | (The pipe character can be found below the backspace key). For example, here is what you might type for the first row of a three column table:
Row 1 ?
| | | |
2). Dividing Lines: Directly beneath each column heading (your second row of pipes) you will have to create a matching set of pipes with dashes in between each pipe on the second row. Note that the number of dashes and blank spaces that are used between each set of pipes on the second row is arbitrary and will make no difference in the final appearance of your table. Here is an example of what you might type for the first two rows of a three column table
Row 1 ?
| heading 1| heading 2 | heading3 |
Row 2 ?| --- | --- | --- |
3). Finally, table alignment within each row is achieved by placement of colons at the edges of each set of dashes. For example:
•Left Alignment ? Default (no colon necessary)
•Right Alignment ? colon on right side of dashes ? | ---: | ---: | ---: |
•Center Alignment ? colon on each side of dashes ? |:---:|:---:|:---:|
Back to Table of Contents
Markdown Examples
Two Columns
Code:
| Heading 1 | Heading 2 |
| :-------: | :-------: |
| Item 1.1 | Item 1.2 |
| Item 2.1 | Item 2.2 |
| Item 3.1 | Item 3.2 |
Result
| Heading 1 | Heading 2 |
|---|---|
| Item 1.1 | Item 1.2 |
| Item 2.1 | Item 2.2 |
| Item 3.1 | Item 3.2 |
To be clear, it is not actually necessary to make each of the pipes ( | ) line up when you are typing out your table. When you post your response, the columns will automatically line up. What is important is that the number of columns in each row should match up. For example, if you have a table with four columns then for each row, you would need to type out 5 pipes ( | | | | | ). It should also be noted that the actual number of dashes that you type between each set of pipes on your second row is arbitrary, and as long as you type at least one dash for each column, your table should come out right ( |-|-|-|-| ). For example, notice that in the following example, a single dash is used as a dividing line for each individual column:
Back to Table of Contents
Markdown: 3 Columns
Code:
| Heading 1 | Heading 2 | Heading 3 |
| :- | -: | :-: |
| Left column | Middle column | Right column|
| Left-Aligned Text | Right-Aligned Text | Centered Text|
| 200 | 200 | 200 |
| 20.000 | 20.000 | 20.000|
| 2.000.000 | 2.000.000 | 2.000.000 |
Result
| Heading 1 | Heading 2 | Heading 3 |
|---|---|---|
| Left column | Middle column | Right column |
| Left-Aligned Text | Right-Aligned Text | Centered Text |
| 200 | 200 | 200 |
| 20.000 | 20.000 | 20.000 |
| 2.000.000 | 2.000.000 | 2.000.000 |
There may be a time in which you do not wish to use headers, or you might wish to leave a particular cell within the table blank. To do this, you just leave the space between the desired bars blank. For example:
Back to Table of Contents
Markdown: 5 Columns, No Set Headers
Code:
| | | | | |
| - | :-: | :-: | :-: | :-: |
| | **Birds** | **Mammals** | **Insects** | **Fish** |
| **Six Legs** | No | No | Yes | No |
| **Wings** | All | Rarely | Many | None |
| **Gills** | No | No | No | Yes |
| **Multicellular** | Yes | Yes | Yes | Yes |
Result
| Birds | Mammals | Insects | Fish | |
| Six Legs | No | No | Yes | No |
| Wings | All | Rarely | Many | None |
| Gills | No | No | No | Yes |
| Multicellular | Yes | Yes | Yes | Yes |
Notice that by leaving your header row blank, you can still set your headers off from the rest of the table by using the bold-text Markdown.
Back to Table of Contents
Other Resources and Links
The following websites provide additional information regarding some of the other formatting features available through the use Markup:
?PHP Markdown Extra
?Markdown Cheatsheet
?Daring Fireball: Markdown Basics
?Daring Fireball: Markdown Syntax
Back to Table of Contents
End
Please feel free to post any questions or comments below!
Saved in 2015 without any editing changes to see what still works.
69 Answers
Thank you, thank you, thank you.
Thank You!
I Love it!
Gracias!
This is great, Izan! 
I'm definitely bookmarking this thread (just like your 'colorful post' thread.) Thank you very much form the time to put all this detail in writing! 
Heidi and a few of us are having trouble so maybe this will give us the good oil.
I will post an answer that just has the "code" for doing this. Note, however, that the "code" is basically the presence of four spaces at the beginning of a line so it doesn't really look like HTML code. You can click on edit and then copy and paste into a new answer to practice using this technique. Your answer will be published if you click submit at that point. There is no problem with that. And I think that is the only way you'll really be able to see the final result. Once you publish it and it gets posted to the SD hot questions board because an answer is added, you can edit it as many times as you want and it won't go to hot questions, but you'll be able to experiment to your heart's content.
==========================================================
This is an example of using a scroll bar to reveal a hint, show a hidden answer or explanation, etc. It could also be used to show how to say something in English or Spanish and then use the scroll bar to show how to say it in the other language. Sometimes members publish little challenges...how would you translate this, etc. This feature provides a way of doing that and providing the "answer key"
The technique is very simple. So simple, in fact, that some members have accidentally triggered this feature without knowing anything about it, and then thought there was something wrong with the system because it happened. ")
Here's how to do it. Start a line of text with 4 or more spaces. Keep typing (or holding down the space bar) and then type some more until the text starts to wrap onto the next line. (Write a very long sentence without hitting the space bar.)
If for some reason you want to have multiple lines of text, scrolling all together, you can hit the space bar at the end of one extra long line that it wrapping and then start typing another long line beginning with four spaces.
If you want to create multiple scroll bars with one line of text each you need to insert a line break < br > (without the spaces) on a blank line and then hit enter after the < br > The will insert a blank line between the line that just has < br > and your next line of text. Now, type 4 spaces and start another long line. As far as I know, you could repeat this process as long as you wanted to so you could have 10 or 20 questions / challenges / translations / whatever, each one with its own scroll bar.
I hope some of you find this technique useful and that you are able to creatively use this feature to help other members to learn English or Spanish or to just have some fun. Come to think of it, you could use this technique to show riddles in English or Spanish and then provide the answers to the riddles at the end of the scroll bar. 
Click on the scroll bar for the hidden answer hidden answer.
Click on the scroll bar for the hidden answer hidden answer.
Click on the scroll bar to review all the answers answer 1.
Click on the scroll bar to review all the answers answer 2.
Click on the scroll bar to review all the answers answer 3.
Click on the scroll bar to review all the answers answer 4.
This one just has the code. If you want to experiment, click on edit, copy and paste to a new answer in this thread and then edit it so you get used to how it works.
=======================================================
Click on the scroll bar for the hidden answer 1 hidden answer 1.
Click on the scroll bar for the hidden answer 2 hidden answer 2.
Click on the scroll bar to review all the answers answer 1.
Click on the scroll bar to review all the answers answer 2.
Click on the scroll bar to review all the answers answer 3.
Click on the scroll bar to review all the answers answer 4.
Sometimes you might want to list some things using a different font to call attention to them. Just use 4 spaces prior to typing actual characters on each new line.
This is text after 4 spaces
This is more text after 4 spaces
Now here is a line of text with no spaces
Here is a line with 4 space but it is not in the new font because there is no blank line following the line that did not use 4 spaces.
Here is a line of text with 4 spaces, This time I put a blank line before it. As you can see, a funny thing happens when you have a line beginning with 4 spaces that is quite long. Rather than wrapping the text as usual, a scroll box is used to see the rest of the text. Who knows, someone might want to use this so the reader has to use the scroll box to reveal a hidden clue, or a hidden answer.
Here is a line after spaces without a blank line after the long line.
Here is a line after 4 spaces after a blank line.
Here is a line after 4 spaces after a line with a line break < b >
Please scroll to see the answer to the question. Are you scrolling yet. Why not. I think it will work. Here's a bunch of spaces did the spaces get eliminated? I hope not.
Are we having fun yet?
Please scroll to the the explanation of this joke..............................................................................the lady wanted to sell her baby! She said the guy would make a great father.
This is some large purple text.
This is some smaller red text.
Smaller pink text
how about orange
and green
yellow
blue
jade
cyan
crimson
gold
lime
turquoise
navy blue
dark green that's really a darker red
magenta
khaki
fuchsia
violet
coral
capri
aqua
avocado
claret
cornflower blue
plum
grey
burnt orange
teal
Great job! 
This is great Ira. As usual, it looks like you put a lot of time and energy into this project!
