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

<code class="scratch-block">{{ scratch_block }}</code>

Using the following example tag:

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

The resulting HTML would be:

<p>Lipsum Lorem <code class="scratch-block">say [Hello] for (2) secs</code> ipsem.</p>

Overriding HTML for Scratch

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

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

Example

For example, providing the following HTML:

<code class="scratch-inline">{{ scratch_block }}</code>

with the following tag:

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

would result in:

<p>How about some scratch: <code class="scratch-inline">when flag clicked</code></p>