TW5: Applying some CSS only to my plugin's README.

[Scott Sauyet]

I can't seem to apply some CSS to the README in my new plugin's widget.

I'm creating a plugin to embed the font Fira Code into a TiddlyWiki.  (You can see it at http://scott.sauyet.com/tiddlywiki/FiraCode.html, but it's still a work in progress; I'll do an announcement later.)  I've been following the excellent instructions at https://tiddlywiki.com/dev/#How%20to%20create%20plugins%20in%20the%20browser -- they're missing only instructions for how to add "readme"/"usage"/etc, but this wasn't too hard to figure out.  I used a custom data style to apply this new font to the README.  But it's not working as expected.

On that page, both the plugin widget and the README shadow tiddler are open.  The former does not have my CSS applied.  The latter does.  The difference may be subtle, but if you look at the list near the top of transformations, the version embedded in the plugin widget doesn't show the changes this plugin is all about.  The standalone one does.

Can I apply my CSS to the tiddler as it appears in the plugin widget?

[Mat]

So, to clarify (because, in deed, it is subtle), one should look at the five bullets with headline "For instance".

OK, using the inspector tool I note that you're using the [data-tags*="fira-code-demo"] attribute. I believe this does not transfer through transclusions, i.e I tink that what you see in tabs are transclusions. IMO it should transfer (and I've had this happen also). Considering that you've only tagged that very tiddler with that tag, you can test to instead apply the styling more directly to the tiddler contents i.e the regular <div class="..."> method.

<:-)

[Scott Sauyet]

Thanks for the response.  Yes, it is subtle indeed.

I had tried that technique (and thought I mentioned it in my message; I don't know where it went.)

I've never mixed HTML with tiddlywiki text before, so I can't tell what's going wrong.  But if I wrap the contents of that tiddler in <div class="...">...</div>, the display is destroyed, starting at the first fenced code block.  You see this at http://scott.sauyet.com/tiddlywiki/FiraCode2.html.

Is this an easy fix?

  -- Scott

[Scott Sauyet]

Like I said, it's subtle.  I just noticed that although my markup is destroyed, it does actually apply the font properly, so something is going quite right.  So if I can fix the display issue, this will solve it.

Again, thanks for the help.

  -- Scott

[Mat]

Is this an easy fix?

Yes, only put the div tags around the part(s) you want affected - and include an initial blank line to retain the wikitext parsing. Example:

<div class="...">

*these bullets
*will display
*as they should
</div>

<:-)

[Scott Sauyet]

Thank you.  This fixes it.  I have a little work to do on my `usage` section and I will post an announcement.

  -- Scott