Comments (8)
I actually hacked together a plugin called "file tabs" to do this. I just wanted to use docusaurus to quickly prototype something, so the plugin was meant to be quick and dirty. Source is here: https://github.com/govau/platforms-alpha/blob/master/lib/shared/fileTabs.js
Install into your site like this: https://github.com/govau/platforms-alpha/blob/master/tell/website/siteConfig.js#L52
And here's how you use it in your .md file:
```filetabs
file=website/blog/2018-06-13-docusaurus-file-tabs-plugin/example.cs lang=csharp label=C#
file=website/blog/2018-06-13-docusaurus-file-tabs-plugin/example.go lang=go label=Go
file=website/blog/2018-06-13-docusaurus-file-tabs-plugin/example.inline parser=md label=Java
file=website/blog/2018-06-13-docusaurus-file-tabs-plugin/example.js lang=js label=Node.js
file=website/blog/2018-06-13-docusaurus-file-tabs-plugin/example.php lang=php label=PHP
file=website/blog/2018-06-13-docusaurus-file-tabs-plugin/example.py lang=python label=Python
file=website/blog/2018-06-13-docusaurus-file-tabs-plugin/example.rb lang=ruby label=Ruby
```
And how it ends up looking:
Edit:
One problem as it stands is that this doesn't account for versioning:
- docs/** are not copied when versioning. Hoping that #705 resolves this
- the
versioned_docs/**/*.md
files are going to havefiletabs
fences that refer to the latest/master set of files. Need to figure out how this would be handled. Ideallyfiletabs
would work by having files be relative to the current file, but from memory when I tried doing that originally it didn't work and I needed to make thefile
relative to the project root.
from docusaurus.
@yangshun thanks! Yeah we'd probably publish as an npm package and then it could just be imported like any other old package, but for my case I didn't want to bother publishing a new package so I just needed to hack together a way to import it from multiple docusaurus instances.
And of course the tabs HTML and CSS would need to be cleaned up, verify accessibility, and so on.
Finally, I think the fence syntax is pretty neat, but would be good to validate that it's scalable too.
Oh, it actually lets you embed another MD file like this:
from docusaurus.
I like the idea of just having multiple code blocks, one after another, with no text between them:
from docusaurus.
A toggle would be very helpful. The one in the parse docs is great if you have a small list of languages, but if you have more than 5 it's hard to make it work. Perhaps use that if the number of languages is 3 or fewer and a select list otherwise?
from docusaurus.
@jonathaningram This looks amazing! I also like that the code is stored outside of the Markdown file. We'll look into including it! 😄
from docusaurus.
What would be a good syntax for code blocks with language toggling?
I am very interesting in trying to make a Pull Request for this. Before I get started, I'd appreciate some collaboration on the design :).
from docusaurus.
Hi I'm interested in this issue. Is it an appropriate bug to work on?
from docusaurus.
@fiennyangeln - I think this is quite appropriate. Language Toggling would be great and a feature that people really have asked for. And anything else you feel could improve the code blocks too.
I will mark this issue as claimed by you 😄
from docusaurus.
Related Issues (20)
- Invalid hook call when using react class component in MDX HOT 12
- RangeError: Invalid string length when building with a very large number of blogs HOT 7
- Broken link in a-tag not detected HOT 7
- Navbar: Menu Item: Caret / Arrow Is Invisible When Deployed On Azure SWA (using MSAL) HOT 2
- Duplicated whole page when accessing site by your-domain.com/index.html HOT 3
- [Accessibility]: Page looses focus after Search modal gets closed HOT 1
- Please Block the "Bruce's Wiki" at show case since contain the Malicious links HOT 2
- Place screenshots in the themes documentation page in the site HOT 2
- Passing custom props to IdealImage HOT 2
- Spaces are no longer valid in links HOT 4
- Cannot load docs from outside local package root when running as a Yarn workspace HOT 8
- Mermaid diagram shift page when opening a link with anchor HOT 1
- An error occurred when importing a global component. The component cannot be found HOT 1
- Error messages set to `vfile` by Remark plugins are not reported. HOT 1
- Use pure examples in github action deployment examples HOT 1
- When multiple i18n are configured, the plug-in will report an error when using the Link tag. HOT 1
- Can't find component when using NX and NPM Workspaces HOT 2
- Add comparison to vitepress HOT 2
- Module not found: Error: Can't resolve 'react-loadable' in '.../node_modules/@docusaurus/core/lib/client/exports' HOT 1
- BrowserOnly, lazy, and useHistory result in infinite re-rendering HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from docusaurus.