Markdown Tutorial

Tutorials (Here's how to...)
1

Markdown Tutorial

Hello! For those who don't know how to use Markdown in the Snap! Forums, here we go:

Markdown Available Tags

Bold and Italic

For italics, put 1 asterisk or underscore before and after text:


*Hello!*

_Hello!_

Result: Hello!

For bold, put 2 asterisks or underscores before and after text:


**Hello!**

__Hello!__

Result: Hello!

For bold italic, put 3 asterisks or underscores before and after text:


***Hello!***

___Hello!___

Result: Hello!

For super bold, put 4 asterisks or underscores before and after text:


****Hello!****

____Hello!____

Result: Hello!

For super bold italic, put 5 asterisks or underscores before and after text:


*****Hello!*****

_____Hello!_____

Result: Hello!

Strikethrough

For strikethrough, put 2 tildes before and after text:


~~Hello!~~

Result: Hello!

Headings

For headings, put 1 to 6 tildes before text. 1 tilde is Heading Level 1, 2 tildes is Heading Level 2, and so on to Heading Level 6:


# Hello

## Hello

### Hello

#### Hello

##### Hello

###### Hello

Result:

Hello

Hello

Hello

Hello

Hello
Hello

Horizontal Rules

For horizontal rules, put at least 3 asterisks in a single line without any text.


***

Result:

Emoji

For emojis, you can use:


:)

:(

:o

:|

:D

:P

Or you can use codes like:


:joy:

Result:

:slight_smile:

:joy:

Code

You can surround text with backticks (`) to make code. Use 3 backticks to make block code instead of inline code. You can also specify a language like js or python after the starting 3 backticks.

Result:


Hello!

Links and images

For links, you can use this syntax:


[Snap!](https://snap.berkeley.edu)

Replace "Snap!" and "https://snap.berkeley.edu" with your own text and link.

Result:

Snap!

For images, you can use this syntax:


![alt text][https://]

Replace "alt text" with your text and "https://" to the image link.

Quotes

For quotes, you can use a greater-than sign (>) at the beginning of the line.


> This is a quote

>> This is a quote inside a quote

>>> This is a quote inside a quote inside a quote

Result:

This is a quote

This is a quote inside a quote

This is a quote inside a quote inside a quote

HTML syntax

The forums allow some HTML tags.
HTML tags look like this:
<tag>text</tag>
Where "tag" is the name of the tag.
Some supported tags:

  • sup (superscript) and sub (subscript) example
  • ul (unoredered list), ol (ordered list) and li (list item) for lists like this
  • code example
  • big and small example
  • ins (insert) and del (delete) example
  • kbd (keyboard) example

And that's all! Enjoy using Markdown.

2

Nice tutorial, I didn't know some of the things you put on this.

3

Or, you could use --- (it looks more like a line) for <hr>. HTML is also supported.

Tables can just be written as they are displayed, like this:

|Fruit | Colour    |
|------|-----------|
|Apple | Green/Red |
|Orange| Orange    |
|Peach | Tan       |

Makes:

Fruit Colour
Apple Green/Red
Orange Orange
Peach Tan
4

Agreed! And here's some more suggestions.

Italic (addition)
Successful usage of asterisks for italics requires at least one space before and after the text to be italicized. E.g. Snap*!* doesn't work. In cases like this one may utilize HTML code tags (as already noted by @bluebaritone21), like: Snap<i>!</i> = Snap! (on an iPad this can be automated, usingText Replacement)

Additions (edits)
When editing an existing post one may highlight any substantial changes with strikethrough (see post #1) and insert: <ins>text</ins> = text

Some other useful HTML code tags in forum posts (e.g. in formulas)

code for
a<sup>4</sup> a4
C<sub>12</sub> C12
<big>5</big> 5
<small>print</print> print

BTW not all HTML code tages are supported, e.g. <u>underline<u> doesn't do anything: underline.

5

Does HTML works for you guys?
For me it breaks the preview after few edits.
Also most of this is available from toolbar.

 Bullet list
 * Bullet
 * List

Numbered list
1. Numbered
2. List

Bullet list

  • Bullet
  • List

Numbered list

  1. Numbered
  2. List
6

it can be fixed by minimizing the new post field and reopening it again

7

I think this should be a Snap! forums general formatting syntax. Since there's Discourse-specific syntax, such as pinging (@mobility212), categories (Tutorials (Here's how to...)), emojis :alonzo: and spoilers; and HTML syntax, such as keys, insertion and deletion mixed with Markdown.

Well, having a place to fiddle around with Discourse formatting would be a point of enjoyment!

8

I don't know what is the syntax of categories like this as there is no menu for that.

9

Type # and you should see a few of the categories. Type the name of a category and click on a desired category type.

#show-projects #how-to #bugs

Share your Projects Tutorials (Here's how to...) Bug reports

10

Oh, OK, I understand :slight_smile:

11

You meant underline? Also there's an opposite form, deletion, <del>deleted text</del> results in deleted text

12

Oh yeah some of them work, like <input>, but they only work in the preview:

13

Buttons work too.
hello foo

14

This is a button
Yep, they work in the preview but not on the actual post. :confused:

15

No, I did mean insert, as underline doesn't work.
And yes, delete is an OK alternative for strikethrough, though a reader probably won't notice the difference, and the HTML strikethrough code tag is shorter.

16

Actually, what I meant is that you accidentally called something that underlines text "strikethrough".

17

O, I see what you mean now:

It was meant to be read like: "When editing an existing post one may highlight any substantial changes with strikethrough [...] and insert [...]" - "strikethrough" and "insert" are two different things, that together can be used to show what edits one made. :wink:

18

i added the html stuff from all the replies to the main post (the section is also formatted with html :) )

19

I think that adding a mention of typing --- to make a horizontal bar, as that looks better in the editor, and is more self-documenting.

20

You can also use three underscores ___