Line breaks, pictures, links and other formatting tricks
Using Markdown to Format your Posts
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
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."
Posting the Image
To post the image you will need to use the following set of characters:
||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|
||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.|
||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|
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:
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).
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").
Explanation of Special Characters
To post a link you will need to use the following set of characters:
||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.|
||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|
[A Link to SpanishDict's Reference Page](http://www.spanishdict.com/answers/100000/spanishdict-reference-guide)
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:
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:
**Bold** using "double-asterisks" or __Bold__ using "double-underscores"
Bold using "double-asterisks" or Bold using "double-underscores"
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:
# Heading Level 1
## Heading Level 2
### Heading Level 3
#### Heading Level 4
#####Heading Level 5
######Heading Level 6
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
Heading Level 1
Heading Level 2
Heading Level 1
Heading Level 2
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:
*Italicized* using "single-asterisks" or _Italicized_ using "single-underscores"
Italicized using "single-asterisks" or Italicized using "single-underscores"
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.
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:
|Desired Text||Keystrokes Needed|
|To end your line||
|With single spaces||
|Just end the line||
|With two blank places||
To end your line
With single spaces
Just end the line
With two blank places
*Corny, but I hope it gets the point across
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:
|Desired Text||Keystrokes Needed|
|To place a space||
|Between two lines||
|Two more times||
To place a space
Between two lines
Two more times
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 →
| Heading 1 | Heading 2 |
| :-------: | :-------: |
| Item 1.1 | Item 1.2 |
| Item 2.1 | Item 2.2 |
| Item 3.1 | Item 3.2 |
|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:
Markdown: 3 Columns
| 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 |
|Heading 1||Heading 2||Heading 3|
|Left column||Middle column||Right column|
|Left-Aligned Text||Right-Aligned Text||Centered Text|
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:
Markdown: 5 Columns, No Set Headers
| | | | | |
| - | :-: | :-: | :-: | :-: |
| | **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.
Other Resources and Links
The following websites provide additional information regarding some of the other formatting features available through the use Markup:
Please feel free to post any questions or comments below!
Saved in 2015 without any editing changes to see what still works.
You have done a highly commendable job here izanoni , it is well laid out and easy
to follow , to understand and execute the actions that you describe is I think for
me uumm how shall I put it , Flamin impossible, I thought Spanish was difficult
but compared to this it is a piece of cake. I think I want to go home now I feel faint
and mummy is calling.
This is brilliant ! And it should be given the highest praise possible ,well done Iza
I am going to try to read this through and understand it. I only know one way to put in a picture. I would love to be able to change the size. It would be great to be able to post pictures from my own computer. I have trouble with these kind of things. But, it looks like I have all the information I need. Thanks, Izanoni. This is great information.
Ira, thank you so much from all of us who love special formatting and colorful posts!
This is ....
P.s. If you find a moment, would you be so kind as to edit this post so that the word "wonderful" is centered? I can't see to figure out exactly where the codes go.
saved in 2015
Well, I found it to be a great article, and am glad it is here. It´s definitely not for everyone, but it´s a good jumping off point for someone who wants to know a little bit about the topic.
It allowed me to make my first heading, and to google ¨Markdown¨ and ¨strikethrough¨
and learn just what I needed to know
and to discard the rest
I think the article was more of a dictionary and reference, and was never meant to be a comprehensive language primer. As such, great job!
Goodbye cruel world!!
|Active||English active sentence||Spanish active sentence|
|Passive||English passive sentence||Spanish passive sentence|
I thought Spanish was difficult
but compared to this it is a piece of cake.
I originally began writing this with the intention of showing people an easy method to add add breaks (carriage returns) to text as well as to show an easier method (compared with HTML syntax) to add simple table formatting.
While I was typing this out, I also remembered that other very common questions related to formatting included "how do I add pictures to my post" and "how do I add links to my post." Before I knew it, I ended up with the behemoth that you saw this morning.
Since this morning, I have tried to clarify this presentation by editing out some information in certain places and rewording it in others. I have also tried to adjust the formatting to make it a bit easier to read. Please understand that the information presented here was not necessarily meant to be read in its entirety but only to be cherrypicked for useful information. For example, you might want to know how to create tables, but could care less about headings or posting links. For this reason, there is a hyperlink to each relevant topic within the table of contents so that you can go directly to your topic of interest allowing you to avoid anything irrelevant to your purposes.
In any case, I hope that you find something useful here. Regarding level of difficulty, the syntax of Markdown is really quite straightforward. If it seems difficult in any way then let me just assure you that this is completely due to my own shabby expository abilities and not to any lack on your part nor to any inherent complexities in the language itself.
If you have any questions, please let me know. I also welcome any criticism or suggestions on how to improve this article. I really don't want to post it as a reference article if it seems too inaccessible, complicated or unwieldy. I look forward to any suggestions you might have
There is a very easy way to highlight a word or a portion of a sentence.
You use the < mark > tag (without the extra spaces) before the section you want to highlight and you use the < / mark > tag to finish the selection.
There is a very easy way to change the color of a word or a portion of a sentence.
You use the < font color="red" > tag without the extra spaces before the section you want to color red (for example) and you use the < /font color > tag to finish the selection. The quotation marks are optional. < font color=red > does the same thing.
Hello all you beautiful SD people.
Here's looking at you, kid.
Thank you, Ken!
One more for the road.
I thought it would be useful to provide a link to this thread which explained how to deal with blank spaces in URL addresses. Carlos-F's answer has holds the key: