Learn to Code via Tutorials on Repl.it!

A Quick Guide to Repl.it Talk Markdown

Guys! In this quick tutorial, I'll be showing you how to make your posts pretty using Markdown styling!

Headers

First we'll learn about headers. A header starts with a hash symbol # followed by a space:

# A header

Output:

A header

Headers can be a variety of sizes. A smaller header starts with more hash symbols. The number of hash symbols can be 1 to 6:

#### A header with 4 hash symbols

Output:

A header with 4 hash symbols

Alternatively, you can also "underline" a text with = or - to produce headers

First header (Same as # First header)
--------------
Second header (Same as ## Second header)
===========

Text Styles

You can make italic, bold or ~~strikethrough~~ text.
Put the text between a pair of * or _ to make it italic.

*italic text*
_also italic_

Output:
italic text
also italic

Put two * or _ on both sides of text to make it bold.

**bold text**
__also bold__

Output:
bold text
also bold

You can also do a ~~strikethrough~~ by putting two tildes (~) on each side:

~~strikethrough~~

Output:
~~strikethrough~~

It's ok to mix up those stylings:

**_~~bold, italic and strikethrough~~_**

Output:
~~bold, italic and strikethrough~~

Lists

There's two kind of lists in Markdown: unordered (bulleted) and ordered (numbered). Since repl.it talk Markdown doesn't support ordered lists (sadly), we'll only deal with unordered lists.

An unordered list item starts with either a *, + or - followed by a space:

* this
+ that
- and stuff

Output:

this

that

and stuff

Use indentations of 2 spaces to make sublists

* list item
  * sublist item
  * yet another sublist item

Output:

list item
- sublist item
- yet another sublist item

Links

Just paste the URL and it'll work:

https://repl.it

Output:
https://repl.it

If you want custom link text, try this: [link text](URL):

[Repl.it](https://repl.it)

Output:
Repl.it

Images

The Markdown syntax for images is pretty simple: ![alt text](URL):

![Repl.it logo](https://repl.it/public/images/icon-square.png)

Output:

Wait... what if my image is stored in my computer? It doesn't have a URL!
Well, repl.it provided an easy way to upload images. All you need is to click the select files button below to upload it. After that, you'll see the Markdown code for your image in the text box.

Code

And finally, code!! Inline code and code blocks are widely used in repl.it talk since repl.it talk is a platform for coders to share.
Wrap a pair of backticks (`) around text to make a span of code (inline code):

`$ node index.js`

Output:
$ node index.js

To indicate a block of code, put three backticks (```) at both the start and end of your code:

```
This is a code block.
Everything here is monospaced.
```

Output:

This is a code block.
Everything here is monospaced.

Additionally, repl.it supports code block syntax highlighting, which is pretty useful for emphasizing readability.
Just put the language name (or its short form) after the three backticks:

```js
while (true) 
  console.log("MARKDOWN IS AWESOME!!!");
```

Output:

while (true) 
  console.log("MARKDOWN IS AWESOME!!!");

Blockquotes

To do blockquotes put a > before each line of the block:

> Timchen is the greatest and
> we should praise him

Output:

Timchen is the greatest and
we should praise him

Don't forgot to leave a blank line after each blockquote!

Horzontal rules

A horzontal rule (a line that separates content) can be made of either three asterisks (*) or underscores (_):

There's a horizontal rule below
***
There's a horizontal rule above

Output:
There's a horizontal rule below

There's a horizontal rule above

That's all what I can teach in this very tutorial. Start using Markdown to style your posts, and find more about it!

Voters

191 more...

Commentshot new top

I think I speak for many people when I say "Thank you"

true
@static2020

So true @almostStatic

@almostStatic yes

@almostStatic ~~False~~ True!

lol ~~I spent~~

like an hour

googling

how
to
use
~~MARKDOWN!~~
I should have searched it on repl first.

@King597 haha

@King597 Haha!!

lol @King597

@King597 l

o

@King597 ~looooooooooooooooool

@King597 lol

Great start but I would like to point out that much of what you have documented is in varying degrees of adoption every place that Markdown is used.

Strikethrough specifically is not Markdown (and never was) but has been picked up by CommonMark.

Links using just https://some will not be detected inline unless surrounded with < and > in 90% of Markdown processors.

Sublist indentation varies wildly across engines and should just be avoided all together (as Medium does). The two space indicated in this tutorial is not supported by GitHub, markdown-it, and many others that require 4 spaces (but that seems to change regularly). Best to avoid indented lists.

Use of headers beyond third level has no style difference and are not picked up by VuePress and others. Stick with three.

"Code" is actually a "Code Fence" more commonly referred to as a "Fence" because more than just code is written in them.

I suggest sticking with BaseML to be sure the Markdown you use can be used anywhere including REPL.it, GitHub, Discord, Reddit, and elsewhere. It is also a lot less stuff to remember.

@robmuh I agree with you although if you look closely at the title, it's clearly specified that this is a guide to "Repl.it Talk Markdown" meaning the practices shown here can be used and will work properly in repl.it, the post never says anything about other markdowns making your comment's 2nd to 5th paragraphs along with the 7th one meaningless. ( I was short of words here don't mean to offend or anything.)

@TheDrone7 I get that a lot of people don't care about cross-system compatibility. Just pointing it out for those who do.

@robmuh I did say I agree with you for the most part.

@robmuh ~~That hurts my brain~~ No... I feel dumb now realizing that this is 100% discord markdown

I'm going to link this underneath he authoring textbox so that people can read it before the post.

Good job!!

Great guide. Thank you for posting.

I would ask that you fix one thing, though: # is not a hashtag. The important part of a hashtag is actually the tag, not the hash. As you already know, the tag is a word or phrase (e.g. "life goals") that can be searched for in a database and that is associated with an object (e.g. a blog post, tweet, or photo); the hash symbol in front of the tag is merely a decoration that distinguishes it from the surrounding text.

The # symbol has been around for a very long time and goes by many names: pound sign, number sign, hash symbol, hash mark, octothorp(e), octothorn(e), or even tic-tac-toe board. But the # symbol on its own, without a word that acts as a tag, is not a hashtag.

Please fix this in your tutorial. My fellow faculty members and I would appreciate it.

(This may seem pedantic, but an important part of education [and life] is understanding context. As educators, we should reinforce critical thinking skills and analysis of context. Thank you.)

@ErezMoragCCSF FOREVER AND ALWAYS NUMBER SIGN

@ErezMoragCCSF At this point in time, the symbol itself has been evolved to be named 'hashtag'. Humanity named the character once, and it has been renamed again, so shouldn't it be allowed?. Not to offend, and sorry for necroposting.

-~~i am excited to start learning with some of the best 🎥😎🎥

_~~

You only told a fact while explaining block quotes.

@TheDrone7 that's true

Markdown is
pretty cool.

[deleted]

This is quite helpful thanks!

@IEATPYTHON You're welcome!

@JSer Greatly appreciated as I'm new to repl talk. Extremely helpful!

#test

Lol @floob

WOW Thanks for sharing

setInterval(function(){
  console.log("AWESOME!!!!!");
  console.log("I LOVE Markdown!!!!");
}, 1);

Timchen is the greatest and
we should praise him
or should we...

https://www.example.com/

~~NICE~~

~~discord bots suck~~ i love repl.it!!!!!!!

3/10

Does this work with .md files?

@TheImagin33r Yup, but you ought to've just tested it in a .md file.

[deleted]

~~instagram bad reddit good~~

(data:text/html,<p style='font-family:-apple-system,sans;color:#ffff00;'>Hi There! This Is a Pretty Good Project That You Worked On. I Think You Would Like Mine! Click <a href="data:text/html,<p>edit code here and click the link to submit the code to the previewing website. Also this Page is not finished!</p><textarea></textarea><style>textarea{height:240px;width:195px;}</style>
<a href='data:text/html,<script>preview.code;</script>'>preview code</a>)

nice description! random question, but do you like harry potter?

yes

sei nem oq to fazendo aqui

Markdown

There is a horizontal rule below

Everybody should learn
to code

system.out.println("hello world!");

system.out.println("hello world!");

system.out.println("hello world!");
system.out.println("for a third time:)");

while (true) 
  console.log("MARKDOWN IS AWESOME!!!");

Repl.it

This was a test

hopefully this works well

[deleted]

$ node index.js

lol @TRACK3Rofficial

Thank you for posting this!

Should have read this earlier

Very nice! Now I'm going to start using it!

You are awesome
HAHA
print('YOU ARE DA BEST')
Hopefully everything worked! Thank you again!

while True:
       print("Yo")

@SJC_Muhammad oh hi