Render Scratch blocks code to HTML.
Inspired by and mostly compatible with JSO's excellent Block Plugin (which is used on the Scratch Forums and Scratch Wiki). This is a complete rewrite, and includes some bugfixes and updates for Scratch 2.0.
scratchblocks2 is 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.
Test it out here!
It's designed for Scratch 2.0 and includes all the new blocks, as well as custom blocks and old blocks that were in Scratch 1.4.
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.
The quickest way is to include the following HTML code in your page before the closing
</head>
tag:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="//blob8108.github.io/scratchblocks2/scratchblocks2.css">
<script src="//blob8108.github.io/scratchblocks2/scratchblocks2.js"></script>
<script>
$(document).ready(function() {
scratchblocks2.parse();
});
</script>
Then just include your (HTML-escaped!) scratchblocks code inside <pre class="blocks">…</pre>
tags.
This 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.9.1/jquery.min.js"></script>
Then include the scratchblocks2 CSS and JS:
<link rel="stylesheet" type="text/css" href="scratchblocks2.css">
<script type="text/javascript" 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.
scratchblocks2.parse("pre.blocks");
Finally, you need to put flag.png
and arrows.png
in the folder
block_images
, which is 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
scratchblocks2 uses jQuery and the
LESS CSS preprocessor. Use the client-side version of
LESS for development, and compile it using lessc
when committing (the file
tester-dev.html
is set up to automatically watch the LESS file for changes).
Pull requests welcome.
How the parser works:
- splits the code into lines
- splits each line into pieces, where a piece is either text
"point in direction"
or an insert[mouse-pointer v]
- builds DOM elements using jQuery's
$("<div>")
syntax - calls the render function recursively to render the inserts
- looks up the block's text in a database to get its color (category), using the type of the inserts to resolve multiple matches
The block database used for the categories is parsed from
scratchblocks2.blocks
, which is a simple list of blocks in the scratchblocks
format itself. Modifying the value at runtime should cause the blocks database
to automatically update.