What I’m trying to do
So I’m trying to use CSS snippets I found on Archive of Our Own in Obsidian, to better style and format my own stories. I copy-pasted the CSS codes into the snippets folder (removed the #workskin to get it to work), and then the sample HTML codes into my notes. So far it works… but only in live preview mode.
Whenever I switch to reading mode or try to export it to PDF, my notes show up as a huge block of HTML code instead of the nicely styled format I see in the live preview mode.
Here’s an example:
Live Preview
Reading Mode
I’ve tried to figure out what to do but I don’t really know anything about how CSS or HTML works. So I really don’t know what I’m supposed to do to solve this issue.
As you just joined the forum you may not be able to paste in links, but could you post a link to where you found this in a code block (using three backticks above and below the link)? e.g.
```
https://forum.obsidian.md/t/need-help-in-using-an-ao3-workskin-in-obsidian/103350
```
Hopefully someone can have a look.
Here’s where I got the code:
https://github.com/wovenstarlight/workskins
And here’s the work skin preview on AO3:
https://archiveofourown.org/works/26534413/chapters/64678273
The second link leads to a login page. I was ready to have a look at this, but not so much anymore.
If you want assistance from folks, I recommend making it as easy as possible for them to setup/recreate what’s happening on their own devices.
Ahh, the author of the workskin put the AO3 work on private. I can’t really do much about that beyond asking the author to unlock it (which might be unlikely, since there was someone who scraped the public works in the archive for AI). What about the link to the github page? It should still work, right?
Ahh… it turns out that the problem is that I didn’t remove the comments from the sample HTML code. After I removed it, it works!
Btw, I realize that I didn’t directly link to the codes for the Discord work skin. Here it is if there’s anyone here who wanna use it:
https://gist.github.com/wovenstarlight/1c00c15ca299b9c70914e65206c8d096
