> I've been able to successfully modify my StyleSheet with:
> div[tags~="welcome"].tiddler .viewer {font-style:italic;}
> Is there a way to modify this so that a specific word or list of words
> in the tiddler content is matched and then only that word or list of
> words is modified?
> With the result being that anywhere that "welcome" shows up in my
> TiddlyWiki, it will be in italics.
div[tags~="..."]... is a native CSS-selector syntax and is not a TW
extension. As such, it only works for TW tags because when a tiddler
DIV is rendered, the TWCore also assigns it an attribute named "tags"
with the value equal to the space-separated string list of all tags
for that tiddler. However, unlike the tags, the content of the
tiddler is not stored as an *attribute* of the DIV, so there is no CSS-
selector syntax that can be used to match it.
Fortunately, there is a "secret hack" that is used by the TWCore to
highlight search terms when displaying tiddlers as a result of a
search action. All you need to do is to set
window.highlightHack=new RegExp("welcome");
Any tiddlers rendered after that will automatically highlight the
indicated text pattern. Note that the default style for highlighted
text is a yellow-ish background. If you want to adjust or redefine
the highlighting appearance, you can add a CSS rule to your
[[StyleSheet]]
.highlight { background-color:..., etc. }
Note also that, if you use the search function within the document,
the 'highlightHack' value is automatically reset after the search, so
the highlighting will no longer appear after searching.
Here's a little HTML form that you can use to set the highlightHack
value and re-render all currently displayed tiddlers:
<html><nowiki><form>
<input type="text" name="match">
<input type="button" value="highlight" onclick="
window.highlightHack=new
RegExp(this.form.match.value.escapeRegExp());
story.refreshAllTiddlers(true);
"></form></html>
Simply enter the desired text into the input field and press the
"highlight" button. The matching text in each rendered tiddler will
be show using the .highlight CSS class rule.
enjoy,
-e
Eric Shulman
TiddlyTools / ELS Design Studios
----
WAS THIS ANSWER HELPFUL? IF SO, PLEASE MAKE A DONATION
http://www.TiddlyTools.com/#Donations
note: donations are directly used to pay for food, rent,
gas, net connection, etc., so please give generously and often!
Professional TiddlyWiki Consulting Services...
Analysis, Design, and Custom Solutions:
http://www.TiddlyTools.com/#Contact
--
You received this message because you are subscribed to the Google Groups
"TiddlyWiki" group.
To post to this group, send email to [email protected].
To unsubscribe from this group, send email to
[email protected].
For more options, visit this group at
http://groups.google.com/group/tiddlywiki?hl=en.
