scratchfoundation/scratchblocks
1
0
Fork 0
mirror of https://github.com/scratchfoundation/scratchblocks.git synced 2024-11-28 10:25:55 -05:00
Code Issues Projects Releases Packages Wiki Activity Actions

Update Readme

Browse source
This commit is contained in:
tjvr 2016-04-09 15:10:31 +01:00
parent c0440b5c2a
commit b0165e7776
1 changed files with 8 additions and 26 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

34
README.md
View file

@ -86,39 +86,21 @@ If you want to host the files yourself, read on.
### In more detail
You need to include jQuery (in the `<head>` of your page):
Include the scratchblocks JS file on your webpage:
```html
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.js"></script>
<script src="scratchblocks.js"></script>
```
Then include the scratchblocks CSS and JS:
```html
<link rel="stylesheet" href="scratchblocks2.css">
<script src="scratchblocks2.js"></script>
```
Then just call `ncratchblocks2.parse` after the page has loaded, which will
render matching page elements to shiny scratch blocks. Its sole argument is the
CSS-style selector for the elements that contain the scratchblocks code. It
uses `pre.blocks` by default.
Then just call `scratchblocks.renderMatching` after the page has loaded, which
will render matching page elements to shiny scratch blocks. Its sole argument
is the CSS-style selector for the elements that contain the scratchblocks code.
It uses `pre.blocks` by default.
```js
scratchblocks2.parse("pre.blocks");
scratchblocks.renderMatching("pre.blocks");
```
Finally, you need to put `flag.png` and `arrows.png` in the folder
`block_images`, which must be in the same folder as `scratchblocks2.css`.
In summary, your directory layout should look something like this:
block_images/
arrows.png
flag.png
scratchblocks2.css
scratchblocks2.js
### Inline blocks
To use blocks inside a paragraph...
@ -130,7 +112,7 @@ I'm rather fond of the <code class="b">stamp</code> block in Scratch.
...make a separate call to `parse` using the `inline` argument.
```js
scratchblocks2.parse("code.b", {inline: true});
scratchblocks.renderMatching("code.b", {inline: true});
```