Dvc.org: md: support displaying command snippets with tabs

[dashohoxha]

Extracted from https://github.com/iterative/dvc.org/issues/698#issuecomment-546284166 +

It would be nice to display command snippets with tabs "Linux/Mac" and "Windows", if they are different (similar to this example: https://dagshub.com/docs/pipeline/#featurization-or-pre-processing).

This page has some ideas about how it can be done: https://stackoverflow.com/questions/37606292/how-to-create-tabbed-code-blocks-in-mkdocs-or-sphinx
This one also has an example (class="codetabs"): https://raw.githubusercontent.com/apache/spark/master/docs/quick-start.md

We might try a syntax like this:

` dvc
```Linux/Mac
$ cat .gitignore

```Windows
$ type .gitignore

````
`````

There are 4 backticks for the enclosing dvc block. It is a valid markdown syntax and normally it would render like this:

`dvc Linux/Mac
$ cat .gitignore

```Windows
$ type .gitignore

````

The engine should render it with tabs, but even with normal markdown rendering it would appear somewhat acceptable.

[dashohoxha]

I am not sure how many users are using DVC on Windows, but it seems that there is a workaround by using a POSIX-like command line shell: https://dvc.org/doc/user-guide/running-dvc-on-windows#posix-like-command-line-shell
So, I would say that the priority of this issue is nice-to-have.

[jorgeorpinel]

at least one Windows user recently reported confusion that would be cleared with this improvement. See https://discordapp.com/channels/485586884165107732/485596304961962003/647534970272743424

[jorgeorpinel]

In order to move away from the research phase here, what do we need to decide? I think these are the questions:

1. What platforms/tabs will we support?
   I agree that 2 suffice: Linux/Mac terminal, and Windows cmd.
2. What format will we use in Markdon files to provide the different command samples?
   Here I think we just need to use new highlight formats like the ones suggested above. I'd go for POSIX and cmd though. I don't think we need to nest them in dvc blocks though, we can just add them one after the other and show only the one corresponding to the user's platform. (Not hiding lonely blocks)
3. How do we determine the user's platform?
   Obviously there should be a tab system so it can be chosen manually, but it could also be detected automatically via browser (defaulting to POSIX).

Thoughts @dashohoxha @shcheklein @leehanchung?

[jorgeorpinel]

I don't think we need to nest them in dvc blocks though, we can just add them one after the other and show only the one corresponding to the user's platform.

BTW that's basically the syntax for the tool mentioned in https://github.com/iterative/dvc.org/issues/698#issuecomment-546284166: Superfences (for MkDocs). It's open source code is also Python so maybe we can use it as base for our own functionality. See facelessuser/pymdown-extensions/.../pymdownx/superfences.py file (probably class SuperFencesTabPostProcessor).