# Swarnam A no-frills web playground plugin for Obsidian. Inspired by [MDN playgrounds](https://developer.mozilla.org/en-US/docs/Web/CSS/grid). ^{Swarnam (സ്വർണം) means gold in Malayalam.} ^{(icon credit: [3dicons](https://3dicons.co))}

## Demo https://github.com/runofthemillgeek/swarnam-obsidian/assets/2759499/333424b3-2f82-4c1e-9e50-68c837227433 ## 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 `