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):
When hovered the copy box neatly covers it: