Obsidian-Scratchblocks

Render scratchblocks code blocks in Obsidian.

```scratchblock
when green flag clicked
```

will be rendered as:

Checkout the Scratch documentation on how to write Scratch code.

Both scratchblock and scratchblocks code fences are supported.

Inline scratchblocks

Use sb <scratchcode> in order to display inline scratchblocks code with a sb prefix.

So writing

OMG, I guess a `sb when green flag clicked` snuck itself into the text.

will be rendered as:

OMG, I guess a snuck itself into the text.

Caveats and workarounds

One caveat for inline code is, that it may appear somewhat smaller than the surrounding text. This is due to the internal scale being different from the one used for multi-line codeblocks. CSS snippets can partly adjust the appearance to fit the user's font and line spacing (CSS snippets are described here, but better managed via plugins such as SnipDock).

For example, this CSS:

.scratchblocks-inline-rendered svg {
  display:inline-block;
  height:45px;            /* Adjust this to your desired overall height */
  margin-top: -15px;      /* Adjust to pull text back into the line spacing */
  margin-bottom: -15px;   /* top and bottom */
  vertical-align: middle; /* makes it even */
  width: auto;            /* necessary as well */
}

renders the above as¹:

Nested blocks will appear smaller because of necessary padding inserted by scratchblocks itself. For more details and a comparison with or without styling, see this wiki entry.

Under the hood

This plugin uses the scratchblocks-ts package for the rendering and Markdown parsing logic.

Contributing

To make changes to this plugin, first ensure you have the dependencies installed.

npm install

Development

To start building the plugin with what mode enabled run the following command:

npm run dev

Note: If you haven't already installed the hot-reload-plugin you'll be prompted to. You need to enable that plugin in your obsidian vault before hot-reloading will start. You might need to refresh your plugin list for it to show up.

Releasing

To start a release build run the following command:

npm run build

Credits

This is a fork from shabegom/obsidian-scratchblocks, which renders scratchblocks codeblocks into the Obsidian editor. Since that repository hasn't been maintained, this repository tries to fill its shoes.

---

_{This plugin was generated by create-obsidian-plugin}

Footnotes

1. The CSS required and final results will depend on vault-specific factors such as the theme. ↩