:description: General markups and how it looks like on Shibuya Sphinx theme.

Markups
=======

This article is a demo of what the typography of Shibuya looks like.
You will learn the syntax of reStructuredText, and to see the rendered
result of each markup.

Emphasis
--------

Content can have inline markup like *emphasis*, **strong emphasis**,
and ``inline code``.

- ``*emphasis*`` is usually in an *italic* style
- ``**strong emphasis**`` is usually in a **bold** style

Inline code
-----------

An inline code is surrounded by double ``backticks``::

    An inline code is surrounded by double ``backticks``

Links
-----

.. code-block:: rst
  :caption: links
  :class: demo-code

  In Sphinx, link is called reference. There are many ways to create
  a reference. For instance :pep:`8` is generated by ``:pep:`8```. In
  general, it is just a link_.

  .. _link: https://shibuya.lepture.com/

In Sphinx, link is called reference. There are many ways to create
a reference. For instance :pep:`8` is generated by ``:pep:`8```. In
general, it is just a link_.

.. _link: https://shibuya.lepture.com/


Interpreted Text
----------------

Interpreted text is text that is meant to be related, indexed,
linked, summarized, or otherwise processed. It is usually used
together with a **role**:

.. code-block:: rst

    :{role}:`interpreted text`

Subscript and Superscript
~~~~~~~~~~~~~~~~~~~~~~~~~

A :sub:`subscript` and :sup:`superscript` can be written with:

.. code-block:: rst

   :sub:`text in subscript`

   :sup:`text in superscript`

- A subscript looks like :sub:`text in subscript`
- A superscript looks like :sup:`text in superscript`

Abbreviations
~~~~~~~~~~~~~

.. code-block:: rst

  You can also include abbreviations like
  :abbr:`HTML (Hyper Text Markup Language)`.

You can also include abbreviations like
:abbr:`HTML (Hyper Text Markup Language)`.

Keyboard
~~~~~~~~

.. code-block:: rst

   :kbd:`Tab` means indent, :kbd:`Shift-Tab` means outdent.
   :kbd:`⌘+⇧+P` is power shortcuts in vscode.


:kbd:`Tab` means indent, :kbd:`Shift-Tab` means outdent.
:kbd:`⌘+⇧+P` is power shortcuts in vscode.

Menu Selection
~~~~~~~~~~~~~~~

Use ``menuselection`` to show menus:

.. code-block:: rst

    :menuselection:`My --> Software --> Some menu --> Some sub menu 1 --> Some sub menu 2 --> Some sub menu 3`

:menuselection:`My --> Software --> Some menu --> Some sub menu 1 --> Some sub menu 2 --> Some sub menu 3`


Thematic break
--------------

Bellow is a ``<hr>`` tag:

----

It is created by::

    ----

Sidebar
-------

.. sidebar:: Ch'ien / The Creative

    Lorem ipsum dolor sit amet consectetur adipisicing elit.

    .. image:: /_static/icon-light.svg

    Lorem ipsum dolor sit amet consectetur adipisicing elit.

Lorem ipsum dolor sit amet consectetur adipisicing elit. Accusamus, sunt
voluptatum tenetur libero nulla esse veritatis accusantium earum commodi hic
voluptatem officia culpa optio atque. Quaerat sed quibusdam ratione nam.

Lorem ipsum dolor sit amet consectetur adipisicing elit. Accusamus, sunt
voluptatum tenetur libero nulla esse veritatis accusantium earum commodi hic
voluptatem officia culpa optio atque. Quaerat sed quibusdam ratione nam.

Code with Sidebar
~~~~~~~~~~~~~~~~~

.. sidebar:: A code example

    With a sidebar on the right.

.. code-block:: python
    :caption: Code blocks can also have captions.
    :linenos:

    print("one")
    print("two")
    print("three")
    print("four")
    print("five")
    print("six")
    print("seven")
    print("eight")
    print("nine")
    print("ten")
    print("eleven")
    print("twelve")
    print("thirteen")
    print("fourteen")

Footnotes
---------

There are four ways to create a footnote item:

.. code-block:: rst

   a whole decimal number consisting of one or more digits, like [1]_

   a single "#" will create auto-numbered footnotes [#]_

   a "#" followed by a simple reference name [#note]_

   a single "*"  will create auto-symbol footnotes [*]_

   .. [1] footnote for ``[1]``
   .. [#] footnote for ``[#]``
   .. [#note] footnote for ``[#note]``
   .. [*] footnote for ``[*]``


a whole decimal number consisting of one or more digits, like [1]_

a single "#" will create auto-numbered footnotes [#]_

a "#" followed by a simple reference name [#note]_

a single "*"  will create auto-symbol footnotes [*]_

Citations
---------

Citations are identical to footnotes except that they use only non-numeric
labels such as ``[note]`` or ``[GVR2001]``.

.. code-block:: rst

   Here is a citation reference: [CIT2002]_.

   .. [CIT2002] This is the citation.  It's just like a footnote,
      except the label is textual.

Here is a citation reference: [CIT2002]_.

Reference
---------

Footnotes
~~~~~~~~~

.. [1] footnote for ``[1]``
.. [#] footnote for ``[#]``
.. [#note] footnote for ``[#note]``
.. [*] footnote for ``[*]``

Citations
~~~~~~~~~

.. [CIT2002] This is the citation.  It's just like a footnote,
   except the label is textual.