Feature request: Tabbed code blocks
Nobody has claimed this yet.
- Dominant language
- JavaScript
- Stars
- 13k
- Forks
- 1.4k
- Avg merge
- 15h 36m
- Merged PRs (30d)
- 3
Description
Motivation
It would be super nice to create code blocks with a tabbed pane, e.g. for different programming languages as done here.
Description
Multiple prims code blocks can be merged in a single tabbed pane with the corresponding programming language as tab header caption by default but also customizable.
Alternatives
Currently I use a workaround for this by creating a div around the code blocks I want to merge in a tabbed pane as
<div class"tabbed">
code-block 1
code block 2
</div>
Further, I create the tab header and hide/show the corresponding code blocks with a complete hook on Prism as you can find here prism-custom.js.
Encapsulating the code blocks can may be achieved more handy than my solution with <div class"tabbed">. I am open for any suggestions 🙌
- I may be able to implement this feature as a plugin.
Contributor guide
No contributing guide indexed for this repository
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Review the linked prism-custom.js workaround and the tabbed-pane example first, including the use of Prism's complete hook. Then determine where a plugin could group multiple code blocks and support default or customizable tab captions. Done means the requested tabbed presentation is defined well enough to replace the current external workaround.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- javascript
- Domain
- frontend, web-dev
- Issue type
- Feature
- Difficulty
- 5/5
- Estimated time
- Over a week
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 35/100