GithubHelp home page GithubHelp logo

Comments (8)

jonathaningram avatar jonathaningram commented on April 23, 2024 12

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:

image

image

Edit:

One problem as it stands is that this doesn't account for versioning:

  1. docs/** are not copied when versioning. Hoping that #705 resolves this
  2. the versioned_docs/**/*.md files are going to have filetabs fences that refer to the latest/master set of files. Need to figure out how this would be handled. Ideally filetabs 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 the file relative to the project root.

from docusaurus.

jonathaningram avatar jonathaningram commented on April 23, 2024 4

@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:

image

from docusaurus.

ForbesLindesay avatar ForbesLindesay commented on April 23, 2024 3

I like the idea of just having multiple code blocks, one after another, with no text between them:

screen shot 2018-03-02 at 18 10 12

from docusaurus.

stevenzeck avatar stevenzeck commented on April 23, 2024 2

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.

yangshun avatar yangshun commented on April 23, 2024 1

@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.

Glavin001 avatar Glavin001 commented on April 23, 2024

What would be a good syntax for code blocks with language toggling?

image

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.

fiennyangeln avatar fiennyangeln commented on April 23, 2024

Hi I'm interested in this issue. Is it an appropriate bug to work on?

from docusaurus.

JoelMarcey avatar JoelMarcey commented on April 23, 2024

@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)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo 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.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.