Scratch

Processor name: scratch

Danger

Scratch blocks require an understanding of the Scratch programming language and how Verto is integrated with other systems. The use of this processor requires co-ordination between authors and developers to achieve the desired functionality.

Note

The following examples assume usage of the fenced code extension, by having markdown.extensions.fenced_code in the list of extensions given to Verto.

You can include an image of Scratch blocks using Scratch Block Plugin notation using the following notation:

```scratch
when flag clicked
clear
forever
pen down
if <<mouse down?> and <touching [mouse-pointer v]?>> then
switch costume to [button v]
else
add (x position) to [list v]
end
move (foo) steps
turn ccw (9) degrees
```

to produce the following image:

../_images/scratch_blocks_example.png

The syntax is the same for default Markdown code blocks. The only difference is that Verto handles the content differently due to the scratch language set at the start.

Note

This processor also works with syntax introduced by the fenced_blocks and/or codehilite extensions.

You can test the output of your Scratch block text (and create PNG or SVG images) at scratchblocks.github.io.

Warning

Verto doesn’t create the Scratch images itself, but prepares it for a JavaScript library to render these in the user’s browser. See Rendering Scratch blocks as images section below.

The default HTML for scratch blocks is:

<pre class="scratch-blocks"><code>{{ scratch_blocks }}</code></pre>

Using the following example tag:

```scratch
when flag clicked
clear
forever
pen down
if <<mouse down?> and <touching [mouse-pointer v]?>> then
switch costume to [button v]
else
add (x position) to [list v]
end
move (foo) steps
turn ccw (9) degrees
```

The resulting HTML would be:

<pre class="scratch-blocks"><code>when flag clicked
clear
forever
pen down
if &lt;&lt;mouse down?&gt; and &lt;touching [mouse-pointer v]?&gt;&gt; then
switch costume to [button v]
else
add (x position) to [list v]
end
move (foo) steps
turn ccw (9) degrees</code></pre>

Rendering Scratch blocks as images

When Verto encounters a code block with the Scratch language (see example above), it doesn’t not generate the image but renders the block code inside an element for the scratchblocks package to render in the user’s browser. View the package website for more information on how to use it.

Overriding HTML for Scratch

When overriding the HTML for Scratch code, the following Jinja2 placeholders are available:

  • {{ scratch_blocks }} - The text of the Scratch blocks notation.

Example

For example, providing the following HTML:

<pre><code class="scratch-example">
{{ scratch_blocks }}
</code></pre>

with the following tag:

```scratch
when flag clicked
say [Hi]
```

would result in:

<pre><code class="scratch-example">
when flag clicked
say [Hi]
</code></pre>