Support tabs and copybutton in sphinx (#4717)

dependencies/develop.txt

@@ -12,6 +12,8 @@ pytest-cov
 rstcheck
 sphinx >= 4.5
 sphinx-argparse-nni >= 0.4.0
+sphinx-copybutton
 sphinx-gallery
+sphinx-tabs
 sphinxcontrib-bibtex
 git+https://github.com/bashtage/sphinx-material.git

docs/source/conf.py

@@ -56,6 +56,8 @@ extensions = [
     # 'nbsphinx',  # nbsphinx has conflicts with sphinx-gallery.
     'sphinx.ext.extlinks',
     'IPython.sphinxext.ipython_console_highlighting',
+    'sphinx_tabs.tabs',
+    'sphinx_copybutton',
 
     # Custom extensions in extension/ folder.
     'tutorial_links',  # this has to be after sphinx-gallery
@@ -118,6 +120,16 @@ sphinx_gallery_conf = {
     'default_thumb_file': os.path.join(os.path.dirname(__file__), '../img/thumbnails/nni_icon_blue.png'),
 }
 
+# Copybutton: strip and configure input prompts for code cells.
+copybutton_prompt_text = r">>> |\.\.\. |\$ |In \[\d*\]: | {2,5}\.\.\.: | {5,8}: "
+copybutton_prompt_is_regexp = True
+
+# Allow additional builders to be considered compatible.
+sphinx_tabs_valid_builders = ['linkcheck']
+
+# Disallow the sphinx tabs css from loading.
+sphinx_tabs_disable_css_loading = True
+
 # Some tutorials might need to appear more than once in toc.
 # In this list, we make source/target tutorial pairs.
 # Each "source" tutorial rst will be copied to "target" tutorials.

docs/source/experiment/_tabs_example.rst

+:orphan:
+
+Tabs Example
+============
+
+Please delete this file when it accomplishes its mission.
+
+.. tabs::
+
+   .. tab:: Apples
+
+      Apples are green, or sometimes red.
+
+   .. tab:: Pears
+
+      Pears are green.
+
+   .. tab:: Oranges
+
+      Oranges are orange.
+
+
+.. tabs::
+
+   .. group-tab:: Linux
+
+      Linux tab content - tab set 1
+
+   .. group-tab:: Mac OSX
+
+      Mac OSX tab content - tab set 1
+
+   .. group-tab:: Windows
+
+      Windows tab content - tab set 1
+
+.. tabs::
+
+   .. group-tab:: Linux
+
+      Linux tab content - tab set 2
+
+   .. group-tab:: Mac OSX
+
+      Mac OSX tab content - tab set 2
+
+   .. group-tab:: Windows
+
+      Windows tab content - tab set 2
+
+
+
+.. tabs::
+
+   .. code-tab:: c
+
+         C Main Function
+
+   .. code-tab:: c++
+
+         C++ Main Function
+
+   .. code-tab:: py
+
+         Python Main Function
+
+   .. code-tab:: java
+
+         Java Main Function
+
+   .. code-tab:: julia
+
+         Julia Main Function
+
+   .. code-tab:: fortran
+
+         Fortran Main Function
+
+   .. code-tab:: r R
+
+         R Main Function
+
+.. tabs::
+
+   .. code-tab:: c
+
+         int main(const int argc, const char **argv) {
+         return 0;
+         }
+
+   .. code-tab:: c++
+
+         int main(const int argc, const char **argv) {
+         return 0;
+         }
+
+   .. code-tab:: py
+
+         def main():
+            return
+
+   .. code-tab:: java
+
+         class Main {
+            public static void main(String[] args) {
+            }
+         }
+
+   .. code-tab:: julia
+
+         function main()
+         end
+
+   .. code-tab:: fortran
+
+         PROGRAM main
+         END PROGRAM main
+
+   .. code-tab:: r R
+
+         main <- function() {
+            return(0)
+         }
\ No newline at end of file

docs/static/css/material_custom.css

@@ -217,3 +217,69 @@ dt:target {
     padding-top: 0.5rem !important;
     scroll-margin-top: 3.5rem;
 }
+
+/* Override style for copy button */
+button.copybtn {
+    opacity: 1 !important;
+}
+
+.o-tooltip--left:after {
+    transform: translateX(-5%) translateY(-125%) !important;
+    padding: .4em;
+    font-size: .5rem;
+    font-weight: 600;
+    background: #5f6368;
+}
+
+.o-tooltip--left:hover:after {
+    transform: translateX(-5%) translateY(-120%) !important;
+}
+
+/* Sphinx tabs */
+/* Copied from https://github.com/executablebooks/sphinx-tabs/blob/master/sphinx_tabs/static/tabs.css with modifications */
+.sphinx-tabs.container {
+    margin-bottom: 1rem;
+    border: 1px solid rgb(232, 234, 237);
+    border-radius: 8px;
+}
+
+[role="tablist"] {
+    padding: .3rem 0 0 0;
+    border-bottom: 1px solid #a0b3bf;
+}
+
+.sphinx-tabs-tab {
+    position: relative;
+    line-height: 2rem;
+    font-weight: 600;
+    padding: 0 1rem;
+    color: #80868b;
+}
+
+.sphinx-tabs-tab[aria-selected="true"] {
+    color: #3f51b5;                     /* primary color */
+    border-bottom: 2px solid #3f51b5;
+}
+
+.sphinx-tabs-tab:focus {
+    z-index: 1;
+    outline-offset: 1px;
+}
+
+.sphinx-tabs-panel {
+    position: relative;
+    padding: 1rem;
+}
+
+.sphinx-tabs-panel.code-tab {
+    padding: 0;
+}
+
+.sphinx-tabs-panel.code-tab .highlight {
+    margin: 0;
+    padding: .5rem;
+}
+
+.sphinx-tab img {
+    margin-bottom: 2rem;
+}