Scratch (Inline)

Processor name: scratch-inline

Note

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.

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:

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

to produce the following image with the scratch: stripped:

../_images/scratch_inline_example.png

which is inserted between the paragraph text.

You can test the output of your Scratch block text at scratchblocks.github.io. You can also generate Scratch block text from a published Scratch project at scratchblocks.github.io/generator/.

Warning

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.

Example

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>