Hi there,
I got a question about changing the font size in code blocks, I read the code block is translate to
pre / code
tags in HTML.
I put the below css code into the Custom.css file, and the first three lines all worked
(it sets new font, italic and wraps long line to multiple lines), however the last row (font-size) was not changed.
pre {
font-family: “Times New Roman”, Times, serif;
font-style: italic;
white-space : pre-wrap !important;
font-size:40px;
}
I wonder what is holding the change of the font-size in the code block? they are too small!
by the way, I am using the “default Light theme” which come with Logseq installation.
Sweet! I wasn’t sure what to assume about your familiarity, but I’m glad it worked
With CSS, there’s a hierarchy based on:
the order it’s written in [basically the code loads top to bottom, not simultaneously] and
the specificity of the CSS Selectors [e.g. pre, div, .block-properties, etc.]
I figured that the code blocks were styled with a more specific selector (pre refers to any html code block, and I know Logseq uses CodeMirror which has elements named .code-mirror this or that), which means they’re higher up the hierarchy than the more general selector. Adding !important says “let me override any other rule for this!”
I’m not an actual expert so a clearer explanation is out there, but this is my understanding, and why !important is my first troubleshooting step when my custom CSS doesn’t appear to make a change.
Another thing I do—just as a general tip for future editing—is add a bright border (like border: 1px solid magenta;) around the area I’m working on if I’m unsure the selector I’ve typed targets the exact element(s) I intend to edit.
And definitely look up how to use Developer Tools to click on specific elements and see how to refer to them in your code; it’s very easy to just copy selectors from existing styles (especially if you’re adding onto to an installed theme) and customize them to your needs. Search anything you don’t understand (real developers constantly look up things they “should” know!) and you’ll pick up the basics faster than you think.
