# Obsidian-Scratchblocks

Render `scratchblocks` code blocks in Obsidian.

````suggestion
```scratchblock
when green flag clicked
```
````

will be rendered as:

<img width="120" height="66" alt="Bildschirmfoto 2026-05-14 um 23 08 25" src="https://github.com/user-attachments/assets/3d2dd87c-7a26-4ef8-96dd-0d8d1570006d" />

Checkout the [Scratch documentation](https://en.scratch-wiki.info/wiki/Block_Plugin/Syntax) 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 

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

will be rendered as:

> OMG, I guess a <img width="54" height="30" alt="a green flag block is displayed inline" src="https://github.com/user-attachments/assets/3d2dd87c-7a26-4ef8-96dd-0d8d1570006d" /> 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](https://obsidian.md/help/snippets), but better managed via plugins such as [SnipDock](https://community.obsidian.md/plugins/snipdock)).

For example, this CSS:

```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[^1]:

<img width="auto" height="60" alt="image" src="https://github.com/user-attachments/assets/d9d6c97b-bec7-4dde-b56d-4a3103cf1b82" />

*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](https://github.com/hayribakici/obsidian-scratchblocks/wiki/Comparison-of-inline-scratchblocks-with-and-without-styling/).

[^1]: The CSS required and final results will depend on vault-specific factors such as the theme.  

## Under the hood

It exposes the `scratchblocks` [library](https://scratchblocks.github.io/) at the top level of Obsidian so you can use it inside templater or other code running plugins.

## Contributing

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

```bash
npm install
```

### Development

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

```bash
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:

```bash
npm run build
```

### Credits

This is a fork from [shabegom/obsidian-scratchblocks](https://github.com/shabegom/obsidian-scratchblocks/), which renders scratchblocks codeblocks into the [Obsidian](https://obsidian.md) editor. Since that repository hasn't been maintained, this repository tries to fill its shoes.

---

<sub>This plugin was generated by [create-obsidian-plugin](https://www.npmjs.com/package/create-obsidian-plugin)</sub>