Scratchblocks

Render fenced scratchblock or scratchblocks code blocks in Obsidian. See the Scratch code documentation for the syntax.

Also supports inline blocks and local configuration.

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.

Local configuration

Add yaml frontmatter to override the global settings for the current note:

sb-lang: "it" # render Scratchblocks as Italian
sb-scale: 1.2 # render larger blocks

Note, that the scaling only affects the ``` fenced blocks. The inline blocks stay the same size.

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

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.

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

Under the hood

This plugin uses the scratchblocks-ts package for rendering Scratchblocks.

Roadmap

See the roadmap for planned releases.

Contributing

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

npm install

Translation

Check out the wiki entry on how to add translations.

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 plugin started as a fork of shabegom's Scratchblocks plugin for Obsidian. Since that project hasn't been maintained, this repository tries to fill its shoes.

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