Chapter 2Markdown and Shortcodes

This is a showcase of Markdown and Shortcodes that can be used in this theme.

2.1Markdown

2.2Header 2

Header 3

Header 4

Header 5
Header 6

Text

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Bulleted Lists

Numbered Lists

  1. AAA
  2. BBB
  3. CCC
    1. AAA
    2. BBB
    3. CCC
      • AAA
      • BBB
  4. DDD
  5. EEE

Link to Google .

Table

Please also refer to include for more advanced table expressions.

No.itemnote
1AAAnoteA
2BBBnoteB
3CCCnoteC

Quote

This is a quote.

Inline Code

inlinecode.

Code Block

Formatted text.

Formatted text.

// comment
if (a == b)
{
  return true;
}

Footnote

This is a reference to Google1. Here is a footnote reference,2

Horizontal Rule

Italic

italic

Bold

bold

Strikethrough

strikethrough

MathJax

Inline math expressions are written as $y = ax^2 + \frac{b}{c}$. To enable inline math expressions, math: true needs to be added in the front matter.

Block math expressions are written as math code blocks.

$$ \frac{\pi}{2} = \left( \int_{0}^{\infty} \frac{\sin x}{\sqrt{x}} dx \right)^2 = \sum_{k=0}^{\infty} \frac{(2k)!}{2^{2k}(k!)^2} \frac{1}{2k+1} = \prod_{k=1}^{\infty} \frac{4k^2}{4k^2 - 1} $$

Mermaid

mermaid code blocks are rendered as diagrams written in Mermaid .

sequenceDiagram Alice->>Bob: Hello Bob. Bob-->>Alice: Hello Alice.

Images

Regular Image

Image without alternate text.

Inline

Display a small image inline.

Figure

When an alternate text is provided, a figure number and caption will be attached.

2.Screenshot of exampleSite

2.Screenshot of Configuration directory

If an alternate text contains only whitespace, no figure number or caption will be attached, and it will be centered.

Changing image size (adding attributes)

By adding attributes as URL query parameters, you can resize images or add borders.

![border=10 & width=50%](assets/2021-02-28-22-21-35.png?border=10&width=50%)

2.border=10 & width=50%

2.3Shortcodes

ShowIf

Specify the part to be rendered when it is enumerated in showIfs in config.toml. The following block is rendered when showIfs = ["edition1"].

{{% ShowIf edition1 %}}
Content to be displayed if supporting xxx is written here.
{{% /ShowIf %}}

For more information, see Editions .

HideIf

Specify the part that is “not” rendered when it is enumerated in showIfs in config.toml. The following block will not be rendered when showIfs = ["edition1"].

{{% HideIf edition1 %}}
This part will only be hidden when it is edition1.
{{% /HIdeIf %}}

For more information, see Editions .

note

The part surrounded by the note shortcode is rendered as a note.

{{% note %}}
This is where the note article is written.
{{% /note %}}
Note

This is where the note article is written.

You can also specify a title as an argument in the format of note (title). You can also write Markdown inside the note.

{{% note "Warning!" %}}
This is where the note article is written.

* Markdown is also possible
  * List level 2
* List level 1
{{% /note %}}
Warning!

This is where the note article is written.

  • Markdown is also possible

    • List level 2

  • List level 1

now

Outputs the timestamp at the time of build execution in the specified format. The format should be based on the date and time of 2006/1/2 15:04:05 Mon

{{% now "2006/01/02" %}}
{{% now "2006-1-2 15:04" %}}

2024/08/31
2024-8-31 11:10

include

You can prepare “components” of Markdown files and csv files in advance and “insert” them anywhere in the article by specifying the relative path starting . for loading.

{{< include "./test.csv"  >}} # /(md file dir path)/test.csv

In addition, if you place the component files in /content/<language>/_include, you can include them as follows:

{{< include "test_en.md"  >}} # /content/en/_include/test_en.md
{{< include "/sample/sample_en.md" >}} # /content/en/_include/sample/sample_en.md
{{< include "test_en.csv"  >}} # /content/en/_include/test_en.csv

include csv

When including a csv file, you can draw a more advanced table than Markdown.

{{< include 
      src="./rich.csv" # path to source file
      caption="Sample Table" # caption
      class="gray"      # class attribute added to the table. If unspecified, defaults to "simple"
      markdown=true     # if true, renders markdown inside the table. Defaults to false
      head=1         # if true, treats the first row as a header. Defaults to true. If a number, treats that number of rows as the header.
      align="left"  # align the table left/center/right. left / center / right
      head_align="center" # align all columns in the header of the table left/center/right. left / center / right
      body_align="left" # align all columns in the body of the table left/center/right. left / center / right
      width="90%"       # sets the width attribute of the table.
>}}
Table 2.Sample Table
id
category
name
notes
001
fruit
apple
002
orange
  • setoka
  • kanpei
003
grape
delaware
004
snacks
potato chips
  • Plain
  • Salt and Vineger
005
candy
  • orange
  • grape

CSV Format

Merge Rows and Columns

You can merge rows vertically using || and horizontally using ->. You can also merge cells with the right cell using <- (indent expression).

No
Item
Content
1
Main Item 1
Sub Item 1-1
Content 1-1
Sub Item 1-2
Content 1-2
2
Main Item 2
Sub Item 2-1
Content 2-1
Sub Item 2-2
Content 2-2
ColumnCodes

You can embed ColumnCodes in the header (last row if multiple) to apply them to the column. ColumnCodes are codes in the format [[@<identifier>=<value>]]. They apply to the column by adding them to the end of the header cell. If you want to apply multiple codes, you can write them as [[@<identifier>=<value> @<identifier>=<value>]] separated by spaces. Here is a list of ColumnCodes.

ColumnCodesDescription
[[@id=myId]]Embeds myColumnId as the class attribute in all <td> tags in this column.
[[@w=20%]]Sets the width of this column to 20% of the table. Columns without this code are treated as auto. If any of these codes exist, the width_ratio option in the include shortcode is ignored.
[[@h:--]] / [[@h:--:]] / [[@h--:]]Aligns header text to the left/center/right (the number of - is arbitrary).
[[@:--]] / [[@:--:]] / [[@--:]]Aligns body text to the left/center/right (the number of - is arbitrary).

2.rich.csv

Reference Specific Values in CSV

You can also reference specific values in a CSV file by specifying a key to determine the row and a column name. The leftmost column is used as the key. If there are duplicate values, the first one found takes precedence.

{{< include "test_ja.csv" "003" "Name" >}} # Value in the "Name" column of the row matching "003" in /content/en/_include/test_en.csv

In the above example, the value in the Name column of the row where the first column value is 003 is inserted into the shortcode’s position.

PDFParam

Values such as doctitle and author described in the front matter of _pdf.md can be embedded in the document.

{{% PDFParam doctitle %}}
{{% PDFParam subtitle %}}
{{% PDFParam author %}}

Hugo-theme-vivliocli
User Guide
mochimo

  1. This is a footnote text https://www.google.com/  ↩︎

  2. Here is the footnote. ↩︎