Background color for markdown code block for the hugo-researcher theme

Using Themes
1

The background color for a codeblock in markdown appears to be black
and the code is black as well, resulting in non-readable output.

In the css files of the theme I can spot the codeblock section which does not have
black as the background color. Other themes, output the background color normally.

I understand that this comes from the theme and not from hugo. I oppened an issue with the theme on github ( Background color for code block · Issue #37 · ojroques/hugo-researcher · GitHub ).

I was wondering if maybe someone would have an idea where to search in the files of the theme to find out what is causing this.

2

It must be in the CSS, which comes from you or the theme. Never from Hugo.
Look closer, best in your browsers developer tools.

3

this is the css of the theme. There are sections where one can specify the colors.
But the weird thing is that the color of black displayed is different than the black specified
in this css file. Even though in the codebackground section there is nothing like this specified.
Is it possible that something else overwrites this setting? Where could I locate if somewhere else
something overwrites it?

// Sizes
$max-width: {{ .Param "style.pageWidth" | default "750px;" }};
$avatar-size: {{ .Param "style.avatarSize" | default "90px;" }};

// Colors
$black: {{ .Param "style.colorBlack" | default "#222222" }};
$red: {{ .Param "style.colorRed" | default "#dc3545" }};

// Font
$font-family: {{ .Param "style.fontFamily" | default "Inconsolata" }};
$font-size: {{ .Param "style.fontSize" | default "14pt" }};

// Margins
$y-small: 0.6rem;
$y-medium: 1.0rem;

// Placeholders
%link-default {
    color: $red;
    text-decoration: none;
    & * {
        color: $red;
    }
    &:hover {
        color: $red;
        text-decoration: underline;
    }
}
%link-dark {
    color: $black;
    text-decoration: none;
    & * {
        color: $black;
    }
    &:hover {
        color: $black;
        text-decoration: underline;
    }
}
%table-cell {
    border: 1px solid #cccccc;
    padding: 6px 12px;
    text-align: left;
}

// Style
* {
    color: $black;
    font-family: $font-family;
    font-size: $font-size;
    line-height: 1.2;
    // background-color: lightblue;
    // background-color: #f2f2f2;
}
.container {
    max-width: $max-width;
}
.navbar-brand {
    @extend %link-dark;
    font-size: 2rem;
}
.nav-link {
    @extend %link-default;
}
#content {
    a {
        @extend %link-default;
    }
    p {
        margin-bottom: $y-small;
    }
    h1, h2, h3, h4, h5, h6 {
        font-size: medium;
        font-weight: bold;
        margin: $y-medium 0 $y-small 0;
    }
    @for $i from 1 through 4 {
        h#{$i} {
            font-size: 1.2rem + 0.2 * (4 - $i);
        }
    }
    img {
        display: block;
        margin: $y-medium auto;
        max-width: 100%;
    }
    .avatar > img {
        border-radius: 50%;
        float: right;
        margin: -8px 0 0 16px;
        height: $avatar-size;
        width: $avatar-size;
    }
    ol {
        counter-reset: list;
        list-style: none;
        padding-left: 2rem;
        & > li {
            display: table-row;
        }
        & > li:before {
            content: "[" counter(list, decimal) "] ";
            counter-increment: list;
            display: table-cell;
            text-align: right;
            padding-right: .5em;
        }
    }
    .container > ol, .footnotes > ol {
        padding-left: 0;
    }
    ul {
        list-style: inside;
        padding-left: 2rem;
        & > li {
            list-style-position: outside;
            margin-left: 1em;
        }
    }
    .container > ul, .footnotes > ul {
        padding-left: 0;
    }
    table {
        margin: $y-medium auto;
        width: 100%;
        & th {
            @extend %table-cell;
            font-weight: bold;
        }
        & td {
            @extend %table-cell;
        }
        & tr:nth-child(2n) {
            background-color: #f8f8f8;
        }
    }
    blockquote {
        border-left: 4px solid;
        font-style: italic;
        margin: $y-medium 0;
        padding: 8px 8px;
    }
    code {
        color: $black;
        background-color: #f2f2f2;
        border: 1px solid #cccccc;
        border-radius: 10%;
        padding: 0px 4px;
    }
    pre code {
        all: unset;
    }
    .highlight {
        margin: $y-medium auto;
        & > pre {
            padding: 8px 8px;
        }
    }
}
#footer {
    a {
        @extend %link-dark;
    }
}
4

As I said: check the CSS in your browser dev tools. This code here is useless, s there might be other CSS involved. The only thing that matters is what your browser sees.

5

ah, thanks for the pointer. Since I am a newbie with regard to web development, is it possible to give me a pointer what to search for and where? Thanks!

6

Here’s not the place to discuss web development in general. The web is full with resources on that.

7

https://github.com/ojroques/hugo-researcher/blob/14d87322a88ce5d54097cd29db428d060137bcf1/assets/sass/researcher.scss#L47

The above is not a great idea.

https://developer.mozilla.org/en-US/docs/Web/CSS/Universal_selectors

Some of the text within the highlighted code block is not within elements with style attributes, so that text inherits from the style sheet (that’s what the universal selector does).

To fix, override the Sass file:

mkdir assets/sass
cp themes/researcher/assets/sass/researcher.scss assets/sass

Then edit assets/sass/researcher.scss, changing this:

* {
    color: $black;
    font-family: $font-family;
    font-size: $font-size;
    line-height: 1.2;
}

to this:

body {
    color: $black;
    font-family: $font-family;
    font-size: $font-size;
    line-height: 1.2;
}

Use this markdown to test the results with any highlighting style:

test.md 
#### Example CSS

```css
body {
  font-size: 16px;  /* comment */
}
```

#### Example HTML

```html
<a href="/about.html">Example</a>  <!-- comment -->
```

#### Example Go HTML template

```go-html-template
{{ with $.Page.Params.content }}
  {{ . | $.Page.RenderString }}  {{/* comment */}}
{{ end }}
```

#### Example JS

```javascript
if ([1,"one",2,"two"].includes(value)){
  console.log("Number is either 1 or 2.");  // comment
}
```

#### Example markdown

```markdown
{{</* figure src="kitten.jpg" */>}}
[example](https://example.org "An example")  <!-- comment -->
toml
[params]
bool = true  # comment
string 
```

8

This indeed fixes the problem.
Thank you so much
I would like to choose the theme of my syntax highlighting.
I see that Hugo uses goldmark which uses goldmark-highlighting which uses chroma.
In order to change the highlighting theme, it is not clear to me where I can control this.
In this post you mention that there is no need to build goldmark-highlighting because hugo has this already.

9

Here’s a gallery of available highlighting styles:
https://xyproto.github.io/splash/docs/

Specify the style in your site configuration:

[markup.highlight]
style = 'monokai'
10

I am sorry for my ignorance!
thank you for your help!

1 Like
11

No problem. Glad it’s resolved.

12

This topic was automatically closed 2 days after the last reply. New replies are no longer allowed.