Make pictures of Scratch blocks from text.
npm install scratchblocks-plusMake pictures of Scratch blocks from text.

---
scratchblocks-plus is a fork of scratchblocks, and adds the following features:
- basic TypeScript support
- Matrix support (issue: scratchblocks#509, PR: scratchblocks#573)
- block highlight
scratchblocks-plus is compatible with scratchblocks, so you can use it as a drop-in replacement.
---
scratchblocks-plus is used to write Scratch scripts:
It's MIT licensed, so you can use it in your projects.
For the full guide to the syntax, see the wiki.
Use the scratchblocks-plus-react package to render scratchblocks in React.
You'll need to include a copy of the scratchblocks-plus JS file on your webpage.
There are a few ways of getting one:
- Download it from the
- You could clone this repository and build it yourself using Node 16.14.0+ (npm run build).
``html`
The convention is to write scratchblocks inside pre tags with the class blocks:
`html`
when flag clicked
move (10) steps
You then need to call scratchblocks.renderMatching after the page has loaded.
Make sure this appears at the end of the page (just before the closing
tag):`js`
The renderMatching() function takes a CSS-style selector for the elements that contain scratchblocks code: we use pre.blocks to target pre tags with the class blocks.
The style option controls how the blocks appear, either the Scratch 2 or Scratch 3 style is supported.
You might also want to use blocks "inline", inside a paragraph:
`html`
I'm rather fond of the stamp block in Scratch.
To allow this, make a second call to renderMatching using the inline argument.
`js`
This time we use code.b to target code blocks with the class b.
If you want to use languages other than English, you'll need to include a second JS file that contains translations.
The releases page includes two options; you can pick one:
- translations.js includes a limited set of languages, as seen on the Scratch Forumstranslations-all.js
- includes every language that Scratch supports.
The translations files are hundreds of kilobytes in size, so to keep your page bundle size down you might like to build your own file with just the languages you need.
For example, a translations file that just loads the German language (ISO code de) would look something like this:
`js`
window.scratchblocks.loadLanguages({
de:
})
If you're using a JavaScript bundler you should be able to build your own translations file by calling require() with the path to the locale JSON file.
This requires your bundler to allow importing JSON files as JavaScript.
`js`
window.scratchblocks.loadLanguages({
de: require('scratchblocks/locales/de.json'),
})
The scratchblocks-plus package is published on NPM, and you can use it with browserify and other bundlers, if you're into that sort of thing.
Once you've got browserify set up to build a client-side bundle from your app
code, you can just add scratchblocks-plus to your dependencies, and everything
should Just Work™.
`js`
var scratchblocks = require('scratchblocks-plus');
scratchblocks.renderMatching('pre.blocks');
Since version 3.6.0, scratchblocks-plus can be properly loaded as an ESM module. The ESM version, instead of defining window.scratchblocks, default-exports the scratchblocks object. Similarly, the JavaScript translation files default-exports a function to load the translations.
`js
import scratchblocks from "./scratchblocks-plus-es-min.js";
import loadTranslations from "./translations-all-es.js";
loadTranslations(scratchblocks);
// window.scratchblocks is NOT available!
`
To update the translations:
`sh`
npm upgrade scratch-l10n
npm run locales
Each language 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! You'll need to rebuild the translations with npm run locales after editing the aliases.
This should set you up and start a http-server for development:
`sh`
npm install
npm start
Then open
For more details, see CONTRIBUTING.md`.
Many, many thanks to the contributors!
- Authored by LuYifei2011
- This is a fork of scratchblocks, so all the credit there still applies here.
- Original scratchblocks library by tjvr
- Original scratchblocks library maintained by tjvr and apple502j
- Icons derived from Scratch Blocks (Apache License 2.0)
- Scratch 2 SVG proof-of-concept, shapes & filters by as-com
- Anna helped with a formula, and pointed out that I can't read graphs
- JSO designed the syntax and wrote the original Block Plugin)
- Help with translation code from joooni
- Block translations from the scratch-l10n repository
- Ported to node by arve0