Fix code block copy button #1385
Conversation
sfc-gh-dmatthews
requested review from
sfc-gh-kmcgrady and
sfc-gh-tteixeira
as code owners
sfc-gh-dmatthews
requested review from
a team
and removed request for
sfc-gh-kmcgrady
|
Just noticed an unintended side effect on code blocks on the API reference page After
Before
|
|
Thanks @snehankekre! This was a little fiddly, but I think I have a fix. However, it's a little cleaner to change all the code blocks with the theme instead of just RefCards, but if it's design-vetoed, I can move the color changes into more special-casing in the RefCard CSS. |
sfc-gh-dmatthews
added
platform
javascript
* feature/code-block-language-header * Include none language * Debug none language * Hide language when none * Use right padding * Add header to Autofunctio code
* feature/code-block-description * Filename color * Replace language with filename; optionally both * Revert content changes * Revert more content changes
* feature/code-block-description * Filename color * Replace language with filename; optionally both * Revert content changes * Revert more content changes * feature/try-it-code-block-button * Use named target * Design edits * Fix gray code header in dark mode * Remove filename * Design tweaks * Update Autofunction code block to match
|
Ok, I took a design pass and also did a tiny bit of refactoring to avoid some code duplication and to address hydration errors. One thing: I returned the code blocks to the old dark style (even in light mode). I found the colors just weren't working, and would take a lot more finagling to make them work. So this felt like the simpler solution. Besides, I think they look really distinctive this way! PTAL |
|
Oh, I also added support for hiding the header bar of a code block. Just use |
pages/[...slug].js
Outdated
|
|
||
| if (metaString) { | ||
| // Supported boolean flags (standalone words) | ||
| const booleanFlags = ["try", "showAll", "hideCopyButton"]; |
There was a problem hiding this comment.
| const booleanFlags = ["try", "showAll", "hideCopyButton"]; | |
| const booleanFlags = ["try", "showAll", "hideCopyButton", "hideHeader"]; |
@sfc-gh-tteixeira We need to keep this section of [...slug].js in sync with <Code> as well. There's probably a way to fix it with IDE extensions, but for a basic Markdown setup, you can see code highlighting in your IDE with the native Markdown blocks but not our custom <Code> block. Hence, I prefer to use the native Markdown block to the extent possible.
There was a problem hiding this comment.
I don't really understand what you're saying here. Can you clarify?
There was a problem hiding this comment.
You can configure the Markdown parsing to accept arguments and flags for code blocks. In the IDE, this makes for a better experience (both in terms of overall format and for syntax highlighting).
Use a Markdown block (which is interpreted/rendered with <Code>):
Use <Code> directly:
There was a problem hiding this comment.
This edit allows:
```python hideHeader
foo
```
📚 Context
The copy button is missing from codeblocks (except those that are inside of docstrings). This PR fixes that and adds a parameter to optionally hide the copy button, such as for blocks used to show file structures.
🧠 Description of Changes
After
Before
Contribution License Agreement
By submitting this pull request you agree that all contributions to this project are made under the Apache 2.0 license.