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:
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 <<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</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>