General Discussion

Dave McFarland
STAFF
Dave McFarland
Treehouse Teacher

Posting Code to the Forum

An important part of asking for help and giving answers in the Forum is showing your code. The Treehouse Forum lets you embed HTML, CSS, Ruby, Java and other code in your posts. To display code, wrap it in one back tick character (for inline code) or three back ticks (for code blocks).

Note that the back tick character isn't the same as the single quote — ' — mark; the back tick is located on the same key as the ~ on most keyboards.

Inline Code

If you want to post code within a paragraph like this — var x = 1; — then just surround that code with one back tick on either side of the code:

`var x = 1; `

Code Blocks

Create a code block when you need to show multiple lines of HTML, CSS, Ruby, Java or other code. To create a code block:

  1. Hit return twice -- this creates a new line and adds a space between the code block and any text above it. (It's important to make sure you have an empty line above and below your code block, or else the code formatting doesn't always work.)

  2. Type three back tick characters: ```

  3. Hit return to create another new line and paste or type your HTML, CSS or other code.

  4. Hit return and add three more back tick characters: ```

  5. Hit return again to create an empty space below the code block.

Here’s how you would add a block of JavaScript code to a forum post:

```javascript

var x = "Hello world!";

console.log(x);

```

And here’s what it would look like:

var x = "Hello world!"
console.log(x);

Syntax Highlighting

To add correct syntax color highlighting to code blocks add the name of the language after the back ticks like this: ```css. Here are a few of the options:

  • ```html
  • ```css
  • ```javascript
  • ```ruby
  • ```php
  • ```java
  • ```c

Dave McFarland, may I ask how you're getting linebreaks after your headings? Thanks!

Dave McFarland
Dave McFarland
Treehouse Teacher

Dustin Matlock

Just use a # before headline text. Hit return, then type a paragraph of text

#Syntax Highlighting
To add correct syntax color highlighting to code blocks add the name of the language after the back ticks like this: \`\`\`css. Here are a few of the options:

It's really odd because sometimes this works and other times it doesn't. I'm thinking it only linebreaks if you are the OP. I'll try an h2 below and see if it breaks.

This is a Heading Level 2

A Sentence below the heading.

#This is a Heading Level 2
A Sentence below the heading.
Dave McFarland
Dave McFarland
Treehouse Teacher

Here's a headline

And here's a paragraph of text

Seems to work!

Check out the image below and this post I just edited from a few days ago. Seems like some sort of a bug and I can't quite pinpoint when it happens. Most of the issues have been fixed!

Dave McFarland How do you indent code? Like

<div>
<!—should be an indented-><p>Hello World</p>
</div>

Also, why isn’t the HTML syntax highlighting working?

EDIT: I guess the HTML highlighting is mostly green

Also, how do you make headlines?

Chris Shaw
Chris Shaw
26,627 Points

Hi 64yes,

Headings are very simple, all you need to do is prefix each bit of text you want as a heading with a pound # symbol, see the below for the full outline.

# H1
## H2
### H3
#### H4
##### H5
###### H6

The space after the pound isn't important but it makes it easier to read in complex markdown files.

Thanks Chris Upjohn , Testing:

Hi

Hi!

Ryan Schurton
Ryan Schurton
13,815 Points
var x = "Hello world!";

console.log(x);
True Bey
True Bey
166 Points

What is a bactic?

After placing bactic, then what? Where do I place bactic?

Chris Shaw
Chris Shaw
26,627 Points

On your keyboard, directly below the escape key is a button that shows two small symbols, the one at the top is known as a tilda and the one below it is a backtick.

By default pressing this key well result in a backtick whereas if you hold shift as well you will get a tilda.

Chris Freeman
Chris Freeman
Treehouse Moderator 57,142 Points

A backtick is a grave accent. See wikipedia use in programming , also know as a back quote, or back prime.

villa
villa
6,171 Points
  • var ret = "hey" -
Diego Murray
Diego Murray
2,515 Points

This may sound ridiculous.. But where is that dash-looking key on mac keyboard?

33 Answers

Andrew McCormick
Andrew McCormick
17,728 Points

Dave. thanks for posting this. This is one of those times I wish we could sticky topics on this forum.
Also, not sure if it's just me or not, but I've noticed that for me and when I clean up other's code in post that you have to add a blank line above and below your code block. When i read your step one that just says "hit return to create new line" I always felt that I should be able to just hit return right now and start a new code block. Reality for me at least is that I have to hit return twice to create the block as well as hit it twice after (I assume that's because the double return in markdown closes out the paragraph?) ``` this would not start a new block because I did not leave a blank line below my paragraph ``` This is a new paragraph about something.

``` this would work becasue there is a blank line below my paragraph and before my code ```

Next paragraph needs a blank line above it as well.

Dave McFarland
Dave McFarland
Treehouse Teacher

Good point Andrew. I'll make that clearer in the post.

Dave - What a fantastic post - thank you! Everyone kept telling me to read the Markdown Cheatsheet, which I did many, many times, but there's some fundamental steps missing - like the spacing, or the difference between line & block code.

Thanks to you and Andrew - fantastic/helpful info.

I recently made a How-to Guide: Markdown within Posts if anyone is interested. I've noticed a few bugs with headings in regards to linebreaks and sizing issues but most everything else seems to work. Please let me know if you find any mistakes or have suggestions.

Dave, thanks for this guide! It seems to provide a deeper understanding of syntax highlighting and I couldn't quite figure out how you got some of the markdown viewable.

Dave McFarland, I was curious do you have the complete list of languages supported by syntax highlighting? Apparently there's a lot more and even console, text, etc., has different highlighting. Thanks.

Dave McFarland
Dave McFarland
Treehouse Teacher

Dustin Matlock

I'm not sure exactly. I found this page which lists lots of different flavors supported by Markdown: https://support.codebasehq.com/articles/tips-tricks/syntax-highlighting-in-markdown

Not sure how many of these we support in the forums.

Thanks, Dave! I think a lot of those work actually. That's what I was looking for :smiley:.

P.S. Apparently Emoji works here, too!

Chris Freeman
Chris Freeman
Treehouse Moderator 57,142 Points

The line for www.rubycoloredglasses.com is out of date: This domain has expired. If you owned this domain, contact your domain registration service provider for further assistance. If you need help identifying your provider, visit http://tucowsdomains.com.

Omer Asadullah
Omer Asadullah
10,415 Points

I believe that to make things simple, one can always post it's code on codepen.io and paste the link of that page on treehouse for questions.

Does anyone know how to add a title to code blocks, or if that is possible? I'd love to be able to do something like what happens when you ask a question about a challenge and you can see the filenames above the code block. Here's an example: https://teamtreehouse.com/forum/stuck-here

Dave McFarland
Dave McFarland
Treehouse Teacher

Marcus Parsons

No, you can't create a header like that. That's something that the Treehouse site does automatically when you ask a question from a code challenge.

Because you can't insert raw HTML into a forum post -- just basic Markdown syntax -- you can't add that.

Sorry.

Ah okay! Thanks for the answer, Dave.

Actually, you're able to do that. Add the three back ticks, then say the name of the file, then .language. Here's an example:

```MyFile.java

Hello!

```

what it looks like:

MyFile.java
Hello!

Hope it helps! ISAIAH S

I still don't know how to add a link to it.

Samvel Tadevosyan
Samvel Tadevosyan
7,117 Points

Isn't there any way to minus/plus the block of text?

In other words to give reader chance to open and close several lines while reading the post, which will be handy especially for codes or parapgraphs, not to scroll much if the context is not interesting.

Code folding is currently not a feature on the forum.

Samvel Tadevosyan
Samvel Tadevosyan
7,117 Points

Thx for the name of the feature Code folding :)

Yeah (H1)

Yeah (H2)

Yeah (H3)

Yeah (H4)

Yeah (H5)
Yeah (H6)
 Thanks so much for this info really helps

Testing:

testing.html
<!DOCTYPE html>
<html>
    <head>
        <title>Hi</title>
    </head>
    <body>
        <h1>hi!</h1>
    </body>
</html>

Cool!

Dave McFarland, please add how to make a Workspaces snapshot to the main post.

Ted Sumner, that may be somewhat off-topic for this post, since it deals with posting code to the forum. The Treehouse Library should have some video courses showing how to do this.

Students can also go to Workspaces and view the tour:

Workspaces Tour

I might consider creating a video in the future to explain Workspaces in detail, but I'm thinking there is a video that covers most of it. If someone wants to chime in on that, please do.

Edit: Check out this video for an introduction to Treehouse Workspaces.

That is good to know, but I ultimately want one resource to point students to on how to convey code in the forum. Sometimes the only way to solve a problem is to get a Snapshot. I personally believe that all students should watch a short video about Snapshots, formatting code, and other tips for getting responses prior to being able to post for the first time. I will check out the video you posted, though.

Dustin McFarland, I just searched the transcript for the video and looked for the tour in workspaces. The video transcript does not contain the word snap or snapshot. The tour in workspaces does not seem to exist in my workspaces page. While those may be somewhere, I certainly cannot find them, thus a student beginning in the program will probably not find them and look at them.

Dave McFarland
Dave McFarland
Treehouse Teacher

Dustin McFarland? That would be the ultimate power-user fusion :)

But seriously, that's a great idea Ted Sumner! We should simply create a workspaces "Workshop" that covers how to use Workspaces. I'll put that in the queue. Thanks for the suggestion.

lol at Dustin McFarland. But there is a registered user with that name. http://teamtreehouse.com/dustinmcfarland

Dave McFarland
Dave McFarland
Treehouse Teacher

Ted Sumner I know! He's probably scratching his head right now and wondering why he was called into this conversation. lol

hiphp like this?

hiphp like this?

var x = "Hello world!";

console.log(x);
Chris Freeman
MOD
Chris Freeman
Treehouse Moderator 57,142 Points

How does one include a single backtick within a code block?

Currently, using backticks within a formated code block messes up the formatting causing HTML encode of "<" into "&lt;", etc.

Using python as an example

Raw A (indented to show actual backticks):

```python
# a comment without backtick
>>> a = 1
>>> a
1
```

Formatted block looking good (same as above Raw A but unindented):

# a comment without backtick
>>> a = 1
>>> a
1

Raw B (indented to show actual backticks):

```python
# a comment with backticks `this`
>>> a = 1
>>> a
1
```

Formatted block gone afoul (same as above Raw B but unindented). The ">" got turned into "&gt;", :

# a comment with backticks `this`
>>> a = 1
>>> a
1

Also, all formated code blocks following a block-gone-afoul will also be fouled regardless of whether anymore backticks are present

>>> a = 1
>>> a
1

Conclusion: Not currently possible to use backticks in color formatted code block. :thumbsdown:

I welcome counter examples. Please!

eric fernandez
eric fernandez
2,106 Points

are you stating that '''Python''' would not work when posting python code?

Chris Freeman
Chris Freeman
Treehouse Moderator 57,142 Points

Both ```Python and ```python work in starting a code formatting block.

My issue was using a backtick (`) within the python code block threw off the formatter. But it seems to be fixed now! Using ```Python to format the block below:

# does `this` work?
class TestEmbeddedBacktick():
    """This docstring has a backtick ` in it"""
    var = True
Chris Freeman
Chris Freeman
Treehouse Moderator 57,142 Points

eric fernandez, are you including the three backticks before the word Python as in

```Python

Semhar Yohannes
Semhar Yohannes
1,770 Points
function print(message) {
  document.write(message);
}


var correct = 0;
var answer;
var soluzione;

var domandeSoluzioni = [["what is my name?", "SEMHAR"],["How old am I?", 31],["Where do I live","STOCCOLMA"]];

for ( var i=0; i< domandeSoluzioni.length; i+=1)

{

answer =parseInt(prompt(domandeSoluzioni[i][0]));
soluzione=domandeSoluzioni[i][1];

if ( answer ===  soluzione)
{ correct  += 1; }

}


print("You got "+correct+" answer(s) correct");
Semhar Yohannes
Semhar Yohannes
1,770 Points

My solution to quiz challenge 1 doest work, but seems everything fine to me. I got not syntax error, but if I answer corretly to the all answer I just got 1 or 0 answer correct printed.

I tried this but it doesn't work. (I type the answer upper case). Any help appreciate! :)

Etain Software
Etain Software
5,655 Points
var x = "Hello world!";
console.log(x);

''' nav li { display: inline-block; } '''

is there a video to go along with this??

nav {
    text-align:center;
    padding: 10px 0;
    margin:  20px 0 0;
}

nav ul {
  list-style: none;
  margin: 0 auto;
  padding: 0;
}

nav ul li {
  display: inline-block;
}

Here is an example:

//here is the code
var object = {
  p: "something",
  q: "therefore this"
};
Name:GoogleSearch orJonathan Sum
Name:GoogleSearch orJonathan Sum
5,039 Points
 x = "Hello world!";

console.log(x)
for item in items:
    if item[0] =="z'
        countious
    print(item)
J H
J H
1,335 Points

How does one add the multiple tags to the bottom of a post so that it is more searchable within the forum? I've noticed other students/posters are able to tag their posts with the title of the course and the specific video. Any guidance on this would be greatly appreciated.

Chris Freeman
Chris Freeman
Treehouse Moderator 57,142 Points

The tags are added automatically based on which Help button is selected. To get the tags for a specific quiz, ask for help using the button on that page. Tag are not selected or changeable by the user.

abdulkadir yıldız
abdulkadir yıldız
2,708 Points
var x = "Hello world!";

console.log(x);
muthana mohammed
muthana mohammed
1,167 Points

just testing if I am doing this right

swift
var house = "Mansion"
muthana mohammed
muthana mohammed
1,167 Points
java
String cat = "Moew";
Austin Jones
Austin Jones
8,305 Points
var x = "Hello world!";

console.log(x);
Austin Jones
Austin Jones
8,305 Points
var x = "Hello world!";

console.log(x);

Otec Perez Glass
Otec Perez Glass
7,678 Points
var x = 'Otec perez';
console.log(x);