General Discussion

Dustin Matlock
Dustin Matlock
32,890 Points

How-to Guide: Markdown within Posts

Strong and Emphasis

strong or strong

emphasis or emphasis

Syntax:

**strong** or __strong__

*emphasis* or _emphasis_

Blockquotes

Right angle brackets > are used for block quotes. First level of quoting.

This is nested blockquote.

Back to the first level.

Syntax:

> Right angle brackets > are used for block quotes. First level of quoting.
>
> > This is nested blockquote.
>
> Back to the first level.

Blockquotes can contain other Markdown elements, including headers, lists, and code blocks. Use a tab or 4+ spaces for code block.

Heading Level 2

  1. This is the first list item.
  2. This is the second list item.

Here's some example code:

return shell_exec("echo $input | $markdown_script");

Syntax:

> ## Heading Level 2
> 
> 1.   This is the first list item.
> 2.   This is the second list item.
> 
> Here's some example code:
> 
>     return shell_exec("echo $input | $markdown_script");

Links and Email

An email help@teamtreehouse.com link

Simple inline URL: http://blog.teamtreehouse.com

Descriptive inline link with title: Treehouse Blog

An example reference style link. Then, anywhere else in the doc, define the link.

Syntax:

<help@teamtreehouse.com>

http://blog.teamtreehouse.com>

[Treehouse Blog](http://blog.teamtreehouse.com "Title")

An [example][id] reference style link. Then, anywhere
else in the doc, define the link.


Somewhere down in the document: [id]: http://blog.teamtreehouse.com/  "Title"

Images

An inline image: alt text

Block level image:

alt text

Syntax:

An inline image ![alt text](https://dl.dropboxusercontent.com/u/30198996/Treehouse/images/treehouse-logo.png "Title")

![alt text](https://dl.dropboxusercontent.com/u/30198996/Treehouse/images/treehouse-blog.png "Title")

Inline Code and Block Code

Inline code can be surrounded by a backtick ( &grave; ) on both sides.

Code block:

<!doctype html>
<!--[if lt IE 7 ]><html lang="en" class="no-js ie ie6"><![endif]-->
<!--[if IE 7 ]><html lang="en" class="no-js ie ie7"><![endif]-->
<!--[if IE 8 ]><html lang="en" class="no-js ie ie8"><![endif]-->
<!--[if IE 9 ]><html lang="en" class="no-js ie ie9"><![endif]-->
<!--[if (gt IE 9)|!(IE)]><!--><html lang="en" class="no-js" ><!--<![endif]-->
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0">
  <title>Treehouse Markdown - Treehouse Forum</title>

Syntax:

    ```html 
    <!DOCTYPE html>
        <head>
            <p>Posting code on Treehouse is super easy!</p>
        </head>
    </html>
    ```

Screencast of posting code:

Code block on Treehouse

Ordered Lists

Ordered lists are created using 1. and a space:

  1. Ordered list item
  2. Ordered list item
  3. Ordered list item

Syntax:

1. Ordered list item
2. Ordered list item
3. Ordered list item

Unordered Lists

Unordered list are created using *, + or - and a space.

  • Unordered list item
  • Unordered list item
  • Unordered list item

Syntax:

* Unordered list item
* Unordered list item
* Unordered list item 

+ Unordered list item
+ Unordered list item
+ Unordered list item

- Unordered list item
- Unordered list item
- Unordered list item
  • A list item with a blockquote:

    This is a blockquote inside a list item.

Syntax:

* A list item with a blockquote:

    > This is a blockquote
    > inside a list item.

A code block within a list item needs to be indented twice (8 spaces) or two tabs:

  • A list item with a code block:

    <code goes here>
    

Syntax:

* A list item with a code block:

        <code goes here>

Nested Lists

  • This code challenge is so difficult

    • Skip lunch and work all day
    • Not really I should take more breaks
  • Learning new things at Treehouse

    • HTML
    • CSS
    • JavaScript

      • JQuery
  • Take a break to learn iOS development

  • Learn the ins and outs of the command line

Syntax:

- This code challenge is so difficult

    * Skip lunch and work all day

    - Not really I should take more breaks

- Learning new things at Treehouse

    - HTML

    - **CSS**

    - JavaScript

        - JQuery 

- Take a break to learn iOS development

- Learn the ins and outs of the command line

Escaping Characters with a Backslash

+ This list * was prevented - with a backslash

Syntax:

\+ This list
\* was prevented
\- with a backslash

Horizontal Rules

Three or more asterisks or dashes.


Syntax:

***

---

- - -

Headers

This is H1

This is H2

This is H1

This is a paragraph.

This is H2

This is a paragraph.

This is H3

This is a paragraph.

This is H4

This is a paragraph.

This is H5

This is a paragraph.

This is H6

This is a paragraph.

This is H1
==========

This is H2
----------

# This is H1  
This is a paragraph.

## This is H2  
This is a paragraph.

### This is H3  
This is a paragraph.

#### This is H4  
This is a paragraph.

##### This is H5  
This is a paragraph.

###### This is H6  
This is a paragraph.

Strikethrough

Wrap with 2 tilde ~ characters on each end.

Strikethrough

Syntax:

~~Strikethrough~~

Emoji (emoticons)

:smile: :smiley: :smirk: :astonished:

Syntax:

:smile: :smiley: :smirk: :astonished:

Refer to the Emoji Cheat Sheet for the complete list of emoticons.

Resources

James Barnett
James Barnett
37,527 Points

I think that about covers everything, a few things to add

  • reference style links, as they can contain parentheses
  • syntax highlighting with code blocks
  • how to add leading after a heading
  • Windows & online markdown editors
Dustin Matlock
Dustin Matlock
32,890 Points

I think there is an issue with linebreaking (Fixed) and I've added how to do reference style links. Also, Dave McFarland has a more extensive guide on posting code to the forum.

Dustin Matlock, we've fixed the header issues you pointed out and I'll take a look at the linebreak issues as well. :smile:

Dustin Matlock
Dustin Matlock
32,890 Points

Thanks, Sean. It looks like all headings are now linebreaking. H3 - H6 are all the same size but 3 heading sizes is most likely enough. The only other thing would be ordered lists which appear as unordered lists. Lists in markdown have now been resolved!

Dustin Matlock Just fixed the ordered list styling :)

Eston Burciaga
Eston Burciaga
1,729 Points

i can't figure out how to add an image of a screenshot from my computer to the forum. A simple "Copy" "paste" didn't work, so I tried the "! alt text" item as follows and it didn't work either:

! alt text "C:\Users\estpn\a_Personal Files\temp\avd shot.png"

Can someone please give me the code to post a screenshot into the forums?

Dustin Matlock
Dustin Matlock
32,890 Points

Hi Eston, the Treehouse forum does not offer a way to upload images. Therefore, you have to upload images to a service (e.g., Dropbox, Google Drive, a website you own, etc.). If you need some help with that, let me know.

Dustin Matlock
Dustin Matlock
32,890 Points

Headings now require a space to render. This means all posts without spacing will have to be edited.

#Does not Render

# Renders

(cc Jeremy Jantz, Sean Gaffney, Kyle Meyer)

Hey Dustin, I've since fixed the headings issue. However, technically, the markdown spec shows a space between the hashes and the phrase. I've updated your headings section above to reflect that. :smiley:

Dustin Matlock
Dustin Matlock
32,890 Points

Sean Gaffney, thanks for doing that. Looks like syntax highlighting is back to normal as well.

15 Answers

Simon Latham
PRO
Simon Latham
Pro Student 6,261 Points

Am I right in saying that in order to display a JavaScript code block, I need to begin with three back ticks and the word "javascript" or "JavaScript"? Then end the block with three more back ticks?

If it's not, please tell me what the markdown cheat is... if it is, it's not working for me...

Dustin Matlock
Dustin Matlock
32,890 Points

Hi Simon, in the guide there is a GIF image which shows how to do it. No capital letters needed. Below is the example. :smiley:

Code block on Treehouse

Simon Latham
PRO
Simon Latham
Pro Student 6,261 Points

Thanks, Duslim... I did try that before posting... what I'm trying to establish is what word or abbreviation I should use to show a JavaScript block of code... js doesn't work either.

Dustin Matlock
Dustin Matlock
32,890 Points

You've essentially got it down.

For example, this:

Treehouse Forum Code

Outputs:

function sumDigits(num) {
    var i, sum = 0; // can declare two variables at once

    for (i = 1; i <= num; i++) {
        sum += i; // add each number to sum (ie, 1 + 2 + ...+ num)
    }

    // Display result
    alert("The sum of the digits from 1 to " + num + " is:\n\n\t " + sum);
}

You might also check out Dave's Post.

Dave McFarland
Dave McFarland
Treehouse Teacher

Also, make sure there is an empty line between any text and the start of the code block you want to create. If you don't put the empty line between text and code block, the block of code isn't formatted correctly.

Here is an example. The code block starts directly under this line (no blank line between this one and the start of the code block)

var a = 1;

Notice that the code isn't set off in a block, and "javascript" appears when it shouldn't

Now, here's a line, followed by an EMPTY line followed by a code block:

var a = 1;

You don't have to insert an empty line AFTER the code block.

My code is failing to pass, can you tell me where I am going wrong.Its under Accounting for empty results

The question is::::Challenge task 2 of 3 If the array is NOT empty, the foreach loop will execute. But if it IS empty, we should display a message. Add an else block to the conditional that displays the following message in an HTML paragraph tag: 'There are no flavor recommendations for you.'

And my code is

$recommendations = array();

?><html> <body>

<h1>Flavor Recommendations</h1>

<?php if(!empty($recommendations)) { ?> <ul> <?php foreach($recommendations as $flavor) { ?> <li><?php echo $flavor; ?></li> <?php } ?> </ul> <?php } ?> <p> <?php else { echo 'There are no flavor recommendations for you.'}; ?> </p> <?php } ?> </body> </html>

Dustin Matlock
Dustin Matlock
32,890 Points

Hi Tendai, I'm thinking you can probably find the answer in this thread.

Thank you i passed it

Brian Rosario
PRO
Brian Rosario
Pro Student 297 Points

<li> <a href="img.numbers=01.jpg"> <img src="img/numbers-01.jpg" </li>

have i not added an image to the page with this code?

Dustin Matlock
Dustin Matlock
32,890 Points

Hey Brian, the forum uses markdown code instead of HTML. Also, you'll want to use absolute links instead of relative.

Markdown Cheatsheet

Links

   This is an [example link](http://example.com/)

Code

Wrap your code with 3 backticks (```) on the line before and after. If you specify the language after the first set of backticks, that'll help us with syntax highlighting.

   ```html
   <p>This is code!</p>
   ```

Italic

   Here’s a word that is *emphasized*

Bold

   Here’s a word that is **bold**

Images

   ![alt text](/path/to/img.jpg "Title")

Unordered List

   + Candy
   + Gum
   + Peanuts

Ordered List

   1. Red
   2. Green
   3. Blue
James Barnett
James Barnett
37,527 Points

Also, you'll want to use absolute links instead of relative.

Make sure your absolute link points to a web server on the Internet and not an absolute link on your own system.

It would be nice to have this forum link in the Markdown Cheatsheet that appears on every post :)

yes, but maybe a little more ordinated to find things quicker like u do comment html and css as Nick show us ,

<p>Test post</p>
Gina Bégin
PRO
Gina Bégin
Pro Student 8,613 Points

How do you close the markup so it doesn't go beyond the words it's meant for? For example:

"CSS" <- I want this to be bold

"I have a question about CSS and would like this part of the text to be normal, not bold."

Or any of the other markups, like h1, emphasis, etc.

(And how do you tag people?)

Dustin Matlock
Dustin Matlock
32,890 Points

Hi Gina, bold text, emphasis (italic) should be closed. For instance, **bold text**, etc. With headings (H1, H2, etc.), you only need to start a new line. A level one heading would look this #Level One Heading

You can tag people by typing the @ symbol and a list of people should populate when you start to type the name of the person. Hope this helps.

Just what I was looking for. Nice post. Do you mind if I use the gif on other post's? Would make it so much easier to show others how to post code.

Hi Jovanny Elias ,

What i do to show others how to post their code is to write edit and look what i did .

e.g
User code

some code code code code code
code code code code code code
code code code code code code

EDIT: Hi, press EDIT on your post and see what i did to achieve this effect .

This may help user to see what i did to achieve these effect. I do the same, intact i learned like that. When I'm curious how to put like a link on a word , i pressed edit on somebody that allowed me to see how he did that , i find it much easier than to read this : p its less complicated : p

On mac , how to post code , the ` is down , not up , so they forgotten to do that. They made it only on windows to show people. At first i didn't know where is that symbol on iMac because its on different place than on windows .

Dustin Matlock
Dustin Matlock
32,890 Points

Jovanny Elias, of course that's what it's for. :smiley:

I am going to try both ways and see which one is easier. Thanks guys

Dustin Matlock
Dustin Matlock
32,890 Points

I've also been linking this video to show how to post code and ask questions.

I gonna try it too :) but , iMac users have the symbol on the bottom ^^

Lets see if this work

I'm having a weird issue; hope this is the right place to post about it.

My answers and comments are not including their newlines between paragraphs. They're all getting smooshed together. I've tried hitting return twice, putting in the newline character... no luck. Any idea what I'm doing wrong?

Thanks! Graham

Of course it works here... : | What the heck?!

Dustin Matlock
Dustin Matlock
32,890 Points

Looks like a rendering issue within the forum. I'm sure they're aware; I see a couple older posts on this thread that seem to have the issue.

Sean Gaffney

Seems to be an intermittent issue?

Happens more often in OPs and Comments than in Answers; dunno if that's related...

¯_(ツ)_/¯

Thanks, Dustin Matlock.

Our CSS actually creates the break in answers, but the bottom margins are set to zero for comments, and set to 2px for posts. That may not be intended. Thoughts, Ryan Wilke?

Thanks, Sean Gaffney.

You know better than I if the bottom margin is the issue, but - just to be clear - the problem is spacing between paragraphs within individual answers, comments, OPs...

Thanks, Graham