# Swarnam
A no-frills web playground plugin for Obsidian.
## Usage
Install the extension from Obsidian community plugins list (you need to enable this first from
Settings), enable the plugin and then restart Obsidian.
To create a new Swarnam block, you need to open a block code snippet and give it the `swarnam` tag
like so:
```swarnam
Hello, world
```
When you preview this, it'll show the source and render the HTML side-by-side. You can hover on the
top-right and click the `` icon to edit the snippet to make some changes.
You can also add CSS and JS by separating them with `---*---` like so:
```swarnam
Hello world
---*---
h1 {
font-family: "Manjari";
color: red;
animation: rainbow 5s ease infinite forwards;
}
@keyframes rainbow {
0% { filter: hue-rotate(0); }
100% { filter: hue-rotate(360deg); }
}
---*---
let i = 0;
setInterval(() => {
h1.textContent = `${["Hello", "Hola", "നമസ്കാരം"][i++ % 3]} Obsidian!`;
}, 1500)
```
This'll render the three snippets on the left side and show the preview of a web page that has all
these 3 blocks injected.
## How does it work
We split the code block snippet into 3 parts and form an HTML document string by injecting the CSS
and JS pieces into `