x/swarnam-obsidian
1
0
Fork 0
mirror of https://github.com/runofthemillgeek/swarnam-obsidian.git synced 2024-11-16 15:30:16 +00:00
Code Issues Packages Projects Releases Wiki Activity

doc: fix example snippet md

Browse Source
This commit is contained in:
Sangeeth Sudheer 2024-04-05 05:13:02 +05:30
parent 5eb0a1b5db
commit bc2903d34a
1 changed files with 21 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

30
README.md
View File

@ -17,39 +17,39 @@ 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 To create a new Swarnam block, you need to open a block code snippet and give it the `swarnam` tag
like so: like so:
```swarnam ```swarnam
<h1>Hello, world</h1> <h1>Hello, world</h1>
``` ```
When you preview this, it'll show the source and render the HTML side-by-side. You can hover on the 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. 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: You can also add CSS and JS by separating them with `---*---` like so:
```swarnam ```swarnam
<h1 id="h1">Hello world</h1> <h1 id="h1">Hello world</h1>
---*--- ---*---
h1 { h1 {
font-family: "Manjari"; font-family: "Manjari";
color: red; color: red;
animation: rainbow 5s ease infinite forwards; animation: rainbow 5s ease infinite forwards;
} }
@keyframes rainbow { @keyframes rainbow {
0% { filter: hue-rotate(0); } 0% { filter: hue-rotate(0); }
100% { filter: hue-rotate(360deg); } 100% { filter: hue-rotate(360deg); }
} }
---*--- ---*---
let i = 0; let i = 0;
setInterval(() => { setInterval(() => {
h1.textContent = `${["Hello", "Hola", "നമസ്കാരം"][i++ % 3]} Obsidian!`; h1.textContent = `${["Hello", "Hola", "നമസ്കാരം"][i++ % 3]} Obsidian!`;
}, 1500) }, 1500)
``` ```
This'll render the three snippets on the left side and show the preview of a web page that has all 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. these 3 blocks injected.