Custom CSS to show the language in code blocks

I wanted a way to show the code language in the code block. My previous theme (Topaz) could do this, so I thought it would be nice to have this in Minimal as well. It also works with the v1.0.0 default theme and hopefully many others since I tried to use variables as best as possible.

You need the following custom CSS:

/***** Show language in code blocks *****/
body pre[class^="language-"]::before {
  font-family: var(--font-default);
  color: var(--text-muted);
  font-size: var(--font-smaller);
  font-weight: var(--font-semibold);
  position: absolute;
  right: 0.5em;
  top: 0.5em;
}

body pre[class~='language-c']::before {
  content: "C";
}
body pre[class~='language-cs']::before {
  content: "C#";
}
body pre[class~='language-cpp']::before {
  content: "C++";
}
body pre[class~='language-java']::before {
  content: "JAVA";
}
body pre[class~='language-py']::before,
body pre[class~='language-python']::before {
  content: "PYTHON";
}
body pre[class~='language-javascript']::before,
  body pre[class~='language-js']::before {
  content: "JS";
}
body pre[class~='language-html']::before {
  content: "HTML";
}
body pre[class~='language-css']::before {
  content: "CSS";
}
body pre[class~='language-xml']::before {
  content: "XML";
}
body pre[class~='language-php']::before {
  content: "PHP";
}

body pre[class~='language-shell']::before,
body pre[class~='language-bash']::before {
  content: "SHELL";
}
body pre[class~='language-flow']::before {
  content: "FLOW";
}
body pre[class~='language-sequence']::before {
  content: "SEQUENCE";
}
body pre[class~='language-sql']::before {
  content: "SQL";
}
body pre[class~='language-yml']::before,
body pre[class~='language-yaml']::before {
  content: "YAML";
}
body pre[class~='language-ini']::before {
  content: "INI";
}
body pre[class~='language-git']::before {
  content: "GIT";
}
body pre[class~='language-txt']::before {
  content: "TXT";
}
body pre[class~='language-r']::before {
  content: "R";
}
.markdown-rendered button.copy-code-button {
  background-color: var(--background-secondary-alt);
}
.markdown-rendered button.copy-code-button:hover {
  color: var(--text-accent);
}

This is what it looks like (top right corner of the box):

image

When hovered the copy box neatly covers it:

image

6 Likes

Yep, that is super neat! It would be nice to also include:

  • TOML
  • Matlab
    (not sure if those are supported by Obsidian though)

You can add more languages easily yourself with just an additional block like this:

body pre[class~='language-toml']::before {
  content: "TOML";
}

As for the language support, Obsidian uses “language-” as the css class and doesn’t have to support the language for that. So you can use language-toml, language-matlab or language-whateverthenameofyourlanguageis and then use it like this:

```whateverthenameofyourlanguageis
Your code goes here.
```

Syntax highlighting only works if the language is also supported by Obsidian of course.

1 Like

Cheers, That is indeed good to know! I hope minimal sees this and integrate it, its a very nice addition!

Nice. It works in Live Preview. Could you show how to make that work in Reading Mode as well?

It should work in reading view just fine. At least for me it does:

2 Likes

Indeed, it does work. It was my mistake. I added some custom languages and used uppercase letters instead of lowercase.

1 Like