|
|
||
|---|---|---|
| .github | ||
| build | ||
| src | ||
| tests | ||
| .gitignore | ||
| example.html | ||
| LICENSE | ||
| package.json | ||
| README.md | ||
Render Scratch blocks code to HTML.
scratchblocks is used to write Scratch scripts:
- in Scratch Forum posts
- in Scratch Wiki articles
- in the Code Club project guides
It's MIT licensed, so you can use it in your projects. (But do send me a link on Twitter!)
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.
Languages
The version of translations.js in this repo is designed for the Scratch Forums, so it supports all the languages there.
However, the plugin can be made to accept any of the languages that Scratch supports. You just need to run:
python build_translations.py all
…which will fetch language files from the Scratch translation server.
scratchblocks 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
MediaWiki
Use the MediaWiki plugin. This is what the Scratch Wiki uses.
It doesn't support other languages yet. Sorry about that. (But the German Scratch wiki people seem to be working on this.)
WordPress
I found a WordPress plugin. It might work for you; I haven't tried it.
Pandoc
Code Club use their own lesson_format tool to generate the PDF versions of their project guides. It uses the pandoc_scratchblocks plugin they wrote to make pictures of Scratch scripts.
This would probably be a good way to write a Scratch book.
Markdown
By using codeclub_lesson_builder you can include scratch code directly in markdown codeblocks like this:
```blocks when flag clicked go to x:(-50) y:(0) ```
The markdown builds to HTML and PDF.
HTML
A simple example
Have a look at the example HTML file, which includes scratchblocks from GitHub Pages and jQuery from Google's CDN.
If you want to host the files yourself, read on.
In more detail
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 scratchblocks CSS and JS:
<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.
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
Many, many thanks to the contributors!
- Authored by tjvr
- Inspired by JSO's Block Plugin
- Help with translation code from joooni
- Block translations from the Scratch translation server