Welcome to the Treehouse Community
Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.
Looking to learn something new?
Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.
Start your free trialDustin Matlock
33,856 PointsHow-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
- This is the first list item.
- 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:
Block level image:
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 ( ` ) 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:
Ordered Lists
Ordered lists are created using 1.
and a space:
- Ordered list item
- Ordered list item
- 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)
Syntax:
:smile: :smiley: :smirk: :astonished:
Refer to the Emoji Cheat Sheet for the complete list of emoticons.
Resources
Dustin Matlock
33,856 PointsI 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.
Sean Gaffney
Front End Web Development Techdegree Student 2,560 PointsDustin Matlock, we've fixed the header issues you pointed out and I'll take a look at the linebreak issues as well.
Dustin Matlock
33,856 PointsThanks, 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!
Jeremy Jantz
6,717 PointsDustin Matlock Just fixed the ordered list styling :)
Dustin Matlock
33,856 PointsThank you, that's perfect!
Dustin Matlock
33,856 PointsJeremy Jantz, would it be too much to fix unordered nested lists within ordered lists?
Eston Burciaga
1,729 Pointsi 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
33,856 PointsHi 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
33,856 PointsHeadings 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)
Sean Gaffney
Front End Web Development Techdegree Student 2,560 PointsHey 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.
Dustin Matlock
33,856 PointsSean Gaffney, thanks for doing that. Looks like syntax highlighting is back to normal as well.
17 Answers
Simon Latham
Courses Plus Student 6,261 PointsAm 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
33,856 PointsHi Simon, in the guide there is a GIF image which shows how to do it. No capital letters needed. Below is the example.
Simon Latham
Courses Plus Student 6,261 PointsThanks, 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
33,856 PointsYou've essentially got it down.
For example, this:
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
Treehouse TeacherAlso, 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.
Simon Latham
Courses Plus Student 6,261 PointsThanks, Duslim. I finally got it. Phew!
Brian van Vlymen
12,637 Points<?php
echo test
?>
Tendai Mashakada
5,099 PointsMy 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
33,856 PointsHi Tendai, I'm thinking you can probably find the answer in this thread.
Tendai Mashakada
5,099 PointsThank you i passed it
Brian Rosario
Courses Plus 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
33,856 PointsHey 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 + PeanutsOrdered List
1. Red 2. Green 3. Blue
James Barnett
39,199 PointsAlso, 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.
Dustin Matlock
33,856 PointsRight Thanks, James.
ivomiranda
30,286 PointsIt would be nice to have this forum link in the Markdown Cheatsheet that appears on every post :)
Aurelian Spodarec
7,369 Pointsyes, but maybe a little more ordinated to find things quicker like u do comment html and css as Nick show us ,
Kyle Nieber
5,513 Points<p>Test post</p>
Gina Bégin
Courses Plus Student 8,613 PointsHow 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
33,856 PointsHi 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.
Gina Bégin
Courses Plus Student 8,613 PointsThanks, Dustin Matlock ! ;) (Putting it to use already. :)
Jovanny Elias
16,204 PointsJust 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.
Aurelian Spodarec
7,369 PointsHi 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
33,856 PointsJovanny Elias, of course that's what it's for.
Jovanny Elias
16,204 PointsI am going to try both ways and see which one is easier. Thanks guys
Dustin Matlock
33,856 PointsI've also been linking this video to show how to post code and ask questions.
Aurelian Spodarec
7,369 PointsI gonna try it too :) but , iMac users have the symbol on the bottom ^^
Frederico Graciano
Courses Plus Student 2,768 PointsLets see if this work
Graham Mackenzie
2,747 PointsI'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
Graham Mackenzie
2,747 PointsOf course it works here... : | What the heck?!
Dustin Matlock
33,856 PointsLooks 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.
Graham Mackenzie
2,747 PointsSeems to be an intermittent issue?
Happens more often in OPs and Comments than in Answers; dunno if that's related...
¯_(ツ)_/¯
Graham Mackenzie
2,747 PointsThanks, Dustin Matlock.
Sean Gaffney
Front End Web Development Techdegree Student 2,560 PointsOur 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?
Graham Mackenzie
2,747 PointsThanks, 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
<noob />
17,062 PointsJesus Mendoza
Full Stack JavaScript Techdegree Graduate 20,337 PointsHow can I change the font size of my current text without making it bold?
James Barnett
39,199 PointsJames Barnett
39,199 PointsI think that about covers everything, a few things to add