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

[Justin H.]

Hello all, title says it all.

When trying to apply nth-child(even) to use a background color for each line when using <pre> in my tiddlers, it doesn't seem to work, and I'm not entirely sure whats causing this.

Any suggestions?

[Eric Shulman]

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

[Justin H.]

Ah, well- that's a bummer haha

Thank you!

[Eric Shulman]

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

[Justin H.]

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?

[Eric Shulman]

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

```

2. `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

[Álvaro]

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);
}

```