記載の方法について

2022-10-23 904 words 2 minutes

Contents

画像

Markdownでの記載方法は以下。

1
![](./img/index_2022-10-23-16-47-16.png)

VSCodeの拡張機能「Paste Image」を用いることで、上記の文字列を記載可能。
（ショートカットは、ctrl + alt + V。）

コード

1
select * from table;

記載方法は以下。

1
2
3
```
select * from table;
```

ちなみに```ブロックの中で、```を書くためには、外側のバッククォートを4つにする。

1
2
3
4
5
````
```sql
select * from table;
```
````

※参考資料

リンク

はてなのブログカード機能を用いる。

shortcodeを自作して用いる場合

・layouts/shortcodes/blogcard.htmlとして、以下のhtmlを作成する。

1
<iframe class="hatenablogcard" style="width:100%;height:155px;" src="https://hatenablog-parts.com/embed?url={{ .Get "url" }}" width="300" height="150" frameborder="0" scrolling="no"></iframe>

・記事内にて、shortcodeの形式で呼び出す。

1
{{< blogcard url="https://news.yahoo.co.jp/" >}}

ちなみに、ショートコードをそのまま記載するには、/* */を用いて、タグ<>を囲む。

1
{{</* blogcard url="https://news.yahoo.co.jp/" */>}}

※参考資料

ifameタグを逐一生成する場合

・Chromeに拡張機能「Create Link」を導入する。

Create Linkにて以下のformatを作成する。

1
<iframe class="hatenablogcard" style="width:100%;height:155px;margin:15px 0;" title="%title%" src="https://hatenablog-parts.com/embed?url=%url%" frameborder="0" scrolling="no"></iframe>

※参考資料

VSCodeのスニペット

shortcodeをスムーズに記載することができるように、VSCode上でスニペットの設定を行う。

1
2
3
4
5
6
{
	"hyperlink": {
		"prefix": "hyperlink",
		"body": "{{< blogcard url=\"$1\" >}}"
	}
}

※参考資料

更新日時

VSCodeの拡張機能「Insert Date String」を用いる。
Ctrl + Shift + I で日時が挿入される。

形式は、「Insert Date String: Format」の設定を、

1
YYYY-MM-DDThh:mm:ssZZZ

にすることで、hugoの形式になる。

その他

箇条書き

First
Second

1
2
- First
- Second

番号付きリスト

HTMLの<ol>（順序付きリスト要素）に相当。

番号付きリスト
番号付きリスト

書き方は以下。
数値と.（ドット）と半角スペースの後にリスト内容を記述する。

1
2
1. 番号付きリスト
1. 番号付きリスト

全ての行を「1」と書いていても、番号は、自動でインクリメントされる。

記載した内容の確認

ローカルでサーバー起動して記載内容を確認する。

1
hugo serve --disableFastRender -D

1
http://localhost:1313/

にて、どのように表示されるか確認できる。

※
サーバー起動しなくとも、VSCodeのmarkdownプレビュー機能にて、簡易的に確認することも可能。
ショートカットは、ctrl + K → V。