How can you change the default codeblock font size?

[oleander]

Hi, all!

I was wondering if anyone knows how to change the size of the text in
{{{codeblocks}}}. The monospaced text is very large and it always ends
up needing a scrollbar-- and it really doesn't have to be so big. I
tried looking on the wiki for TiddlyWiki (here:
http://www.tiddlywiki.org/wiki/How_do_I_change_the_colours_and_the_fonts%3F)
but there are still many articles missing or incomplete, including
that one. Does anyone know how I could accomplish this? Also, if you
happen to know of anywhere I could learn more about the inner workings
of TiddlyWiki and how to customize it, I'd really appreciate it --
it's been really difficult trying to find a hardcore manual or site
that really thoroughly covers all of the code and customizing...I hope
I just completely missed it...

Thanks for any help or suggestions... :)

~oleander

[wolfgang]

Hi Oleander,

if you take a look in the StyleSheetLayout shadowed tiddler ( > right
sidebar > More tab > Shadowed tab > StyleSheetLayout > ) you'll find
all layout element predefined there, for example:

.viewer code {font-size:1.2em; line-height:1.4em;}

- now just take that piece of CSS, place it into the StyleSheet
shadowed tiddler with your prefered font size - and it will override
the defaults.

Regards,

W.

[oleander]

Thank you, wolfgang. I'm really happy for your help. :)

I think it will help my TiddlyWiki a lot to have the codeblocks
smaller and more readable!

~oleander

[Morris Gray]

It's interesting this only works for {{{ code here }}} and not:
{{{
code here
}}}

Is there any way to adjust the second case?

Morris Gray
http://twhelp.tiddlyspot.com
A TiddlyWiki help file for beginners

[FND]

> this only works for {{{ code here }}} and not:
> {{{
> code here
> }}}

Using those braces inline generates CODE elements, using them as a block
generates PRE elements.
So to style the latter, use the following selectors:
.viewer pre {
/* ... */
}

HTH.

-- F.

[Morris Gray]

Thanks FND that's great stuff.

Although it's interesting the code ...

{{{works for code here
}}}

{{{
doesn't work for code here
}}}

What's the difference now?

Morris Gray
http://twhelp.tiddlyspot.com
A TiddlyWiki help file for beginners

[wolfgang]

> What's the difference now?

The difference is defined in these 2 different definitions in the
StyleSheetLayout tiddler:

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

.viewer code {font-size:1.2em; line-height:1.4em;}

Regards,

W.

[Morris Gray]

I think you misunderstood my question. I wanted to know why

{{{code here in line with the first set of triple brackets
}}}
obeys the style sheet

{{{
and the code not on the same line
}}}
does not recognize the StyleSheet

Morris Gray
http://twhelp.tiddlyspot.com
A TiddlyWiki help file for beginners

[FND]

> {{{works for code here
> }}}

That also counts as inline, as the braces have to be on a separate line
for it to count as a block element.

-- F.

[Morris Gray]

Thanks FND. I see, so it still counts as inline code on the same line
as the brackets and it is the ".viewer code" that still works on this
code not the ".viewer pre"

I had both codes in the StyleSheet and was confused as to what was
affecting what.

Then I still have no way of modifying the style in a block because the
code you gave:

.viewer pre {
/* ... */
}

Does not seem allow you to modify fonts or colors like the "viewer
code" does on the 'inline'

Morris Gray
http://twhelp.tiddlyspot.com
A TiddlyWiki help file for beginners

[Daniel Baird]

On Sun, Aug 3, 2008 at 3:00 PM, Morris Gray <msg...@symbex.net.au> wrote:
>
> [...] the code you gave:

>
> .viewer pre {
> /* ... */
> }
>
> Does not seem allow you to modify fonts or colors like the "viewer
> code" does on the 'inline'

Sounds like a specificity problem.. try making the selector more specific:

#contentWrapper .viewer pre {

Cheers
;Daniel

--
Daniel Baird
/to be or not to be/ => /(2b|[^2]b)/ => /(2|[^2])b/ => /.b/
...optimise your regexes, people!

[Morris Gray]

> Sounds like a specificity problem.. try making the selector more specific:
>
> #contentWrapper .viewer pre {

That has no effect either Daniel.

Morris

[FND]

> That has no effect either Daniel.

Can you provide a simple testcase* for us to look at?

-- F.

* http://www.tiddlywiki.org/wiki/Troubleshooting

[FND]

> Can you provide a simple testcase* for us to look at?

Looking at the testcase* you've posted in another thread, it appears you
have a syntax error:
---------------

.viewer code {font-size:1.2em; line-height:1.4em;

color:#c06;background:#adf; /***** missing closing brace *****/

#contentWrapper .viewer pre {
/* font-size:1.2em; line-height:1.4em;
color:#c06;background:#adf;} */ } /***** commented out!? *****/

#tiddlerCodeWrappingMethodsTest {color:#000; background-color:#fcf;}
---------------

Could you review this, update your demo accordingly and see whether the
problem persists?

-- F.

* well, it's more of a demo than a minimal testcase:
http://graytestexperiments.tiddlyspot.com

[Morris Gray]

Thanks FND you been a major help again.

> * well, it's more of a demo than a minimal testcase:

You know what I always say...
Nunquam operor per minor quis vos can operor per magis
(Never do with less what you can do with more :-)

Morris