Last Updated: June 28, 2020
·
22.29K
· kristories

Coderwall - Markdown Cheat Sheet

Headers

# Header 1
## Header 2
### Header 3
#### Header 4
##### Header 5
###### Header 6

Header 1
======

Header 2
------

Emphasis

*italic* 
_italic_

**bold** 
__bold__

Lists

1. Lorem ipsum dolor sit amet
2. Lorem ipsum dolor sit amet
*  Lorem ipsum dolor sit amet
*  Lorem ipsum dolor sit amet
-  Lorem ipsum dolor sit amet
+  Lorem ipsum dolor sit amet

Links

[Link](http://example.com)
[Link](http://example.com "With title attribute")

# Reference-style.
# [Link][where]
# [where]: http://example.com
# [where]: http://example.com "With title attribute"

Images

![alt text](http://example.com/image.png)
![alt text](http://example.com/image.png "Optional title") 

# Reference-style.
# ![alt text][where]
# [where]: http://example.com/image.png

Code and Syntax Highlighting

  • Indent 4 spaces for code
  • Select a block of quote and press the Tab button it will automatically prepend the 4 needed spaces before every line.

Use the code.

Use the`code`.

Code fences

```ruby 
require 'sinatra'

get '/hi' do
"Hello World!"
end
```

Blockquotes

> Lorem ipsum dolor sit amet
> consectetur adipiscing elit
>
> ## Header
> 
> 1. List
> 2. List
> 
> > Nested blockquote.
> 
> # code
> <?php phpinfo(); ?>

Horizontal Line

<dl>
    <dt>Lorem ipsum dolor sit amet</dt>
    <dd>consectetur adipiscing elit</dd>
    <dt>Lorem ipsum dolor sit amet</dt>
    <dd>consectetur adipiscing elit</dd>
</dl>

Table (not work)

<table>
    <tr>
        <th>Lorem ipsum dolor sit amet</th>
        <th>Lorem ipsum dolor sit amet</th>
    </tr>
    <tr>
        <td>Lorem ipsum dolor sit amet</td>
        <td>Lorem ipsum dolor sit amet</td>
    </tr>
    <tr>
        <td>Lorem ipsum dolor sit amet</td>
        <td>Lorem ipsum dolor sit amet</td>
    </tr>
</table>

Horizontal Rules

* * *
***
*****
- - -
---------------------------------------

Symbols

©       &copy;
®       &reg;
†       &dagger;
‡       &Dagger;
±       &plusmn;
€       &euro;
™       &trade;

More symbols


Youtube videos

[![IMAGE ALT TEXT](http://img.youtube.com/vi/VIDEO_ID/0.jpg)](http://www.youtube.com/watch?v=VIDEO_ID)

Mention

@username

40 Responses
Add your response

Great reference. another trick is if you select a block of code and press the Tab button it will automatically prepend the 4 needed spaces before every line. happy coding!

over 1 year ago ·

Thank you @bashir for sharing your trick! Updated :)

over 1 year ago ·

@bashir That trick is heavily dependent on your editor.

over 1 year ago ·

Also, you can format text with the strikethrough effect using tides.

ex: ~~text~~ #=> text

over 1 year ago ·

@bashir nice trick ;)

over 1 year ago ·

This protip beautifully shows how ugly is syntax coloring and fonts for code on coderwall.. It's like random...

over 1 year ago ·

I like github's backticks more :\

over 1 year ago ·

@sheerun have you figured out how to specify highlighting scheme?

over 1 year ago ·

there is no way to do it afair

over 1 year ago ·

fantastis!

over 1 year ago ·

@coderwall - please fix that highlighting!

over 1 year ago ·

@fuadsaud, @jcrawford we do support code fences ```ruby now. If code is wrapped in a fence no indentation is required. Also if you use @xxx where xxx is a coderwall username, it will link to their profile.

over 1 year ago ·

@sheerun Agreed. Lorem is not the same as rem, and http://www.example.com is not the same as //. It makes it look a little messy.

over 1 year ago ·

Isn't @ mentions available in the pro tip body (like in the comments)?

o.O

over 1 year ago ·

Add code and sample, in order to enhance this topic.

over 1 year ago ·

Why can't I add bold inside a code sample?
It just shows as stars...

over 1 year ago ·

Thanks for the tips :)

over 1 year ago ·

Please, please, please allow editing with a fixed-width font, this is coder wall, not the bleedin' splish-splash show ;)

over 1 year ago ·

Any chance you can stop line breaking the output on single line breaks in the markdown? The markdown spec says that paragraphs in the output are denoted by double line breaks in the markdown, and that line breaks in the output are denoted by two spaces at the end of a line followed by a line break in the markdown. I should be able to write with single hard returns in markdown and not have them show up in the output.

over 1 year ago ·

Tried to use the code fence style, but it's just rendering out the block as regular text.

over 1 year ago ·

I'm new to this website and was wondering how you insert code boxes like the above. I tried [code] [/code] bu this did not work. Could someone help me out with this?

over 1 year ago ·

@jamobox see Code and Syntax Highlighting

over 1 year ago ·

As stated by many, basic code fences is broken. Even the sample in the doc (above) does not work.

over 1 year ago ·

Do lists work for anyone?

over 1 year ago ·

Hi @coderwall, this Pro Tip on GitHub Gist used.

For example this like use script embed.

<script src="https://gist.github.com/bbilginn/5258693.js"></script>

https://gist.github.com/bbilginn/5258693

Look like this example use @gist:bbilginn/5258693

over 1 year ago ·

Is there any way to write right-to-left text?

over 1 year ago ·

tables dont work

over 1 year ago ·

Seems like @mentions shouldn't work within a code block. Currently writing "@else" is wanting to link.

over 1 year ago ·

I'm having trouble with tables, they don't seem to format properly.

over 1 year ago ·

How do I markup @import in Scss? The import gets converted to an anchor tag in code blocks.

over 1 year ago ·

@dwayne you can not use the prefix @, because it will automatically convert to mention

over 1 year ago ·

@kristories Thanks, I realize that. Is there a way to escape it so that I can use it in a different context?

over 1 year ago ·

Same problem. @something is converted to a mention link inside a code snippet. Emailed support, let's see what happens.

over 1 year ago ·

Why isn't there a standard reference page for this? I clicked around CoderWall for a well. Left CoderWall completely. Searched for "CoderWall Comment Reference" and wound up back at this post. Seems silly.

over 1 year ago ·

事实上

over 1 year ago ·

Code shows really ugly compared to other state-of-the-art code visualisers. Any chance we will be able to integrate jsfiddle, jsbin like code snippets?

over 1 year ago ·

code fences is not clear to me, also, it would be nice to choose the colour of the background. We are all used to Sublime Text these days.
Thank you..

over 1 year ago ·

Great topic. I would add that you can use <br> for a new line.

over 1 year ago ·

Any way to add more languages to code highlighter used with code fences?

over 1 year ago ·

very useful!

over 1 year ago ·