ckeditor5 icon indicating copy to clipboard operation
ckeditor5 copied to clipboard

Feature Request: CkEditor5 [Markdown] Tabbed Code Blocks

Open sarahusoftheon opened this issue 3 years ago • 1 comments

📝 Provide a description of the new feature

Some Markdown/Documentation sites include a tabbed interface for code blocks, to display multiple code blocks concisely. It would be awesome to be able to do this via CkEditor!

What is the expected behavior of the proposed feature?

Click "Add Tabbed Code Block" button > Select the number of tabs + languages for each tab > the code block tab is inserted into the CkEditor window, and you can click between the tabs as you add your code in the CkEditor.

Example 1:

https://docs.readme.com/rdmd/docs/code-blocks

Markdown Syntax:

```javascript I'm A tab
console.log('Code Tab A');
```
```javascript I'm tab B
console.log('Code Tab B');
```

Renders:

image

Example 2:

https://www.npmjs.com/package/markdown-it-grouped-code-fence

Markdown Syntax:

```language [keyword-title]
```

Renders (live example): https://leetcode-opensource.github.io/markdown-it-grouped-code-fence/

Other Examples:

https://facelessuser.github.io/pymdown-extensions/extensions/tabbed/#syntax

https://squidfunk.github.io/mkdocs-material/reference/content-tabs/#usage


If you'd like to see this feature implemented, add a 👍 reaction to this post.

sarahusoftheon avatar Feb 13 '23 19:02 sarahusoftheon

There has been no activity on this issue for the past year. We've marked it as stale and will close it in 30 days. We understand it may still be relevant, so if you're interested in the solution, leave a comment or reaction under this issue.

CKEditorBot avatar Feb 20 '24 03:02 CKEditorBot

We've closed your issue due to inactivity. We understand that the issue may still be relevant. If so, feel free to open a new one (and link this issue to it).

CKEditorBot avatar Mar 21 '24 03:03 CKEditorBot