bootstrap code styling

[Alex-Jordan]

Here's a screenshot from an exercise we use:

A student complained that the "P" and "C" in the instructions are too small and at first they thought these were lowercase. It turns out those are coming out at 0.875 scale. It seems this is bootstrap styling for a code HTML element, which is what PGML does for [| ... |]*.

Should we make [| ... |]* doe something else? Maybe still code, but styled at 100%?

[drgrice1]

We can see what can be done about that. However, I would also say that the "P" and "C" here should really not be code. Those should be math mode typeset with MathJax.

[Alex-Jordan]

That's fine for this one, but in general this is used when trying to tell the student what to type. I have no opinion on using the HTML code element, just something that is monospace.

[Alex-Jordan]

I suppose if this comes to not using code here, it is a pg issue, not a webwork2 issue.

[drgrice1]

I was not saying that the code font size shouldn't be fixed. I was just pointing out that particular case.

[drgrice1]

I am not sure how much of a problem this really is. That particular case is a case where code shouldn't be used. If I use code with more general text then the size doesn't really seem off. Here is a screenshot:

On the top line the code text size isn't that different than the size of the other text. On the second line you can compare the sizes of math typeset via MathJax, code, and regular text.

[somiaj]

To me I have never liked the default bootstrap color for code blocks and find that harder to deal with than the size.

[drgrice1]

Yeah, the contrast is not sufficient against the problem background color.

[drgrice1]

If you want to play with the style for code tags in a problem, the best place to do this is in the pg/htdocs/js/Problem/problem.scss file. I suggest adding a rule in the .problem-content section like

	code {
		--bs-code-color: black;
	}

This will specifically override Bootstrap's color. You could also just use color, but this has the advantage of if the problem is rendered on another system where Bootstrap is not present, and that system has a better color choice for code tags, then that color will be used. If you want to force the color anywhere a problem is rendered, then just use color.

Of course you can also play with the font size if you like.

I don't use this in problems. I don't have any situation in any of my problems where I think that a code tag or more generally a monospace font is appropriate. So you should try this out with the problems where you use this.