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)
- Usage of polyfill configuration throws error HOT 6
- Code block highlighting in combination with showLineNumbers not rendering correctly HOT 1
- TOC items don't show words when they come from components HOT 2
- TOC shows comments in headings HOT 2
- HTML email addresses get rendered as nested links, ignoring `href` attribute HOT 2
- Allow codeblocks to show only part of the content HOT 2
- Broken anchors: page not scroll to the right section HOT 8
- Index pages cannot be generated with an automatically generated siderbar HOT 1
- Document solution to "docs last update" date being rendered incorrectly when published through Vercel
- Customizing admonitions not work HOT 3
- When testing on StrictMode, the bar remains on the top HOT 1
- Node.js building getting stuck HOT 2
- Updating to @mdx-js/react 3.0.1 causes admonition blocks to stop rendering colored box HOT 8
- The <!--truncate--> line in my long blog post on the initialized website is not causing the blog post size to be limited. HOT 1
- Add trailing slash to auto generated sitemap.xml for directories only HOT 3
- blogTitle not working HOT 4
- Algolia Contextual Search Generates Incorrect FaceFilters HOT 6
- Multi-Instance Routes Not Working in v3.2.1 HOT 3
- Home page renders twice, one below the other. HOT 1
- Details elements aren't searchable - a11y issue HOT 8
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.