Posting Code to the Forum

Question

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:

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.)
Type three back tick characters: ```
Hit return to create another new line and paste or type your HTML, CSS or other code.
Hit return and add three more back tick characters: ```
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

Answer 1 · 2014-04-23T18:51:45Z

April 23, 2014 6:51pm

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.

Answer 2 · 2014-05-15T19:26:52Z

May 15, 2014 7:26pm

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.

Answer 3 · 2014-06-10T23:00:15Z

June 10, 2014 11:00pm

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.

Answer 4 · 2014-06-18T15:44:25Z

June 18, 2014 3:44pm

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.

Answer 5 · 2014-06-24T00:51:51Z

June 24, 2014 12:51am

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.

Answer 6 · 2014-09-12T17:31:01Z

September 12, 2014 5:31pm

Great tip!

Answer 7 · 2014-12-19T18:14:54Z

December 19, 2014 6:14pm

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

Answer 8 · 2015-02-13T02:24:07Z

February 13, 2015 2:24am

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.

Answer 9 · 2015-05-01T17:15:31Z

May 1, 2015 5:15pm

Yeah (H1)

Yeah (H2)

Yeah (H3)

Yeah (H4)

Yeah (H5)

Yeah (H6)

 Thanks so much for this info really helps

Answer 10 · 2015-09-21T22:38:01Z

September 21, 2015 10:38pm

Testing:

testing.html

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

Answer 11 · 2015-09-25T12:42:19Z

September 25, 2015 12:42pm

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

Answer 12 · 2015-10-03T22:10:21Z

October 3, 2015 10:10pm

hiphp like this?

Answer 13 · 2015-10-03T22:10:22Z

October 3, 2015 10:10pm

hiphp like this?

Answer 14 · 2015-10-03T22:11:02Z

October 3, 2015 10:11pm

var x = "Hello world!";

console.log(x);

Answer 15 · 2015-11-05T08:10:47Z

November 5, 2015 8:10am

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 "<", 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 ">", :

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

I welcome counter examples. Please!

Answer 16 · 2015-11-10T20:07:12Z

November 10, 2015 8:07pm

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");

Answer 17 · 2015-11-12T16:02:10Z

November 12, 2015 4:02pm

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

Answer 18 · 2016-05-23T18:38:26Z

May 23, 2016 6:38pm

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

Answer 19 · 2016-05-23T18:42:59Z

May 23, 2016 6:42pm

is there a video to go along with this??

Answer 20 · 2016-05-24T04:35:10Z

May 24, 2016 4:35am

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;
}

Answer 21 · 2016-06-02T13:38:24Z

June 2, 2016 1:38pm

Here is an example:

//here is the code
var object = {
  p: "something",
  q: "therefore this"
};

Answer 22 · 2016-08-28T12:37:46Z

August 28, 2016 12:37pm

 x = "Hello world!";

console.log(x)

for item in items:
    if item[0] =="z'
        countious
    print(item)

Answer 23 · 2016-12-04T12:13:47Z

December 4, 2016 12:13pm

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.

Answer 24 · 2016-12-19T11:29:43Z

December 19, 2016 11:29am

hello

Answer 25 · 2017-07-01T14:18:27Z

July 1, 2017 2:18pm

var x = "Hello world!";

console.log(x);

Answer 26 · 2017-09-22T04:18:55Z

September 22, 2017 4:18am

just testing if I am doing this right

swift
var house = "Mansion"

Answer 27 · 2017-09-22T04:20:14Z

September 22, 2017 4:20am

java
String cat = "Moew";

Answer 28 · 2017-09-22T04:21:18Z

September 22, 2017 4:21am

var hi = "Hello World"

Answer 29 · 2018-01-11T21:12:28Z

January 11, 2018 9:12pm

var x = "Hello world!";

console.log(x);

Answer 30 · 2018-01-11T21:14:12Z

January 11, 2018 9:14pm

var x = "Hello world!";

console.log(x);

Answer 31 · 2018-04-26T19:58:10Z

April 26, 2018 7:58pm

test

$start = 'start';

Answer 32 · 2018-05-06T03:17:55Z

May 6, 2018 3:17am

Answer 33 · 2018-09-23T04:39:41Z

September 23, 2018 4:39am

var x = 'Otec perez';
console.log(x);

Answer 34 · 2020-02-03T21:12:12Z

February 3, 2020 9:12pm

<?php

$studentOneName = 'Dave';
$studentOneGPA = 3.8;

$studentTwoName = 'Treasure';
$studentTwoGPA = 4.0;

//Place your code below this comment

if($studentOneGPA === 4.0){
  echo "$studentOneName made the Honor Roll";
}else{
  echo "$studentOneName has a GPA of $studentOneGPA";
}

echo '<br />';

if($studentTwoGPA === 4.0){
    echo "$studentTwoName made the Honor Roll.";
  }else{
    echo "$$studentTwoName has a GPA of $studentTwoGPA.";
}

Answer 35 · 2020-04-18T05:49:02Z

April 18, 2020 5:49am

onvert the string stored in role to uppercase letters. The final msg string should look similar to this: "Carlos Salgado: DEVELOPER".

Bummer: Cannot read property '1' of null

RestartGet HintsRecheck work

· app.js

1

let firstName ="nzayikorera"

2

let lastName ="gedeon"

3

let role = 'developer';

4

let msg = firstName + " " + lastName + ": " + role;

5

let msg = firstName + " " + lastName + ": " + role.toUpperCase();

Student Perks please help for this Question

Welcome to the Treehouse Community

Looking to learn something new?

Dave McFarland

Dave McFarland

Posting Code to the Forum

Inline Code

Code Blocks

Syntax Highlighting

Dustin Matlock

Dustin Matlock

Dave McFarland

Dave McFarland

Dustin Matlock

Dustin Matlock

This is a Heading Level 2

Dave McFarland

Dave McFarland

Here's a headline

Dustin Matlock

Dustin Matlock

hum4n01d

hum4n01d

hum4n01d

hum4n01d

Chris Shaw

Chris Shaw

hum4n01d

hum4n01d

Hi

Hi!

Ryan Schurton

Ryan Schurton

True Bey

True Bey

Chris Shaw

Chris Shaw

Chris Freeman

Chris Freeman

villa

villa

Diego Murray

Diego Murray

35 Answers

Andrew McCormick

Andrew McCormick

Dave McFarland

Dave McFarland

Rik Johnson

Rik Johnson

Dave McFarland

Dave McFarland

Dustin Matlock

Dustin Matlock

Dustin Matlock

Dustin Matlock

Dave McFarland

Dave McFarland

Dustin Matlock

Dustin Matlock

Chris Freeman

Chris Freeman

Dave McFarland

Dave McFarland

Omer Asadullah

Omer Asadullah

Tommy Gebru

Tommy Gebru

Marcus Parsons

Marcus Parsons

Dave McFarland

Dave McFarland

Marcus Parsons

Marcus Parsons

ISAIAH S

ISAIAH S

Samvel Tadevosyan

Samvel Tadevosyan

Dustin Matlock

Dustin Matlock

Samvel Tadevosyan