CSS for code listings

[rbeezer]

pre.prettyprint is the signal for the Google Code Prettifier JS. The script moved and the address was wrong for a long time. If the border property is made !important we should be able to turn off the frame? And thus expose Greg's inverted L instead? Some code listings do not have a language given in author's source. So these should be done in black-and-white. I'm getting that now by just dropping prettyprint, but then no L at all.

Could we have something like pre.plainprint which would not activate the Prettifier, but will provide the L? I've gone ahead and put plainprint on these - we can do it different, and/or use a different name. Maybe something that suggests a program listing?

There is an 80% font size that could go away and become part of the CSS?

See

http://mathbook.pugetsound.edu/examples/sample-article/html/section-programs.html

Colored listings with mostly-hidden L in frame that should go away, and B/W listings with no L at all.

[davidfarmer]

Preliminary comments:

Definitely get rid of the 80% font size inthe source, especially if it always says that. (And the same for other places where such things occur.)

I can change the font size in CSS, but if anythign I woudl set it to be bigger, like 110%. That is what Bob's book has.

pretty.css is a new addition? I am looking at Bob's book, and its pre.prettyprint is being styled by the main CSS. Note that our CSS was being styled on

figure pre.prettyprint

I assume that we can't assume pre.prettyprint is always inside a figure, so I am going to delete that part of the selector.

We don't need !important to turn off the pretty.css frame, but we do neeed to explicitly turn off the borders we don't want.

I have adjusted the CSS, so feel free to comment on what I wrote, or reload Rob's sample and comment on the appearance.

Any thoughts on more styling of pre.console? (I have an idea but don't want to be the first to suggest it. Feel free to try to guess what I am thinking.)

David

On Wed, 20 Dec 2017, Rob Beezer wrote:

pre.prettyprint is the signal for the Google Code Prettifier JS. The script moved and the address was wrong for a long time. If the border property is made !important we should be able to turn off the frame? And thus expose Greg's inverted L instead? Some code listings do not have a language given in author's source. So these should be done in black-and-white. I'm getting that now by just dropping prettyprint, but then no L at all.

Could we have something like pre.plainprint which would not activate the Prettifier, but will provide the L? I've gone ahead and put plainprint on these - we can do it different, and/or use a different name. Maybe something that suggests a program listing?

There is an 80% font size that could go away and become part of the CSS?

See

http://mathbook.pugetsound.edu/examples/sample-article/html/section-programs.html

Colored listings with mostly-hidden L in frame that should go away, and B/W listings with no L at all.

— You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub, or mute the thread.[AAM6LPKALIg1Mq8FqzT9icEL54gdM8Qvks5tCIfDgaJpZM4RH4HF.gif]

[rbeezer]

Definitely get rid of the 80% font size inthe source, especially if it always says that. (And the same for other places where such things occur.)

Will do, and will post here once live.

I can change the font size in CSS, but if anythign I woudl set it to be bigger, like 110%. That is what Bob's book has.

How does Bob achieve that? Does he add CSS? Width is at a premium (always) and line-breaking code is not such a great thing, though listings will do it for print. I'm using \small for the PDF. Look at sample article PDF, same section ("Program Listings"), and see that the third listing (rref) is using about 80-90% of the screen. I really like the way our text fonts are roughly the same size in HTML v. PDF, by which I mean we get similar line breaks in a typical paragraph. Whatever you do with the font size, I'd lobby for having it match closely to PDF. I suppose loading a different version of Inconsolata (LaTeX and/or HTML) is an option, but that will change the font everywhere. Maybe that would be a good thing - the monospace looks a bit tall in the PDF when used in a sentence (ie the "c" element).

pretty.css is a new addition? I am looking at Bob's book, and its pre.prettyprint is being styled by the main CSS.

All I really changed is the URL for the Google JS. It was broken. So I think that pretty.css must be a result of that script? I have not explicitly loaded that CSS file.

Note that our CSS was being styled on

figure pre.prettyprint

I assume that we can't assume pre.prettyprint is always inside a figure, so I am going to delete that part of the selector.

This made sense when I read it. But I think it looks funny for a bare "program" which is a panel of a sidebyside, or simply being adjusted horizontally by a sidebyside. The Greg-L looks great on a "program" inside a "listing" (implemented as an HTML "figure"). See the section of the sample article, where the second and third "program" are indented. Similar things happen right now in Bob's book.

Any thoughts on more styling of pre.console? (I have an idea but don't want to be the first to suggest it. Feel free to try to guess what I am thinking.)

White on black? A dark theme? tcolorbox can do things like this, as can Google Code Prettifier. Line numbers are possible in both, iirc. We need to keep something mellow for B/W print.

[davidfarmer]

If this still needs work 5 years later, make another issue.