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

links

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.

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:

:{role}:`interpreted text`

Subscript and Superscript

A _subscript and ^superscript can be written with:

:sub:`text in subscript`

:sup:`text in superscript`

• A subscript looks like _{text in subscript}

• A superscript looks like ^{text in superscript}

Abbreviations

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

You can also include abbreviations like HTML.

Keyboard

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

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

Menu Selection

Use menuselection to show menus:

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

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

Ch’ien / The Creative

Lorem ipsum dolor sit amet consectetur adipisicing elit.

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

A code example

With a sidebar on the right.

Code blocks can also have captions.

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:

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 [2]

a “#” followed by a simple reference name [3]

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

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]

[2]

footnote for [#]

[3]

footnote for [#note]

[*]

footnote for [*]

Citations

[CIT2002]

This is the citation. It’s just like a footnote, except the label is textual.