georgestagg
commented
4 days ago Hi, thanks for the kind words!
Yes, we're handing off the editor to CodeMirror, so CSS rules that work for CodeMirror should work here. In terms of getting to the editor via CSS classes, your best bet will be something like: .exercise-editor .exercise-editor-body .cm-editor.
There are several classes in the file live-runtime/src/css/live-runtime.css, for the editor in both bootstrap and reveal.js slides, and they should be able to be overridden in your Quarto project. We should probably document the most useful of these, and so I will leave this thread open as a reminder to do just that.
Most glaring to me is the font size, which is larger than both body text and code cell text in normal quarto code cells
On my machine the browser is reporting that both the body text and the editor text are 17px. I guess a visual difference could be due to the switch to a monospaced font, but to me the editor text looks reasonably scaled. Perhaps it depends on specific machine settings and the CSS could be refined a little to better handle that. If there is a significant difference in text size between the editor and body text on your machine could you please post a screenshot and details of your OS and browser?
I've been able to reduce the font size using
font-size: .85em, but more systematic fixes seem to be failing likefont-size: 1rem.
The rule font-size: 1rem should in fact be the default value. Well, in truth the default is the CSS variable --bs-body-font-size, which is inherited from the Bootstrap style used by Quarto to build the page. In the Bootstrap CSS I'm looking at in a test website this variable is essentially defined to be the same as the root font size, i.e. 1rem.
The result should be that the code blocks scale with the base font size used in the rest of the page.
OTOH, it looks like the text size in Quarto/Bootstrap code cells are scaled down, at least in the testing page I'm currently looking at. Specifically, code and pre elements have font-size: 0.875em set. You could also apply that to the CodeMirror editor, but you'd probably also want to scale the editor header and padding down a touch to match.
So, I think this can be recreated with a SCSS style override in your Quarto document:
/*-- scss:rules --*/
.exercise-editor .exercise-editor-body .cm-editor {
font-size: 0.875rem;
}
.card.exercise-editor .card-header.exercise-editor-header {
font-size: 0.875rem;
padding: .3rem 1rem;
}BTW, I am not sure what you mean by "systematic". If you can give me some other concrete examples of changes you'd like to make to the code editor input element, drop them in a comment here and I can try building up some more CSS examples for you to work from as a base.
andrewpbray
First of: terrific work here! I'm using this extensively at a course that serves 800 intro students a semester here at UC Berkeley.
I'm trying to figure out how to restyle the webr code cells using css so that they don't look so categorically different from normal code cells and also the surrounding text. Most glaring to me is the font size, which is larger than both body text and code cell text in normal quarto code cells. I find that it makes a quarto-live page very visually busy - it's difficult for me to tell what i should be reading and in what order. I've been able to reduce the font size using
font-size: .85em, but more systematic fixes seem to be failing likefont-size: 1rem.I know you're offshoring that css to CodeMirror, but I haven't yet been able to figure out how to reset some of those defaults. I'm no css expert, so any guidance would be appreciated!