Help Adding Color to an Individual Custom Code Block

[GreenTheBlaze]

Hello,

I'm sure it's been mentioned before how to do this, however the last place I saw it work with was Codehilite, which is now unsupported.

As you can see, if you look at the Roblox Lua Style Guide, you can see that there are some "Good:", "Bad:", and "Exception:" areas above some of the code blocks. Some of the code blocks are also colored, but don't contain any title above. I've tried the following in my extra.css file:

.md-typeset .style-good {
  color: green;
  font-weight: bold;
  margin-bottom: 0.25em;
}

/* Green background for code blocks with .style-good */
.md-typeset pre > code.style-good {
  background-color: #ecffe5;
  display: block;
  padding: 1em;
  border-radius: 4px;
}

Sorry, I'm an ammeteur at mkdocs, so for anyone reading this, you're probably thinking I'm an absolute idiot.

Here's my mkdocs.yml file:

site_name: Roblox Dev Organization Guide
site_description: Documentation for GreenUtils
site_url: https://greentheblaze.github.io/Roblox-Dev-Organization-Guide/

repo_name: GreenTheBlaze/Roblox-Dev-Organization-Guide
repo_url: https://github.com/GreenTheBlaze/Roblox-Dev-Organization-Guide
edit_uri: ""

theme:
  name: material
  features:
    # - announce.dismiss
    # - content.action.edit
    # - content.action.view
    # - content.code.annotate
    # - content.code.copy
    # - content.code.select
    # - content.footnote.tooltips
    # - content.tabs.link
    # - content.tooltips
    # - header.autohide
    # - navigation.expand
    - navigation.footer
    # - navigation.indexes
    # - navigation.instant
    # - navigation.instant.prefetch
    # - navigation.instant.progress
    # - navigation.prune
    # - navigation.sections
    # - navigation.tabs
    # - navigation.tabs.sticky
    #- navigation.top
    # - navigation.tracking
    # - search.highlight
    # - search.share
    # - search.suggest
    # - toc.follow
    # - toc.integrate
  palette:
    - media: "(prefers-color-scheme)"
      toggle:
        icon: material/link
        name: Switch to light mode
    - media: "(prefers-color-scheme: light)"
      scheme: default
      primary: green
      accent: green
      toggle:
        icon: material/toggle-switch
        name: Switch to dark mode
    - media: "(prefers-color-scheme: dark)"
      scheme: slate
      primary: green
      accent: green
      toggle:
        icon: material/toggle-switch-off
        name: Switch to system preference
  
  highlightjs: true
  hljs_languages:
    - lua

extra_css:
  - stylesheets/extra.css

markdown_extensions:
  - tables
  - admonition
  # - codehilite:
  #     guess_lang: false
  - toc:
      permalink: true
  - pymdownx.superfences
  - pymdownx.highlight:
      anchor_linenums: true
      line_spans: __span
      pygments_lang_class: true
     # use_pygments: true
  #   linenums: false
  - pymdownx.inlinehilite
  - pymdownx.keys
  - pymdownx.extra
  - attr_list

nav:
  - Home: index.md
  - File Organization: file-organization.md
  - Scripting Style Guide: scripting-style-guide.md
  - Test: test-code.md

[kamilkrzyskow]

Hello @GreenTheBlaze,
you haven't provided the way you're creating the code block in your markdown file, how you're adding the style-good class.

Assuming you're doing it correctly, then with the highlight extension the special class gets added to a div wrapper as parent of the pre and code tags.

```lua { .style-good }
-- Without this condition, the aircraft hangar would fill up with water.
if waterLevelTooHigh() then
    drainHangar()
end
```

<div class="language-lua style-good highlight">

So your CSS should have a switcheroo in the rule:

.md-typeset .style-good * {
  color: green;
  font-weight: bold;
  margin-bottom: 0.25em;
}

/* Green background for code blocks with .style-good */
.md-typeset .style-good pre > code {
  background-color: #ecffe5;
  display: block;
  padding: 1em;
  border-radius: 4px;
}

Example: 8221-material.zip

Updated example: 8221-material.zip

---

Also I see you've added this to your mkdocs.yml

  highlightjs: true
  hljs_languages:
    - lua

this is a theme setting exclusive to the default mkdocs theme. mkdocs-material doesn't use such settings, and everything related to code blocks highlighting is handled by the pymdownx.highlight extension.

[GreenTheBlaze]

Hey there,

Thanks for your response, I'll try it out in a bit as it's at least pushed me forward a bit more in terms of how it should be. However, I'm still wondering how to make text such as "Good:", "Bad:" on top of the code blocks beforehand markdown to red or green, I'll show you what I mean. I also noticed that your one didn't include the language check, as the syntax you provided appeared to format all the text in the same color. Here's what I'm looking for:

[edit: hidden image to make the message shorter]

Also forgot to add, yeah this is currently how my text was structured before:

Output:

[GreenTheBlaze]

Hey, it seems you were right afterall, thanks to your guidance and instructions, I only needed to do a few more things. Thanks a lot for the help, @kamilkrzyskow!

[kamilkrzyskow]

Ah sorry about the lack of the title, while making the example I somehow remembered "but don't contain any title above", as there should be no title 😆 As for the colors, I got confused about the usage of the first CSS rule, but now I see you wanted to set the color of the title, instead of making it all green.

So let me fix that. Instead of using a separate paragraph <p> element for the title, use attr_list to assign a title to the pymdown extension, or use the ::before css selector.

```lua { .style-good-alt title="Good" }

.md-typeset .style-good::before {
  color: green;
  display: block;
  content: "Good";
  font-weight: bold;
}

As for the colors, some colors break depending on the color scheme, because the material theme provides a set of different colors depending on the scheme. So you just need to fix them.

[data-md-color-scheme="slate"] .style-good {
    --md-code-hl-comment-color: grey;
    --md-code-hl-punctuation-color: grey;
}

Updated example: 8221-material.zip