Scratch Style Guide
Welcome to Scratch! This is your guide to writing beautiful blog posts. All of Scratch's default formatting options are summed up right here.
Table of contents
Headings
In Scratch, <h1> tags are reserved for site and post titles. They do not have any special formatting.
## Heading Text
Sustainable Helvetica food truck, 3 wolf moon beard Truffaut art party McSweeney's raw denim banjo Kickstarter disrupt freegan four loko.
### Heading Text
Master cleanse cray next level, art party Bushwick skateboard High Life meh drinking vinegar squid kogi letterpress quinoa.
#### Heading Text
Butcher asymmetrical sriracha, meh kale chips Bushwick narwhal food truck.
##### Heading Text
Blue Bottle banjo drinking vinegar, mustache next level organic American Apparel photo booth cardigan.
###### Heading Text
Freegan master cleanse farm-to-table, street art pug Odd Future disrupt typewriter Cosby sweater wolf Banksy actually Thundercats.
Text
This is a paragraph. Some sentences are bolded. Some are italicized. You can even add inline code blocks by using backticks `<p>code block</p>` in the markdown editor. Inline links like this one can be added using [text](http://the-url.com). Scratch supports more HTML tags than you'll ever need.
Markdown
This is a paragraph. **Some sentences are bolded**. _Some are italicized_. You can even add inline code blocks by using backticks `` `<p>code block</p>` `` in the markdown editor. Inline links [like this one](#) can be added using `[text](http://the-url.com)`. Scratch has support for more html tags than you'll ever think to use.Blockquotes
Normal Blockquote
Banksy Schlitz deep v, cred selfies artisan semiotics Austin PBR biodiesel mlkshk retro kitsch. Tofu readymade Cosby sweater paleo Wes Anderson Williamsburg, cliche deep v viral four loko next level meggings tousled. You probably haven't heard of them hella flexitarian, Marfa meh kitsch iPhone jean shorts.
Markdown
> Banksy Schlitz deep v, cred selfies artisan semiotics Austin PBR biodiesel mlkshk retro kitsch. Tofu readymade Cosby sweater paleo Wes Anderson Williamsburg, cliche deep v viral four loko next level meggings tousled. You probably haven't heard of them hella flexitarian, Marfa meh kitsch iPhone jean shorts.
Pullquote
Austin 8-bit Schlitz, occupy bespoke leggings fashion axe cliche literally American Apparel trust fund craft beer fap shabby chic. Wayfarers synth typewriter, shabby chic before they sold out squid put a bird on it gentrify ethical.
Dreamcatcher pug deep v blog seitan. Quinoa locavore skateboard bitters photo booth.
Slow-carb cray polaroid, hashtag selvage trust fund Vice salvia crucifix fixie mustache Schlitz pop-up American Apparel. Pork belly food truck hella messenger bag. Scenester ennui asymmetrical bitters disrupt.
Markdown
<blockquote class="pullquote">Dreamcatcher pug deep v blog seitan. Quinoa locavore skateboard bitters photo booth.</blockquote>
Lists
Numbered List
- Put on silly hat
- Run around screaming wildly
- ????
- Profit
Markdown
1. Put on silly hat
2. Run around screaming wildly
3. ????
4. Profit
Un-ordered list
- Milk
- Apples
- Tortilla Chips
Markdown
* Milk
* Apples
* Tortilla Chips
Nested Lists
- Fruit
- Apple
- Banana
- Bread
- Vegetables
- Potato
- Idaho
- Red
- Yukon Gold
- Cheddar
- Ketchup
- Potato
- Protein
- Lengthy list items wrap nicely, so no matter what—even if they're super-rambling, talking about this or that, or that or this—even then, they still look clean.
- Beans
Markdown
1. Fruit
* Apple
* Banana
* Bread
2. Vegetables
* Potato
* Idaho
* Red
* Yukon Gold
* Cheddar
* Ketchup
3. Protein
* Lengthy list items wrap nicely, so no matter what—even if they're super-rambling, talking about this or that, or that or this—even then, they still look clean.
* Beans
Media
Image with Caption
Image by <div class="caption">
Image by <a href="http://www.morguefile.com/creative/AcrylicArtist">AcrylicArtist</a>, via <a href="http://www.morguefile.com/">morguefile</a>.
</div>
Linked Image
[](http://example.com)
Video
All you need to do is copy in the embed code from YouTube and Scratch does the rest!
<iframe width="420" height="315" src="//www.youtube.com/embed/_OBlgSz8sSM" frameborder="0" allowfullscreen></iframe>
Syntax Highlighting
For the programmers/bloggers out there, Scratch comes installed with the lightweight and wonderful Prism.js, which provides syntax highlighting on code blocks.
The markdown for a highlighted code block is:
```language-markup
<div class="your-code">
<p>This is a great paragraph</p>
</div>
```
Some examples:
var coins = [200,100,50,20,10,5,2,1],
target = 200,
combos = 0;
function add_coin(coin,subtotal) {
var sub_combos = 0;
subtotal += coins[coin];
if (subtotal > target) return 0;
if (subtotal === target) return 1;
for (var c = coin; c < coins.length; c++) {
sub_combos += add_coin(c,subtotal);
}
return sub_combos;
}
for (var c = 0; c < coins.length; c++) {
combos += add_coin(c,0);
}
console.log(combos);
<div class="content">
<p><em>HTML</em> syntax highlighting</p>
</div>
a {
text-decoration: none;
color: #f00;
&:hover {
text-decoration: underline;
}
}
function update_title(new_title) {
var $title = $('title');
$title.html(new_title);
}
If no <em>language</em> is specified, then no syntax <strong>highlighting</strong>.
Tables
| Numbers | Letters | HTML |
|---|---|---|
| 1 | A | Looks |
| 2 | B | Pretty |
| 3 | C |
<table>
<thead>
<tr>
<th>Numbers</th>
<th>Letters</th>
<th>HTML</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>A</td>
<td><strong>Looks</strong></td>
</tr>
<tr>
<td>2</td>
<td>B</td>
<td><em>Pretty</em></td>
</tr>
<tr>
<td>3</td>
<td>C</td>
<td><del>Nice</del> AWESOME</td>
</tr>
</tbody>
</table>
Helper classes
.align-left {
float: left;
}
.align-right {
float: right;
}
.hidden {
display: none !important;
visibility: hidden !important;
}