Background color of markdown pre formated text

Support Themes & Styling
1

Hello,

My theme is my_theme and it is inherited from quark theme.

I try in my custom.css file to change the background color of a pre formated texte but I didn’t find out how to do.

I want to use markdown, I could do it with <pre> </pre> html tags easily but I would like not to have to use <pre> </pre> tags in my page. Is it possible ?

in my page I have a pre formated text

	my texte

in my css I tried this, but it doesn’t change the background that stay white

pre 
{
 background:#AA8811;
}

Thanks

2

@thgr, You probably have a conflict with existing css from Quark:

theme.min.css

pre code, pre.xdebug-var-dump {
  ...
  background: #fafafa;
}

and spectre.min.css

code {
  ...
  background: #fcf2f2;
}
3

@pamtbaau, Should I modify this files instead of using custom.css in my_theme ?

4

@thgr, If the theme is correctly setup, the custom.css file should be loaded last. This way, selectors with equal specificity in custom.css will override prior selectors.

In your case, the selector pre code from theme.min.css has a higher specificity then pre used in your custom.css. Hence, the background from theme.min.css wins.

Try using the same of higher specificity in your custom.css like:

pre code {
 background: red;
}
5

So my_theme is not correctly setup and I don’t know why.

I know that in css (Cascading Style Sheets) the last one override prior selectors.

I found this solution

pre code {
    background: #CCBBBB !important;
}

thank’s

6

@thgr, That’s not a solution, that’s brute force and is considered a bad practice…

So my_theme is not correctly setup and I don’t know why.

If you followed Inheriting using the CLI when creating an inheriting theme from Quark, !important should not be needed.

7

Hello,

@pamtbaau

The first time I already did it this way but I tried again, and with the same result :

Point 2/

user@monpc~/public_html/grav$ bin/plugin devtools new-theme

 Enter Theme Name:
 > mytheme2

 Enter Theme Description:
 > mytheme2

 Enter Developer Name:
 > user

 Enter GitHub ID (can be blank):
 > 

 Enter Developer Email:
 > ***@***.net

 Please choose an option:
  [pure-blank ] Basic Theme using Pure.css
  [tailwind   ] Basic Theme using tailwind.css
  [inheritance] Inherit from another theme
  [copy       ] Copy another theme
 > Inherit from another theme

 Please choose a theme to extend:
  [0] mytheme
  [1] quark
 > 1


SUCCESS theme mytheme2 -> Created Successfully

Path: /home/user/public_html/grav/user/themes/mytheme2

Point 4/ It’s strange because it is already done :

Copy the “form” section from /user/themes/quark/blueprints.yaml file into /user/themes/mytheme/blueprints.yaml in order to include the customizable elements of the theme in the admin. (Or simply replace the file and edit its content.)

My css grav/user/themes/mytheme2/custom.css is working but not for pre code tags

pre code {
    background: #CCBBBB;
}
8

@thgr,

My css grav/user/themes/mytheme2/custom.css is working but not for pre code tags

Maybe a typo, but the custom.css file should be in folder user/themes/mytheme2/css

I’ve again walked the steps again using a fresh Grav install, and it is working perfectly. Page Typography shows a block-quote on which it works fine.

  • Would you mind copying the HTML section where the css files are being loaded?
  • Can I access your site somewhere?
9 
<link href="/user/plugins/markdown-notices/assets/notices.css" type="text/css" rel="stylesheet">
<link href="/user/plugins/external_links/assets/css/external_links.css" type="text/css" rel="stylesheet">
<link href="/user/plugins/form/assets/form-styles.css" type="text/css" rel="stylesheet">
<link href="/user/plugins/login/css/login.css" type="text/css" rel="stylesheet">
<link href="/user/themes/quark/css-compiled/spectre.min.css" type="text/css" rel="stylesheet">
<link href="/user/themes/quark/css-compiled/theme.min.css" type="text/css" rel="stylesheet">
<link href="/user/themes/mytheme/css/custom.css" type="text/css" rel="stylesheet">
<link href="/user/themes/quark/css/line-awesome.min.css" type="text/css" rel="stylesheet">

I notice the last line is not
/user/themes/mytheme/css/custom.css
but
/user/themes/quark/css/line-awesome.min.css

10

@thgr, I’ve has a look at your website.

When looking at the css tree in the inspector of the browser, the issue is quite clear: It’s a specificity issue. The most specific rule wins.

The problem is caused by this rule in theme.min.css.

pre code:not(.hljs):not([class*=language-]) {
    background: #f8f8f8;
}

This rule is more specific than pre code and hence it wins.

Two possible solutions:

  • Make you generated code more specific. In you markdown use
    ```html
mon texte
mon texte
```
    Which will be translated into :
    <pre><code class="language-html">
  mon texte
  mon texte
</code></pre>
    Now the rule form theme.min.css will no longer match the block quote.
  • Or you could change custom.css to match the specificity from theme.min.css
    pre code:not(.hljs):not([class*=language-]) {
  background: red;
}
    Now the last rule (the one from custom.css) will win.