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
© ©
® ®
† †
‡ ‡
± ±
€ €
™ ™
Youtube videos
[![IMAGE ALT TEXT](http://img.youtube.com/vi/VIDEO_ID/0.jpg)](http://www.youtube.com/watch?v=VIDEO_ID)
Mention
Written by Wahyu Kristianto
Related protips
40 Responses
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!
Thank you @bashir for sharing your trick! Updated :)
@bashir That trick is heavily dependent on your editor.
Also, you can format text with the strikethrough effect using tides.
ex: ~~text~~ #=> text
@bashir nice trick ;)
This protip beautifully shows how ugly is syntax coloring and fonts for code on coderwall.. It's like random...
I like github's backticks more :\
@sheerun have you figured out how to specify highlighting scheme?
there is no way to do it afair
fantastis!
@coderwall - please fix that highlighting!
@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
Add code and sample, in order to enhance this topic.
Why can't I add bold inside a code sample?
It just shows as stars...
Thanks for the tips :)
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?
@jamobox see Code and Syntax Highlighting
As stated by many, basic code fences is broken. Even the sample in the doc (above) does not work.
Do lists work for anyone?
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
Is there any way to write right-to-left text?
tables dont work
Seems like @mentions shouldn't work within a code block. Currently writing "@else" is wanting to link.
I'm having trouble with tables, they don't seem to format properly.
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..
Great topic. I would add that you can use <br>
for a new line.
Any way to add more languages to code highlighter used with code fences?
very useful!