Scratch (Inline)

Processor name: scratch-inline


The inline scratch processor works similarly to the default Scratch processor except that it matches inline codeblocks instead and requires a colon after the scratch tag.


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.


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:

Lipsum Lorem `scratch:say [Hello] for (2) secs` ipsem.

to produce the following image with the scratch: stripped:


which is inserted between the paragraph text.

You can test the output of your Scratch block text at You can also generate Scratch block text from a published Scratch project at


Verto doesn’t create the Scratch images, but saves data for another system (for example: Django) to create the images. See Accessing Scratch image data section in the scratch documentation.

The default HTML for scratch blocks is:

<object type="image/svg+xml" data="{% autoescape false -%}{{ "{% static '" }}scratch-blocks-{{ hash }}.svg{{ "' %}" }}{%- endautoescape %}"></object>

Using the following example tag:

Lipsum Lorem `scratch:say [Hello] for (2) secs` ipsem.

The resulting HTML would be:

<p>Lipsum Lorem <object data="{% static 'scratch-blocks-3dfa73663a21d295e1e5c1e5583d8d01edd68ec53ad3050597de126076c44ea5.svg' %}" type="image/svg+xml"></object> ipsem.</p>

Overriding HTML for Scratch

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

  • {{ hash }} - The hash of the Scratch code-blocks used in the expected filename.


For example, providing the following HTML:

<img class="scratch-blocks" src="scratch-blocks-{{ hash }}.svg" onerror="this.src='scratch-blocks-{{ hash }}.png'"/>

with the following tag:

How about some scratch: `scratch:when flag clicked`

would result in:

<p>How about some scratch: <img class="scratch-blocks" onerror="this.src='scratch-blocks-2f3ea223b778227287b8935bc5d209e25d3e8a25ef46ff85f6c44818159601d7.png'" src="scratch-blocks-2f3ea223b778227287b8935bc5d209e25d3e8a25ef46ff85f6c44818159601d7.svg" /></p>