docs: use docusaurus-remark-plugin-tab-blocks to format tabs with code examples
#12859
Conversation
| @@ -25,9 +25,6 @@ import TOCInline from '@theme/TOCInline'; | |||
|
|
|||
| ## Reference | |||
|
|
|||
| import Tabs from '@theme/Tabs'; | |||
There was a problem hiding this comment.
The plugin will add these too.
|
One more complex case has to stay. Tabs wrap two pieces of code here, have to think how to make it work. Probably that is alright for now? |
|
Deploy preview looks perfectly fine. Nice. |
|
Was thinking how improve this plugin. Here is the plan:
|
|
Done! The plugin supports tabs with multiple code blocks (through
Also I added a test suite which runs before deploy. Felt like this is a good idea.
|
| // eslint-disable-next-line consistent-return | ||
| return index + tabs.length; |
There was a problem hiding this comment.
This return makes the visitor to skip traversing nodes which were just replaced with splice. Lint is complaining, but seems like all is good here.
The lint rule is turned off for ts and md files. Should apply for js only. It only prints a warning, so not sure if that is still useful. Perhaps?
| console.log('this is second JS codeblock in a tab'); | ||
| ``` | ||
|
|
||
| ```ts tab={"span":2} |
There was a problem hiding this comment.
I went for span, after considering group, include, next and something else. Sounded alright, but can be renamed as well. In a way, it defines a tab which spans two (or more) code blocks.
Also note that the next code block does not need any tab related meta data. Everything is configured through the first one.
| @@ -0,0 +1,126 @@ | |||
| /** | |||
There was a problem hiding this comment.
thoughts on publishing this outside of this repo?
There was a problem hiding this comment.
I was thinking this way. It became more universal than I though in the beginning. Sounds fun to publish it separately. Why not? I will do that ;D
mrazauskas
changed the title
docusaurus-remark-plugin-tab-blocks to format tabs with code examples
|
Indeed. In the end this is simple and nice. Thanks for the idea! |
|
This pull request has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs. |
From #12848 (comment)
Summary
As mentioned in the comment, I wrote a Remark plugin which helps to avoid boilerplate for js/ts tabs in documentation.
This would be incredibly useful in configuration page. So perhaps, let‘s land this PR first? (If it does the job, of course.)
Todo
TabsandTabItemelsewhere in docs.Test plan
Deploy preview.