51 lines
1.4 KiB
TypeScript
51 lines
1.4 KiB
TypeScript
/**
|
|
* Based on the discussion at https://github.com/expressive-code/expressive-code/issues/153#issuecomment-2282218684
|
|
*/
|
|
import { definePlugin } from "@expressive-code/core";
|
|
|
|
export function pluginLanguageBadge() {
|
|
return definePlugin({
|
|
name: "Language Badge",
|
|
// @ts-expect-error
|
|
baseStyles: ({ _cssVar }) => `
|
|
[data-language]::before {
|
|
position: absolute;
|
|
z-index: 2;
|
|
right: 0.5rem;
|
|
top: 0.5rem;
|
|
padding: 0.1rem 0.5rem;
|
|
content: attr(data-language);
|
|
font-family: "JetBrains Mono Variable", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
|
|
font-size: 0.75rem;
|
|
font-weight: bold;
|
|
text-transform: uppercase;
|
|
color: oklch(0.75 0.1 var(--hue));
|
|
background: oklch(0.33 0.035 var(--hue));
|
|
border-radius: 0.5rem;
|
|
pointer-events: none;
|
|
transition: opacity 0.3s;
|
|
opacity: 0;
|
|
}
|
|
.frame:not(.has-title):not(.is-terminal) {
|
|
@media (hover: none) {
|
|
& [data-language]::before {
|
|
opacity: 1;
|
|
margin-right: 3rem;
|
|
}
|
|
& [data-language]:active::before {
|
|
opacity: 0;
|
|
}
|
|
}
|
|
@media (hover: hover) {
|
|
& [data-language]::before {
|
|
opacity: 1;
|
|
}
|
|
&:hover [data-language]::before {
|
|
opacity: 0;
|
|
}
|
|
}
|
|
}
|
|
`,
|
|
});
|
|
}
|