Group Code Blocks into Tabs
===========================

Here is an example showing grouping code blocks into three tabs.

Example
-------

Let's implement :math:`a+b`. We first show instructions, then
demonstrate the codes.



.. raw:: html

     <div class="mdl-tabs mdl-js-tabs mdl-js-ripple-effect"><div class="mdl-tabs__tab-bar text"><a href="#python-1-0" onclick="tagClick('python'); return false;" class="mdl-tabs__tab is-active">python</a><a href="#numpy-1-1" onclick="tagClick('numpy'); return false;" class="mdl-tabs__tab ">numpy</a><a href="#cpython-1-2" onclick="tagClick('cpython'); return false;" class="mdl-tabs__tab ">cpython</a></div>



.. raw:: html

     <div class="mdl-tabs__panel is-active" id="python-1-0">

You need to have python installed

.. raw:: latex

   \diilbookstyleinputcell

.. code:: python

    a = [1,1,1]
    b = [2,2,2]
    [ia+ib for ia, ib in zip(a,b)]




.. raw:: latex

   \diilbookstyleoutputcell

.. parsed-literal::
    :class: output

    [3, 3, 3]





.. raw:: html

     </div>



.. raw:: html

     <div class="mdl-tabs__panel " id="numpy-1-1">

You can install numpy by

.. raw:: latex

   \diilbookstyleinputcell

.. code:: bash

    pip install numpy

.. raw:: latex

   \diilbookstyleinputcell

.. code:: python

    import numpy as np
    
    a = np.ones(3)
    b = np.ones(3)*2
    a + b




.. raw:: latex

   \diilbookstyleoutputcell

.. parsed-literal::
    :class: output

    array([3., 3., 3.])





.. raw:: html

     </div>



.. raw:: html

     <div class="mdl-tabs__panel " id="cpython-1-2">

Please install cpython

.. raw:: latex

   \diilbookstyleinputcell

.. code:: python

    # Just a place holder
    print(1+2)


.. raw:: latex

   \diilbookstyleoutputcell

.. parsed-literal::
    :class: output

    3




.. raw:: html

     </div>



.. raw:: html

     </div>

Next let's implement :math:`a - b`



.. raw:: html

     <div class="mdl-tabs mdl-js-tabs mdl-js-ripple-effect"><div class="mdl-tabs__tab-bar code"><a href="#python-3-0" onclick="tagClick('python'); return false;" class="mdl-tabs__tab is-active">python</a><a href="#numpy-3-1" onclick="tagClick('numpy'); return false;" class="mdl-tabs__tab ">numpy</a></div>



.. raw:: html

     <div class="mdl-tabs__panel is-active" id="python-3-0">

.. raw:: latex

   \diilbookstyleinputcell

.. code:: python

    a = [1,1,1]
    b = [2,2,2]
    [ia-ib for ia, ib in zip(a,b)]




.. raw:: latex

   \diilbookstyleoutputcell

.. parsed-literal::
    :class: output

    [-1, -1, -1]





.. raw:: html

     </div>



.. raw:: html

     <div class="mdl-tabs__panel " id="numpy-3-1">

.. raw:: latex

   \diilbookstyleinputcell

.. code:: python

    a = np.ones(3)
    b = np.ones(3)*2
    a - b




.. raw:: latex

   \diilbookstyleoutputcell

.. parsed-literal::
    :class: output

    array([-1., -1., -1.])





.. raw:: html

     </div>



.. raw:: html

     </div>

Usages
------

To enable multi-tabs, first configure the ``tabs`` entry in the
``config.ini`` file. For example, here we use
``tabs = python, numpy, cpython``. ``python`` is the default tab. To
specify a code block that doesn't belong to the default tab, add
``#@tab``, followed by the tab name (case insensitive), in the first
line of the code block.

Sometimes these codes blocks conflict with each others. We can activate
one tab at a time, so only code blocks belong to this tab can be
evaluated in Jupyter. For example

.. raw:: latex

   \diilbookstyleinputcell

.. code:: bash

    d2lbook activate default user/code_tabs.md  # activate the default tab
    d2lbook activate numpy user/code_tabs.md    # activate the numpy tab
    d2lbook activate all user/code_tabs.md      # activate all tabs