42 Vote

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

![My Avatar](http://a.sdswift.com/uploads/avatars/b/160/bd321fe6f402bcd022d31f0e_160_160.jpg)

Result

My Avatar

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).

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

A Link to SpanishDict's Reference Page

Back to Table of Contents

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.

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!

  • My goodness that's massive! Bien hecho that's going to be a great reference article - thanx for the effort :) - Kiwi-Girl Aug 11, 2010 flag
  • change it to reference article, this is great! - swing Aug 11, 2010 flag
  • Holy cow! And to think I was afraid of sounding geeky with my two bits of HTML explanation! :-D Great stuff!! - Gekkosan Aug 11, 2010 flag
  • Just one detail that people may not realize: oftentimes the URL's for images show % marks, which essentially are the way that web servers indicates that the name indicated in the address contains spaces. Thus, you can get something that looks like this: - Gekkosan Aug 11, 2010 flag
  • http://www.A%picture%that%you%want.gif, which is exactly the same as the troubleshooting example with the spaces, and therefore it is also not recognizable. This is really great! A condensed HTML course for SD! Valuable stuff, people! - Gekkosan Aug 11, 2010 flag

20 Answers

8 Vote

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

  • hilarious as always Ray - voting! :) - Kiwi-Girl Aug 11, 2010 flag
  • Not for me! demasiado pero buen trabajo Iza It will help many people - readytodicta Apr 9, 2013 flag
  • You are so funny, Ray. - 0083f5dc Sep 4, 2013 flag
6 Vote

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.

5 Vote

Ira, thank you so much from all of us who love special formatting and colorful posts!

This is ....

Wonderful!

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.

4 Vote

Awesome

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!

3 Vote

Hi Ray76

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 smile

3 Vote

This is great !!! thanks a lot Izan

  • I don't understand any of this. I need a young person to translate. - sanlee Aug 11, 2010 flag
  • Sandi, just take it in little bits at a time, its great stuff but you may never need more than one or two features. - LateToDinner Aug 13, 2010 flag
3 Vote

This was helpful to me today so I'm bumping it back up.

3 Vote

¡que chevere!

Izanoni1

didn't know all of that

imageshack.us and photobucket are good to post photos from your computer ... it gives them a URL

2 Vote

Izan,

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:

http://www.spanishdict.com/answers/123000/spaces-in-urls-dont-work-right#a134610

smile

2 Vote

Update:

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:

Aside from the " " trick (brilliantly) suggested by Carlos, you could also use a URL shortener like bitly, google shortener, or TinyURL

Simply go to one of these sites, paste the desired URL into the text box and click enter. Then just copy the new shortened URL to your clipboard and use it to post your picture or link.

2 Vote

Is this post in the Reference Section ??? It should be! Whenever I needed this information, finding this post was too hard.

  • Yes, you are right, Pesta. Why don't you send a PM to Heidi about iit? - sanlee May 15, 2011 flag
  • I'll do that. Thanks. - pesta May 15, 2011 flag
2 Vote

Sad to say this comes across as a very typical "user manual" which has no concept of what a user actually does and needs. I spent 40 years of my time in the IT business trying to teach systems designers the difference between a "system manual" and a "user manual"

1) "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.")." Not so, this is only one way of adding a picture, that is, from a picture on a website which is compliant with this approach.

2) 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." Not so, I have never yet seen this option appear. Of course I'm back in the antique days of XP like 87% of users so it may be true in Windows 7 or 8. Incidentally why "virtual" clipboard? The Windows clipboard, at least, is always referred to as "the clipboard" so why confuse the issue?

3) "Obtaining an Image URL" I know of no statistics but from personal experience in setting up people's computers (quite a lot of them) I would guess that only 45% actually know what is meant by a "URL". The rest just shudder and clam up.

4) "To bold text you can either use the "double-asterisk" (**), with which most of you are probably already familiar," After 54 years in the industry, no I'm not familiar with these (including the "double underline". In reality they refer only to a tiny proportion of computer users who have, poor suckers, been forced to learn this esoteric jargon.

I've covered maybe 15% of this set of instructions and could continue. I shan't because, so far as I can see, this is an attempt to explain a set of procedures which should never have been chosen and which cause endless irritation to those who don't have this background. I know of no other text-processing system that I use on the web which is even remotely as difficult to use.

Please excuse me if this appears to be some sort of personal attack. In fact it is an expression of the frustration I feel when using what already is a wonderful tool for learning/teaching/refreshing our ability to communicate between Spanish and English speakers. Sadly, what it is NOT is easy to use.

If you disagree, quote me any forum to which you subscribe which presents greater difficulties in expressing yourself. I haven't counted but I belong to around 20.

1 Vote

This is great, Izan! grin 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! smile

1 Vote

Thank you, thank you, thank you.

Thank You!

I Love it!

Gracias!

1 Vote

Thank you, Izanoni1. Although I’m more of a fan of markUP than markDOWN—I’m no expert at HTML tags though and I don’t go too wild with them!—I found your info. on how to do columns very useful. You know, with the pipes, and such.

I noticed that the columns are each as wide as the longest entry. I thought that it might be a little more aesthetically appealing to widen them more than that. Less cluttered, let’s say.

Well, adding extra spaces on the widest one did not work. I tried non-breaking spaces, and even alternating plain spaces with non-breaking spaces. No dice.

Then, this idea occurred to me: Why not try the CSS code for non-breaking spaces? I had to look it up. It’s → & # 160 ; ← but with no spaces, of course. I alternated several of these with regular spaces and voilà, it did the trick.

Thanks again, Brian

Answer this Question
Download our free app
Connect with SpanishDict
Comentarios