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)
- Imported SVGs incorrectly share the same fill definitions HOT 1
- `npx docusaurus --version` incorrect program termination status HOT 2
- Admonitions & Details do not work when importing partial mdx into a React page HOT 7
- Fail to upgrade to docusaurus3.5 with theme-search-algolia HOT 2
- Add Arabic translation HOT 1
- Lowercase descenders (`g`, `j`, `p`, `q`, and `y`) are cut off in blog author titles HOT 1
- Typecheck fails when updating to 3.5.0/3.5.1 HOT 3
- Search Issue with Hash Router HOT 10
- Support auto generating the sidebar alphabetically by label HOT 4
- Upgrade from 3.4.0 to 3.5.2 can't import { useDoc } from '@docusaurus/theme-common/internal'; HOT 5
- Blog section tags component background color taken from footer color HOT 2
- Add support for versioned sidebars which are `.js` not `.json` HOT 3
- How to upgrade for curl get method HOT 1
- Docs has wrong npm start command HOT 2
- Blog author social platforms shorthands are not normalized for inline authors
- Blog authors page bugs for authors with 0 posts HOT 4
- npm2yarn converts command incorrectly for PNPM HOT 1
- Blog authors page is not using baseUrl when rendering a relative author.image_url HOT 3
- Footer links are too wide in mobile view which leads to misclicks HOT 1
- [@docusaurus/plugin-client-redirects] Not working with external links HOT 6
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.