Skip to content
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.

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

feat(theme): add option to use language as title for code blocks #10809

Draft
wants to merge 1 commit into
base: main
Choose a base branch
from

Conversation

hichemfantar
Copy link
Contributor

@hichemfantar hichemfantar commented Jan 3, 2025

Pre-flight checklist

Motivation

Currently, Docusaurus renders the language specified in a codeblock as part of its syntax highlighting, but it doesn't allow using the language as the container title. This proposal suggests adding an option to display the codeblock's language as the title of the container for improved clarity and user experience.

When documenting code examples, it's often helpful to explicitly label the codeblocks with their language for better readability and context. While custom titles can be added using the title attribute in fenced codeblocks, it would be beneficial to have a built-in feature that automatically uses the language as the container title.

Test Plan

Test links

Deploy preview: https://deploy-preview-10809--docusaurus-2.netlify.app/

Related issues/PRs

#10808

@facebook-github-bot facebook-github-bot added the CLA Signed Signed Facebook CLA label Jan 3, 2025
Copy link

netlify bot commented Jan 3, 2025

[V2]

Built without sensitive environment variables

Name Link
🔨 Latest commit da08fb2
🔍 Latest deploy log https://app.netlify.com/sites/docusaurus-2/deploys/67772a9c85440e0008df2b0c
😎 Deploy Preview https://deploy-preview-10809--docusaurus-2.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site configuration.

Copy link

github-actions bot commented Jan 3, 2025

⚡️ Lighthouse report for the deploy preview of this PR

URL Performance Accessibility Best Practices SEO Report
/ 🟠 72 🟢 98 🟢 96 🟢 100 Report
/docs/installation 🟠 53 🟢 97 🟢 100 🟢 100 Report
/docs/category/getting-started 🟠 73 🟢 100 🟢 100 🟠 86 Report
/blog 🟠 64 🟢 96 🟢 100 🟠 86 Report
/blog/preparing-your-site-for-docusaurus-v3 🔴 47 🟢 92 🟢 100 🟢 100 Report
/blog/tags/release 🟠 63 🟢 96 🟢 100 🟠 86 Report
/blog/tags 🟠 74 🟢 100 🟢 100 🟠 86 Report

@hichemfantar
Copy link
Contributor Author

hichemfantar commented Jan 3, 2025

@slorber i could use your help understanding some of the failing jobs

Comment on lines +81 to +83
codeBlock: {
useLanguageAsTitle: false,
},
Copy link
Collaborator

Choose a reason for hiding this comment

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

CI fails because defining DEFAULT_CONFIG is not enough, you also have to declare a Joi schema and define defaults for themeConfig.codeBlock and themeConfig.codeBlock.useLanguageAsTitle otherwise users providing themeConfig: {} will not have these fields by default.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
CLA Signed Signed Facebook CLA
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Add Ability to Use Codeblock Language as Container Title
3 participants