Indent pre?

Sub

unread,

Jun 6, 2011, 11:01:54 AM6/6/11

to TiddlyWiki

How to indent a pre box without using <html>?

* List item 1
* List item 2 - Code:
:{{{
Foo bar
}}}
* List item 3

Alex Hough

unread,

Jun 6, 2011, 1:13:55 PM6/6/11

to tiddl...@googlegroups.com

Firebug helps show how <pre> is formatted;

.viewer pre {
background: none repeat scroll 0 0 #FFFFCC;
border: 1px solid #FFEE88;
}
tiddlywiki.com #3 (line 116)
.viewer pre {
font-size: 1.2em;
line-height: 1.4em;
margin-left: 0.5em;
overflow: auto;
padding: 0.5em;
}

We need to change the left margin
from
margin-left: 0.5em;
to
margin-left: 2.5em;

That will shift the text left by two em - the width of 2 characters.
Add it to your StyleSheet and Bob's a Gudgeon.

ALex

> --
> You received this message because you are subscribed to the Google Groups "TiddlyWiki" group.
> To post to this group, send email to tiddl...@googlegroups.com.
> To unsubscribe from this group, send email to tiddlywiki+...@googlegroups.com.
> For more options, visit this group at http://groups.google.com/group/tiddlywiki?hl=en.
>
>

Sub

unread,

Jun 7, 2011, 6:52:38 AM6/7/11

to TiddlyWiki

That's CSS and no solution to my problem, since I want to use normal
pre boxes as well.
The problem is how to indent thos in lists so the DOM is
<dd><dl><pre>...

Julian Knight

unread,

Jun 7, 2011, 9:28:33 AM6/7/11

to tiddl...@googlegroups.com

Again, if you use something like Firebug, you will be able to see the "path" to any element. Once you have that, you can style it.

Your example gives HTML of:

<div class="viewer">

<ul>

<dl>

<dd>

</dl>

So something like:

.viewer ul dl dd code {
margin-left: 0.5em;
}

Might do the job. Sorry can't test that at the moment though.

Regards, Julian.

Sub

unread,

Jun 7, 2011, 9:36:14 AM6/7/11

to TiddlyWiki

Again, not the solution of my problem... I don't want to style it, I
want to produce that output!

Julian Knight

unread,

Jun 7, 2011, 9:38:41 AM6/7/11

to tiddl...@googlegroups.com

Sorry, posted too quick. That would of course change all code inserted in level 1 lists. If this is not acceptable, you need to attach a custom class or custom css.

Using:

* List item 1
* List item 2 - Code:

{{classname{
text to be formatted
}}}
* List item 13

With CSS something like:

.classname{
white-space:nowrap;
font-family: monospace;

font-size: 1.2em;
line-height: 1.4em;
margin-left: 0.5em;
overflow: auto;
padding: 0.5em;
}

should do the job

Sub

unread,

Jun 7, 2011, 10:06:32 AM6/7/11

to TiddlyWiki

Ah ok, thanks.

* List item 2 - Code:
{{classname{

{{{

Foo bar
}}}
}}}
* List item 3

is a bit uncomfortable. I was hoping for an inhouse solution. In
MediaWiki you can indent pretty much everything. E.g.
* List
: <pre>Foo bar</pre>

Sub

unread,

Jun 7, 2011, 10:09:41 AM6/7/11

to TiddlyWiki

LOL, damn br tags.

* List item 1
{{classname{
{{{
Code
}}}
}}}
* List item 2

produces too many br tags above List item 2.

Sub

unread,

Jun 7, 2011, 10:11:42 AM6/7/11

to TiddlyWiki

Even in Google groups posts :O
Very buggy forum.

Eric Shulman

unread,

Jun 7, 2011, 1:50:46 PM6/7/11

to TiddlyWiki

On Jun 7, 6:36 am, Sub <subfa...@googlemail.com> wrote:
> Again, not the solution of my problem... I don't want to style it, I
> want to produce that output!

You *can* get block-level elements (such as PRE) to nest inside a
bullet list item. The trick is to contain the entire bullet item in a
CSS-classwrapper (i.e. {{classname{...}}}), like this:

* List item 1
* {{block{List item 2 - Code:

{{{
Foo bar
}}}
}}}
* List item 3

Because the "* {{block{" wrapper starts on the same line as the
bullet, the linebreak at the end of that line is not treated as the
end of the bullet item and, TW parses the entire CSS block as part of
the one bullet item.

The same technique can be applied to other block-level TW syntax, such
as tables:

* item 1
* {{block{
item 2 with table:
|foo|bar|baz|
|mumble|frotz|gronk|
}}}
* item 3

or even just simple paragraph breaks within a bullet item:

* item 1
* {{block{
this is the first paragraph of item 2

this is second paragraph of item 2
}}}
* item 3

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

Sub

unread,

Jun 7, 2011, 4:11:45 PM6/7/11

to TiddlyWiki

Ah nested element!
<pre>* List item 1

* {{block{List item 2 - Code:
{{{
Foo bar
}}}
}}}

* List item 3</pre>
This works fine :) The previous
<pre>* List item 2 - Code:
{{classname{
{{{
Foo bar
}}}
}}}
* List item 3</pre>
created even 2 lists with List item 3 in a seperate list.

Julian Knight

unread,

Jun 9, 2011, 9:13:04 AM6/9/11

to tiddl...@googlegroups.com

OK, final version:

* List item 1 <html><pre>
Code
</pre></html>
* List item 2

Does exactly what you want without any additional styling needed.

BTW, switch to the NEW Google Groups interface to get proper formatting that actually works.

Sub

unread,

Jun 9, 2011, 10:27:16 AM6/9/11

to tiddl...@googlegroups.com

Actually I wanted to avoid the html tag, but it looks cleaner.

PMario

unread,

Jun 9, 2011, 12:44:34 PM6/9/11

to TiddlyWiki

If I want to intend a pre I use:

text
<<<
some text above a pre
{{{
asdf
}}}
<<<
!!!!heading
<<<
some text above a pre
{{{
adsf
}}}
<<<

-m

Reply all

Reply to author

Forward