Skip to content

feature/code-block-language-header #1389

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
sfc-gh-dmatthews merged 6 commits into from
Dec 19, 2025
Merged

feature/code-block-language-header #1389

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
8c1cc01
feature/code-block-language-header
sfc-gh-dmatthews Dec 14, 2025
47a1c53
Include none language
sfc-gh-dmatthews Dec 14, 2025
f825a14
Debug none language
sfc-gh-dmatthews Dec 14, 2025
a348b58
Hide language when none
sfc-gh-dmatthews Dec 14, 2025
f50584c
Use right padding
sfc-gh-dmatthews Dec 14, 2025
a3c3d75
Add header to Autofunctio code
sfc-gh-dmatthews Dec 18, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
18 changes: 17 additions & 1 deletion components/blocks/autofunction.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -85,16 +85,32 @@ const Autofunction = ({
);

pres.forEach((ele) => {
// Detect language based on pre element class
const isLiteralBlock = ele.classList.contains("literal-block");
const language = isLiteralBlock ? "bash" : "python";
const displayLanguage = isLiteralBlock ? "BASH" : "PYTHON";

const codeText = ele.innerHTML;
const preTag = ele.cloneNode(true);
const codeWrap = document.createElement("div");
codeWrap.setAttribute("class", styles.CodeBlockContainer);

// Create language header
const header = document.createElement("div");
header.setAttribute("class", `${styles.Header} code-block-header`);
const langSpan = document.createElement("span");
langSpan.setAttribute("class", styles.Language);
langSpan.textContent = displayLanguage;
header.appendChild(langSpan);

const codeTag = document.createElement("code");
codeTag.setAttribute("class", "language-python");
codeTag.setAttribute("class", `language-${language}`);
preTag.classList.add("line-numbers");
codeTag.innerHTML = codeText;
preTag.textContent = null;
preTag.appendChild(codeTag);

codeWrap.appendChild(header);
codeWrap.appendChild(preTag);
ele.replaceWith(codeWrap);
});
Expand Down
25 changes: 21 additions & 4 deletions components/blocks/autofunction.module.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,10 @@
@apply mt-6;
}

.Container h4 {
@apply mb-4;
}

.HeaderContainer {
@apply mb-6;
}
Expand Down Expand Up @@ -58,13 +62,26 @@
@apply mb-7 relative;
}

.Header {
@apply flex items-center px-3 py-1 bg-gray-20 text-gray-70 text-xs font-medium tracking-wide rounded-t-xl border-b border-gray-30;
min-height: 2.5rem;
}

:global(.dark) .Header {
@apply bg-gray-90 text-gray-50 border-gray-80;
}

.Language {
@apply uppercase tracking-wider pr-4;
}

.CodeBlockContainer pre,
.CodeBlockContainer code {
@apply overflow-auto max-w-full whitespace-pre;
}

.CodeBlockContainer pre {
@apply p-4 bg-gray-10 text-gray-80 font-medium rounded-xl relative leading-relaxed;
@apply p-6 bg-gray-10 text-gray-80 font-medium rounded-b-xl relative leading-relaxed;
}

.CodeBlockContainer pre code {
Expand All @@ -76,16 +93,16 @@
}

.CodeBlockContainer button {
@apply absolute top-2 right-2 cursor-pointer h-8 w-8 mb-0 flex items-center;
@apply absolute top-2 right-1 cursor-pointer h-8 w-8 mb-0 flex items-center justify-center;
}

.CodeBlockContainer button::before {
@apply absolute top-2 right-2 z-10 transition-all duration-75 hover:opacity-40;
@apply z-10 transition-all duration-75 hover:opacity-40;
content: url("/clipboard.svg");
}

.CodeBlockContainer button span {
@apply absolute right-10 text-gray-80 font-mono text-sm tracking-tight font-normal opacity-0;
@apply absolute -top-0.5 right-10 text-gray-80 font-mono text-sm tracking-tight font-normal opacity-0;
}

.CodeBlockContainer button:hover span {
Expand Down
62 changes: 58 additions & 4 deletions components/blocks/code.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,44 @@ import styles from "./code.module.css";
// Initialize the cache for imported languages.
const languageImports = new Map();

// Map language identifiers to display-friendly names
const languageDisplayNames = {
python: "Python",
javascript: "JavaScript",
js: "JavaScript",
typescript: "TypeScript",
ts: "TypeScript",
bash: "Bash",
sh: "Bash",
shell: "Shell",
json: "JSON",
yaml: "YAML",
yml: "YAML",
html: "HTML",
css: "CSS",
sql: "SQL",
toml: "TOML",
markdown: "Markdown",
md: "Markdown",
jsx: "JSX",
tsx: "TSX",
go: "Go",
rust: "Rust",
ruby: "Ruby",
java: "Java",
c: "C",
cpp: "C++",
csharp: "C#",
php: "PHP",
swift: "Swift",
kotlin: "Kotlin",
scala: "Scala",
r: "R",
docker: "Docker",
dockerfile: "Dockerfile",
none: "",
};

const Code = ({
code,
children,
Expand All @@ -29,7 +67,7 @@ const Code = ({
useEffect(() => {
// Get the language from the className, if it exists.
// Classname usually is `language-python`, `language-javascript`, `language-bash`, etc.
let importLanguage = children.props.className?.substring(9);
let importLanguage = children?.props?.className?.substring(9);

// If no language, default to Phython
if (importLanguage === undefined || importLanguage === "undefined") {
Expand Down Expand Up @@ -83,15 +121,29 @@ const Code = ({
languageClass = children.props.className;
}

// Extract language identifier for display
const langId = languageClass?.substring(9) || language || "python";
const displayLanguage = languageDisplayNames[langId] || langId;
const showLanguage = langId.toLowerCase() !== "none";

const Header = (
<div className={classNames(styles.Header, "code-block-header")}>
{showLanguage && (
Copy link
Contributor

@sfc-gh-bnisco sfc-gh-bnisco Dec 19, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

question: If showLanguage is false, then it looks like Header will just be a blank div with a height of 2.5rem. Is that expected?

Copy link
Contributor Author

@sfc-gh-dmatthews sfc-gh-dmatthews Dec 19, 2025 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The copy button should still be visible. (After the feature is merged, this should be a rare case because I will update the docs. IIRC, I will only use "None" for directory structures or text files, and I will add a "Directory structure" description or "requirements.txt" in those instances, which is the next PR.)

For example, this is a "None" example that will have a description enabled in the next PR.
image

<span className={styles.Language}>{displayLanguage}</span>
)}
</div>
);

if (img) {
ConditionalRendering = (
<section
className={classNames(styles.Container, {
[styles.NoCopyButton]: hideCopyButton,
})}
>
{Header}
<Image src={img} clean={true} />
<pre className={styles.Pre}>
<pre className={classNames(styles.Pre, styles.HasHeader)}>
<code ref={codeRef} className={languageClass}>
{customCode}
</code>
Expand All @@ -105,7 +157,8 @@ const Code = ({
[styles.NoCopyButton]: hideCopyButton,
})}
>
<pre data-line={lines}>
{Header}
<pre className={styles.HasHeader} data-line={lines}>
<code ref={codeRef} className={languageClass}>
{customCode}
</code>
Expand All @@ -119,7 +172,8 @@ const Code = ({
[styles.NoCopyButton]: hideCopyButton,
})}
>
<pre className={styles.Pre}>
{Header}
<pre className={classNames(styles.Pre, styles.HasHeader)}>
<code ref={codeRef} className={languageClass}>
{customCode}
</code>
Expand Down
23 changes: 20 additions & 3 deletions components/blocks/code.module.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,23 @@
@apply relative !important;
}

.Header {
@apply flex items-center px-3 py-1 bg-gray-20 text-gray-70 text-xs font-medium tracking-wide rounded-t-md border-b border-gray-30;
min-height: 2.5rem;
}

:global(.dark) .Header {
@apply bg-gray-90 text-gray-50 border-gray-80;
}

.Language {
@apply uppercase tracking-wider pr-4;
}

.HasHeader {
@apply rounded-t-none !important;
}

.Pre,
.Container code {
@apply overflow-auto max-w-full whitespace-pre;
Expand All @@ -29,16 +46,16 @@
@apply bg-gray-80 opacity-30 z-0;
}
.Container button {
@apply absolute top-2 right-2 cursor-pointer h-8 w-8 mb-0 flex items-center;
@apply absolute top-2 right-1 cursor-pointer h-8 w-8 mb-0 flex items-center justify-center;
}

.Container button::before {
@apply absolute top-2 right-2 z-10 transition-all duration-75 hover:opacity-40;
@apply z-10 transition-all duration-75 hover:opacity-40;
content: url("/clipboard.svg");
}

.Container button span {
@apply absolute right-10 text-gray-80 font-mono text-sm tracking-tight font-normal opacity-0;
@apply absolute -top-0.5 right-10 text-gray-80 font-mono text-sm tracking-tight font-normal opacity-0;
}

.Container button:hover span {
Expand Down
4 changes: 4 additions & 0 deletions components/blocks/refCard.module.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -153,6 +153,10 @@
@apply hidden;
}

.Container section :global(.code-block-header) {
@apply hidden !important;
Copy link

@sfc-gh-nbellante sfc-gh-nbellante Dec 18, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

question: is there a way to do this without the !important?

Copy link
Contributor Author

@sfc-gh-dmatthews sfc-gh-dmatthews Dec 19, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I struggled to get this apply. I tried hiding it at different levels, using different selectors, but had to end up with !important, but I could have missed something.

}

.Container section div {
@apply bg-gray-10;
@apply text-gray-80;
Expand Down