Changing font and font size in the quoted code blocks

[ari_notes]

What is the current way to set the monospace font and font size (I want to use First Code with ligatures enabled, and 12pt size), only for the “code” in quotes? I could not find any working example of this.

Related question: I believe the “custom.css” configuration is applied when one uses the default dark/light themes, but it does not seem to apply when using a theme from the marketplace. I am using one of the variants of Nord Flow - Is there a way to customize it by editing custom.css or do I need to find the source of the theme and modify the theme directly?

[mentaloid]

• From CSS not working properly in the code fence blocks
  • Custom CSS works, but it needs correct targeting selectors
    • From My white theme has lost all of its color, how to get default white theme back?
      • If you have messed up the accent, you may have to target lsradix
  • Another approach is CodeMirror options
    • From Remove line numbers in code blocks
      • Look in file config.edn for entry :editor/extra-codemirror-options
        • This is to check any existing or optionally apply a theme with :theme
          • Have a look at the available CodeMirror themes
        • Then use a CSS rule that targets that theme
• If you need more specific help, should:
  • open the inspector (Ctrl + Shift + i)
  • use the tool to inspect a code-block for the exact rules applied in its case
  • provide a screenshot of the inspector

[ari_notes]

Thanks @mentaloid! - I will try this out today. I am using logseq on linux - flatpak.

I believe the flatpak does not have access permissions to the system fonts, in my tests I installed the Hack and Fira fonts (via deb packages) and it seemed that Logseq was not able to use them.

Do you need an @import line for logseq to be able to use the fonts? if yes, do you know how do you specify that the fonts are local? I saw some imports pointing to files on CDN, none of the examples seemed to use the locally installed fonts for some reason

[mentaloid]

For local @import options, read Custom.css can’t import?

[y_p]

blockquote .CodeMirror pre.CodeMirror-line {
    font-family: "Fira Code";
    font-variant-ligatures: normal;
    font-size: 12px;
}

Btw, Fira Code is the default font anyway, so as long as it is installed on your system, it should work out of the box.

The above was tested on a flatpak version of Logseq installed on Fedora Silverblue.

[ari_notes]

Thanks @y_p , super helpful, it worked. In the flatpak version, the Fira font setting only seems to work if Include the import statement (importing the font from a URL), regardless of it being locally installed

Question: how can I separately target with a font color change the text within single quotes (not the code-blocks that are within triple quotes, but the single-quoted single-line blocks e.g: example of regular quoted block. Which html selector should I use to have:

color: #aaa;

To only apply to the text within single quotes?
This is because in my theme (Bonofix) the text within single quotes is rendered in red.

[y_p]

code {
  color: #aaa!important;
}

Alternatively, you could just delete the offending lines from the css for the Bonofix theme. Everything in Logseq is hackable, including themes and plugins. That is what makes it so much fun to use it

[y_p]

Sorry, I forgot to type the quotation marks around the font name. See the updated snippet above.

[ari_notes]

after a bit of tinkering, I learned that

• logseq flatpak is able to load any font installed locally, no need to @import it
• some themes do not support ligatures even if you are using a font that supports ligatures like Inter, for example the theme I was trying to use (Flow Nord - One dark); however as mentioned above, you can tweak custom.css to make the theme enable ligatures

The below custom.css config allowed me to tweak CodeMirror blocks, regular Code blocks, sets the main/regular font, and enables ligatures for Flow Nord that didn’t support that out of the box.

/*@import url('https://fonts.googleapis.com/css2?family=Inter&display=swap');
@import url("https://fonts.googleapis.com/css2?family=Fira+Code&display=swap"); */

:root {
  --ls-font-family: "Inter", sans-serif !important;
  --ml-feature-settings: "ss01" 1, "ss02" 1, "ss03" 1, "ss06" 1, "ss10" 1,
    "ss11" 1, "zero", "onum", "liga" 1, "calt" 1;
  --ls-font-feature-settings: var(--ml-feature-settings);
  --cl-font-family: var(--ls-font-family);
}

html, body {
  /* some themes like Flow Nord do not properly set font-feature-settings, 
     hence ligatures do not work out of the box, the below fixes that (linux) */
  font-variant-ligatures: normal !important;
  font-feature-settings: var(--ls-font-feature-settings);
}

/* code-mirror blocks */
.CodeMirror pre.CodeMirror-line
/* , .CodeMirror-linenumber, .CodeMirror-scroll,
.CodeMirror-sizer,
.CodeMirror-gutter,
.CodeMirror-gutters, */
{
  font-family: "Fira Code", monospace !important;
  font-size: 14.5px;
}

/* single line blocks */
code {
    font-size: 14.5px !important;
    font-family: "Fira Code", monospace !important;
    /* ligatures are not supported in any known theme inside single quotes */  
    font-variant-ligatures: normal !important;
    color: #aaa !important; 
}