[tw5] Method of using "nth-child(even)" with "<pre>"?

Google Group (Read Only)
#1

Hello all, title says it all.

When trying to apply nth-child(even) to use a background color for each line when using 

 in my tiddlers, it doesn’t seem to work, and I’m not entirely sure whats causing this.


Any suggestions?
#2

Although HTML <pre> elements can display multiple lines of text, each line is not a separate child element.
Thus, a CSS rule such as nth-child(even) doesn’t have any effect within the <pre> element.

-e

#3

Ah, well- that’s a bummer haha

Thank you!

#4

If the content of your <pre> is stored in a separate tiddler or field, you can force the creation of child <div> elements, so that nth-child(even) can be applied successfully.

Give this a try:

\define nthchild(txt,bg:"lightgray")
\whitespace trim
<style> .myClass div:nth-child(even) { background:$bg$; } </style>
<pre class="myClass">
<$list filter="[<__txt__>splitregexp[\n]]" variable="line">
<div><$text text=<<line>>/></div>
</$list>
</pre>
\end

<$macrocall $name="nthchild" txt={{test}} bg="powderblue"/>

where the text content is stored in a tiddler named “test”.

-e

2 Likes
#5

That works!

I can generally grasp how this works, though I’m not familiar with <txt>splitregexp[\n]]

the only time I’ve seen \n is to create a new line in python, is it doing the same here?

#6
  1. <__txt__> is a parameter reference syntax that can only be used within macro definitions. It is similar to $txt$, which is a reference to the value of the txt macro parameter passed into the macro. However, while occurances of $txt$ are automatically replaced by the value passed into the macro when the macro’s content is returned, <__txt__> is handled as if it was a variable, and is only evaluated when the macro content is subsequently parsed by within the calling syntax. It is a shorthand equivalent to:
\define macroname(param)
<$vars param="$param$">
... references to <<param>> (or <param> if used within a filter) ...
etc.
</$vars>
\end
  1. splitregexp[...] is a filter operator and is similar to the split[...] filter operator. Note that both split[..] and splitregexp[...] find and remove instances of the filter operand value, producing multiple filter items as a result, which are then available for further processing by the filter syntax. The difference is that splitregexp[...] accepts regular expressions as the value of the filter operand, while split[...] only accepts literal text. In this instance, splitregexp[\n] is being used to "split the input (the value of <__txt__>) into separate values by matching (and removing) any newline characters. Each resulting line of text is then assigned to the line variable so it can be referenced in the body of the <$list>...</$list> widget, where it is then output, enclosed within <div>...</div>, in order to produce the final result of having separate child elements for each line, so that the nth-child(...) CSS rule can be applied.

-e

2 Likes
#7

If you know the line-height in pre element you can use it to create your custom background with repeating-linear-gradient.
In the vanilla theme the (inherit) line-height is 20px, then you can use something like this

pre {
background: repeating-linear-gradient(#f5f5f5, #f5f5f5 20px, #e0e0e0 20px, #e0e0e0 40px);
}
1 Like