Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
Render Scratch blocks code to HTML.
JavaScript CSS HTML Python
branch: master

Rebuild translations

latest commit b5b3613f8f
blob8108 authored

README.md

Render Scratch blocks code to HTML.

Screenshot

Try it out!


scratchblocks2 is used to write Scratch scripts:

It's MIT licensed, so you can use it in your projects. But email me afterward; I'd love to hear about it :)

Syntax

It's inspired by the block plugin by JSO that was used on the old Scratch Forums. It's a complete rewrite for Scratch 2.0, but it still uses the same syntax (with some minor additions).

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.

For the full guide to the syntax, see the wiki.

Translation

The version of translations.js in this repo is designed for the Scratch Forums, so it supports all the languages there.

However, it can be made to accept any of the languages that Scratch supports. You just need to modify and run build_translations.py yourself, which will fetch language files from the Scratch translation server.

scratchblocks2 also requires some additional words which aren't in Scratch itself (mainly the words used for the flag and arrow images). I'd be happy to accept pull requests for those!

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

Inline blocks

To use blocks inside a paragraph...

I'm rather fond of the <code class="b">stamp</code> block in Scratch.

...make a separate call to parse using the inline argument.

scratchblocks2.parse("code.b", {inline: true});

Development

See src/Dev-Readme.md.

Credits

Something went wrong with that request. Please try again.