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


# 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
© ©
® ®
† †
‡ ‡
± ±
€ €
TM ™
Youtube videos
[](http://www.youtube.com/watch?v=VIDEO_ID)
Mention
Written by Wahyu Kristianto
Related protips
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!
Also, you can format text with the strikethrough effect using tides.
ex: ~~text~~ #=> (削除) text (削除ここまで)
This protip beautifully shows how ugly is syntax coloring and fonts for code on coderwall.. It's like random...
@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.
@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.
Isn't @ mentions available in the pro tip body (like in the comments)?
o.O
Please, please, please allow editing with a fixed-width font, this is coder wall, not the bleedin' splish-splash show ;)
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.
Tried to use the code fence style, but it's just rendering out the block as regular text.
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?
As stated by many, basic code fences is broken. Even the sample in the doc (above) does not work.
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
How do I markup @import in Scss? The import gets converted to an anchor tag in code blocks.
@dwayne you can not use the prefix @
, because it will automatically convert to mention
@kristories Thanks, I realize that. Is there a way to escape it so that I can use it in a different context?
Same problem. @something is converted to a mention link inside a code snippet. Emailed support, let's see what happens.
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.
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?
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..
Any way to add more languages to code highlighter used with code fences?