| build | ||
| src | ||
| .gitignore | ||
| example.html | ||
| LICENSE | ||
| README.md | ||
Render Scratch blocks code to HTML.
Test it out here!
scratchblocks2 is used on the Scratch Wiki to write Scratch scripts in wiki articles.
It's inspired by and compatible with the block plugin by JSO that was used on the old Scratch Forums. This is a complete rewrite for Scratch 2.0.
It's designed with an emphasis on flexibility: adding new blocks is as easy as writing the scratchblocks code itself.
It follows the philosophy of the original Block Plugin in that it tries to match the code you write as closely as possible, and doesn't check you've used the correct syntax. The block text is only used to find the correct colour.
It also includes a few hacks, such as recognising list reporters -- just make sure you refer to the list explicitly somewhere:
add [something] to [list v]
say (list)
Scratch is created by the Lifelong Kindergarten Group at the MIT Media Lab.
Usage
If you just want the code, have a look at the example HTML file, which uses the scripts hosted on GitHub Pages, and jQuery hosted off Google.
For a more detailed explanation, or if you want to host the files yourself, read on.
You need to include jQuery (in the <head> of your page):
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.js"></script>
Then include the scratchblocks2 CSS and JS:
<link rel="stylesheet" href="scratchblocks2.css">
<script src="scratchblocks2.js"></script>
Then just call scratchblocks2.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.
scratchblocks2.parse("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
Credits
- Plugin by blob8108
- Inspired by JSO's Block Plugin
- German block translation by joooni
- Brazilian Portugese block translation by ehermann