Congoでよく使うShortcodesをまとめてみた

HugoのCongoテーマにてよく使いそうなシンタックスをまとめてみました。

テキスト装飾系 #

アラート #

使用例:

注意！ このコードは自己責任で活用ください。

{{< alert >}}
**注意！** このコードは自己責任で活用ください。
{{< /alert >}}

Twitterのフォローよろしく！

{{< alert "twitter" >}}
Twitterの[フォロー](https://twitter.com/nuevocs)よろしく！
{{< /alert >}}

注意！ このコードは自己責任で活用ください。

{{< alert "twitter" >}}
**注意！** このコードは自己責任で活用ください。
{{< /alert >}}

引用 #

Don’t communicate by sharing memory, share memory by communicating.
— Rob Pike¹

テーブル #

Tables aren’t part of the core Markdown spec, but Hugo supports supports them out-of-the-box.

Name	Age
Bob	27
Alice	23

| Name  | Age |
| ----- | --- |
| Bob   | 27  |
| Alice | 23  |

テーブルとスタイル

Italics	Bold	Code
italics	bold	`code`

| Italics   | Bold     | Code   |
| --------- | -------- | ------ |
| _italics_ | **bold** | `code` |

バッジ #

使用例:

新しい記事です。

{{< badge >}}
新しい記事です。
{{< /badge >}}

Gihubにアクセスする

{{< badge >}}
Gihubにアクセスする
{{< /badge >}}

ボタン #

Parameter	Description
`href`	The URL that the button should link to.
`target`	The target of the link.
`download`	Whether browser should download the resource rather than navigate to the URL. The value of this parameter will be the name of the downloaded file.

Example:

ダウンロード

{{< button href="#button" target="_self" >}}
ダウンロード
{{< /button >}}

サードパーティ（Youtube / Twitter / Gist） #

Youtube #

{{< youtube ZJthWmvUzzc >}}

Twitter #

“In addition to being more logical, asymmetry has the advantage that its complete appearance is far more optically effective than symmetry.”
— Jan Tschichold pic.twitter.com/gcv7SrhvJb
— Design Reviewed | Graphic Design History (@DesignReviewed) January 17, 2019

{{< twitter_simple user="DesignReviewed" id="1085870671291310081" >}}

Gist #

{{< gist nuevocs 1a47878c7abc6e6aea55bf8901c8dbad >}}

コード関係 #

ベーシックコード #

import numpy as np
np.arange(2,4)

{{< highlight python >}}
import numpy as np
np.arange(2,4)
{{< /highlight >}}

コードハイライティング #

1
2
<title>Example HTML5 Document</title>
Test

{{< highlight html "linenos=table,hl_lines=2" >}}
<title>Example HTML5 Document</title>
Test
{{< /highlight >}}

1
2
3
import pandas as pd
df = pd.read_csv("data.csv")
df.head()

{{< highlight python "linenos=table,hl_lines=3" >}}
import pandas as pd
df = pd.read_csv("data.csv")
df.head()
{{< /highlight >}}

チャート系 #

Example:

{{< chart >}}
type: 'bar',
data: {
  labels: ['Tomato', 'Blueberry', 'Banana', 'Lime', 'Orange'],
  datasets: [{
    label: '# of votes',
    data: [12, 19, 3, 5, 2, 3],
  }]
}
{{< /chart >}}

The above quote is excerpted from Rob Pike’s talk about nothing during Gopherfest, November 18, 2015. ↩︎