a macro to apply a StyleSheet custom style ?

99 views
Skip to first unread message

techwriter_mjs

unread,
Feb 15, 2011, 11:35:44 PM2/15/11
to TiddlyWiki
Ah, so now I know how to apply a StyleSheet custom style to some text
in a tiddler (by using the curly-braces), but that's rather cumbersome
when I'm going to be using this a lot.

Would it be possible to create a macro that would apply the desired
custom style to a string of text?

I'm thinking that instead of having to type: "It's {{review-
question{fire}}} time.", where "review-question" is defined in the
StyleSheet;

It would be much easier to type "It's <<rq "fire">> time", where "rq
would be the macro name that would take care of the curly braces and
the longer-named style.

Even if this isn't very feasible, I'd still be interested in the
explanation of how to create a custom macro. I found Jeremy Harper's
explanation (see CustomMacros in http://www.blogjones.com/TiddlyWikiTutorial.html),
but haven't had any luck yet. Perhaps I'm muddling up a transclusion
with a systemConfig tag?

-Monique

Eric Shulman

unread,
Feb 16, 2011, 12:32:00 AM2/16/11
to TiddlyWiki
> Would it be possible to create a macro that would apply the desired
> custom style to a string of text?
>
> instead of ... "It's {{review-question{fire}}} time."
> much easier to type ... "It's <<rq "fire">> time"

You can achieve a somewhat shorter syntax using the TiddlyWiki built-
in 'transclusion with parameter substitution', like this:

First, create a tiddler named 'rq', containing:
{{review-question{$1}}}
Next, to use it, just embed the following in your tiddler content:
<<tiddler rq with: "fire">>
When the <<tiddler>> macro is processed, the contents from [[rq]] are
retrieved, and the parameter value, "fire" is inserted in place of the
$1 'substitution marker' so that
{{review-question{fire}}}
is rendered.

Unfortunately, this syntax is even longer and more cumbersome than the
original, so it's not really a viasble solution for your purposes.
Fortunately, there *is* a way to create a quick macro that will output
your desired syntax, without having to write any javascript plugin
code yourself:
http://www.TiddlyTools.com/#AliasPlugin
http://www.TiddlyTools.com/#AliasPluginInfo

This plugin lets you define "aliases", like this:
<<alias rq "{{review-question{%0}}}">>
The <<alias>> macro doesn't actually produce any output itself: it
just defines a new *macro* name (in this example, <<rq>>), that can
automatically perform parameter substitutions, similar to the
<<tiddler TiddlerName with: ...>> syntax, but MUCH shorter. You begin
by embedding your <<alias>> *definitions* into any tiddler that is
always rendered at startup (e.g, MainMenu). After the aliases are
defined, you can then use them in your tiddler content, just like you
would any other macro:
<<rq "fire">>
Just as with the longer <<tiddler>> maxcro, the parameter value in the
<<rq>> macro (i.e., "fire") is automatically inserted into the
specified output format, replacing the '%0' marker (note the different
marker syntax), resulting in:
{{review-question{fire}}}
just as before.

HOWEVER... there is another method using *built-in* TiddlyWiki syntax
that would probably achieve your goals in the quickest, simplest way
possible: just define some alternative *abbreviated* classnames in
your StyleSheet, like this:
.review-question, .rq { ... your CSS here ... }
Then, you can just write:
{{rq{fire}}}
in your tiddler content.

The advantage of this last method, is that the material within the
{{rq{...}}} block can be *any* TW formatted content you want,
including macros and even other content wrapped in {{classname{...}}
blocks.

For example, suppose you define TWO CSS classes in your StyleSheet:
.review-question, .rq { font-weight:bold; }
and
.glossary .gl { color:blue; font-family:monospaced; }

Then, you can *nest* the CSS-based formatting by writing something
like:
{{rq{This sentence includes a {{gl{technical term}}} and other
text}}}

The entire sentence will be bold (from the .rq class wrapper), and the
'technical term' will also be blue and use a monospaced font (from the
nested .gl class wrapper) as well.

enjoy,
-e
Eric Shulman
TiddlyTools / ELS Design Studios
----------
Was this answer useful? If so, please help support TiddlyTools:

TiddlyTools direct contributions: (paypal)
http://www.TiddlyTools.com/#Donate
UnaMesa tax-deductible contributions:
http://about.unamesa.org/Participate (paypal)
TiddlyWiki consulting:
http://www.TiddlyTools.com/#ELSDesignStudios
http://www.TiddlyTools.com/#Contact

Eric Shulman

unread,
Feb 16, 2011, 12:34:41 AM2/16/11
to TiddlyWiki
errata:
.glossary .gl { color:blue; font-family:monospaced; }

should be:
.glossary, .gl { color:blue; font-family:monospaced; }

(note comma between class names)

-e
Reply all
Reply to author
Forward
0 new messages