最終更新: 2024/5/27

更新履歴

2024/5/21

2024/5/22

研究室内のブログでは実はさまざまなMarkdown記法が利用可能です。
この記事を参照しながら色々利用してみてください！

Important

このブログでは研究室のブログで利用できる記法のみを記載しています。
より一般的なマークダウンの記法については
Qiita "Markdown記法チートシート"を確認してください。

テキストの装飾見出し「テキストの装飾」

ブログ内でテキストの見た目や構造を定義するための記法について紹介します

見出し見出し「見出し」

研究室ブログでは当然ですが、見出しタグを利用することができます。
また見出しタグを検出して目次を生成しているため、適切に見出しを利用することはとても大切です。
階層に応じてh1 ~ h6まで利用可能です。

# これはh1タグです
## これはh2タグです
###### これはh6タグです

Note

※ #の後ろに半角スペースが必要です。

出力

これはh1タグです

これはh2タグです

これはh6タグです

強調・強勢見出し「強調・強勢」

強調　強勢

_ か * で囲むとHTMLのemタグになります。ここでは *italic type* になります。
__ か ** で囲むとHTMLのstrongタグになります。ここでは **太字にアンダーライン** になります。

出力
_ か * で囲むとHTMLのemタグになります。ここでは italic type になります。
__ か ** で囲むとHTMLのstrongタグになります。ここでは 太字にアンダーライン になります。

打ち消し線見出し「打ち消し線」

~~打ち消し~~

打ち消し線を使うには ~~ で囲みます。 ~~打ち消し~~

出力
打ち消し線を使うには ~~ で囲みます。 ~~打ち消し~~

折りたたみ見出し「折りたたみ」

このブログではHTMLを直接書き込むことができます。
一例として折りたたみを紹介します。

<!-- open属性なし -->
<details><summary>サンプルコード（open属性なし）</summary>

初期状態では閉じています
</details>

<!-- open属性あり -->
<details open><summary>サンプルコード（open属性あり）</summary>

初期状態で開いています
</details>

出力

サンプルコード（open属性なし）

初期状態では閉じています

サンプルコード（open属性あり）

初期状態で開いています

補足・注意・警告見出し「補足・注意・警告」

次のように記述することで、アラートを表示することができます

> [!NOTE]
> 補足などのメッセージ

出力

Note

補足などのメッセージ

Tip

tipのメッセージ

Important

重要なメッセージ

Warning

警告のメッセージ

Caution

より強い警告のメッセージ

高橋研オリジナル見出し「高橋研オリジナル」

研究室ブログでは当研究室オリジナルのアラートブロックを挿入できます。

Memo

メモに利用できます

Hint

ヒントに利用できます

色・アイコン・タイトルをカスタマイズできます！見出し「色・アイコン・タイトルをカスタマイズできます！」

次のように記述することで、色・アイコン・タイトルを自由に利用することができます。

<!-- [!CUSTOM] [色] [アイコン] [タイトル] -->
> [!CUSTOM] purple rocket this is custom title
> カスタムアラートです

出力

this is custom title

カスタムアラートです

利用できる色一覧見出し「利用できる色一覧」

gray

pink

rose

red

orange

amber

yellow

lime

green

emerald

teal

cyan

sky

blue

indigo

violet

purple

fuchsia

利用できるアイコン一覧見出し「利用できるアイコン一覧」

accessibility:

accessibility_inset:

alert:

alert_fill:

apps:

archive:

arrow_both:

arrow_down:

arrow_down_left:

arrow_down_right:

arrow_left:

arrow_right:

arrow_switch:

arrow_up:

arrow_up_left:

arrow_up_right:

beaker:

bell:

bell_fill:

bell_slash:

blocked:

bold:

book:

bookmark:

bookmark_slash:

briefcase:

broadcast:

browser:

bug:

cache:

calendar:

check:

check_circle:

check_circle_fill:

checkbox:

checklist:

chevron_down:

chevron_left:

chevron_right:

chevron_up:

circle:

circle_slash:

clock:

clock_fill:

cloud:

cloud_offline:

code:

code_of_conduct:

code_review:

code_square:

codescan:

codescan_checkmark:

codespaces:

columns:

command_palette:

comment:

comment_discussion:

container:

copilot:

copilot_error:

copilot_warning:

copy:

cpu:

credit_card:

cross_reference:

dash:

database:

dependabot:

desktop_download:

device_camera:

device_camera_video:

device_desktop:

device_mobile:

devices:

diamond:

diff:

diff_added:

diff_ignored:

diff_modified:

diff_removed:

diff_renamed:

discussion_closed:

discussion_duplicate:

discussion_outdated:

dot:

dot_fill:

download:

duplicate:

ellipsis:

eye:

eye_closed:

feed_discussion:

feed_forked:

feed_heart:

feed_issue_closed:

feed_issue_draft:

feed_issue_open:

feed_issue_reopen:

feed_merged:

feed_person:

feed_plus:

feed_public:

feed_pull_req_closed:

feed_pull_req_draft:

feed_pull_req_open:

feed_repo:

feed_rocket:

feed_star:

feed_tag:

feed_trophy:

file:

file_added:

file_badge:

file_binary:

file_code:

file_diff:

file:

file_fill:

file_open_fill:

file_symlink:

file_moved:

file_removed:

file_submodule:

file_symlink_file:

file_zip:

filter:

filter_remove:

fiscal_host:

flame:

fold:

fold_down:

fold_up:

gear:

gift:

git_branch:

git_commit:

git_compare:

git_merge:

git_merge_queue:

git_pull_req:

git_pull_req_closed:

git_pull_req_draft:

globe:

goal:

grabber:

graph:

hash:

heading:

heart:

heart_fill:

history:

home:

horizontal_rule:

hourglass:

hubot:

id_badge:

image:

inbox:

infinity:

info:

issue_closed:

issue_draft:

issue_opened:

issue_reopened:

issue_tracked_by:

issue_tracks:

italic:

iterations:

kebab_horizontal:

key:

key_asterisk:

law:

light_bulb:

link:

link_external:

list_ordered:

list_unordered:

location:

lock:

log:

logo_gist:

logo_github:

mail:

mark_github:

markdown:

megaphone:

mention:

meter:

milestone:

mirror:

moon:

mortar_board:

move_to_bottom:

move_to_end:

move_to_start:

move_to_top:

multi_select:

mute:

no_entry:

north_star:

note:

number:

organization:

package:

package_dependency:

package_dependents:

paintbrush:

paper_airplane:

paperclip:

passkey_fill:

paste:

pencil:

people:

person:

person_add:

person_fill:

pin:

pin_slash:

pivot_column:

play:

plug:

plus:

plus_circle:

project:

project_roadmap:

project_symlink:

project_template:

pulse:

question:

quote:

read:

redo:

rel_file_path:

reply:

repo:

repo_clone:

repo_deleted:

repo_forked:

repo_locked:

repo_pull:

repo_push:

repo_template:

report:

rocket:

rows:

rss:

ruby:

screen_full:

screen_normal:

search:

server:

share_android:

shield:

shield_check:

shield_lock:

shield_slash:

shield_x:

sidebar_collapse:

sidebar_expand:

sign_in:

sign_out:

single_select:

skip:

skip_fill:

sliders:

smiley:

sort_asc:

sort_desc:

sparkle_fill:

sponsor_tiers:

square:

square_fill:

squirrel:

stack:

star:

star_fill:

stop:

stopwatch:

strikethrough:

sun:

sync:

tab_external:

table:

tag:

tasklist:

telescope:

telescope_fill:

terminal:

three_bars:

thumbsdown:

thumbsup:

tools:

tracked_completed:

tracked_not_planned:

trash:

triangle_down:

triangle_left:

triangle_right:

triangle_up:

trophy:

typography:

undo:

unfold:

unlink:

unlock:

unmute:

unread:

unverified:

upload:

verified:

versions:

video:

webhook:

workflow:

x_circle:

x_circle_fill:

zap:

zoom_in:

zoom_out:

ノート記法内でのMarkdown記法の使用見出し「ノート記法内でのMarkdown記法の使用」

現在ノート記法内でサポートしているMarkdown記法は以下となっています。

リスト
強調
打ち消し線
コードスパン
リンク
画像
コードブロック

リスト見出し「リスト」

このブログではリストも利用可能です。

順序なしリスト(箇条書きリスト)見出し「順序なしリスト(箇条書きリスト)」

文頭に* + -のいずれかをつけると順序なしリストとなります。
- ネストすることも可能です。

順序ありリスト見出し「順序ありリスト」

文頭に数字 + .をつけることで順序付きリストとなります。
1. ネストすることも可能です。

適切にインデントを入れることで次のようなリストも作成可能です。

番号付きリスト
番号付きリスト
1. ネストされた番号付きリスト
2. ネストされた番号付きリスト
  - こんなこともできる
3. ネストされた番号付きリスト
番号付きリスト

説明付きリスト見出し「説明付きリスト」

HTMLを直接書き込むことで説明付きのリストも作成可能です。

<dl>
  <dt>高橋先生</dt>
  <dd>教授</dd>
  <dt>狩川先生</dt>
  <dd>准教授</dd>
</dl>

出力

高橋先生: 教授
狩川先生: 准教授

チェックボックス見出し「チェックボックス」

順序なしリストの記号の後に[ ]を入力することでチェックボックスも利用できます。
[x]とすることでチェックが入ったチェックボックスにできます。

- [ ] タスク1
- [x] タスク2

出力

タスク1
タスク2

リンク見出し「リンク」

URLを埋め込んだ文字リンクを作成することができます。

[高橋・狩川研究室](https://www.takahashi.qse.tohoku.ac.jp)

出力
高橋・狩川研究室

またカーソルを乗せることで表示されるタイトルを指定することもできます。

[高橋・狩川研究室](https://www.takahashi.qse.tohoku.ac.jp "高橋・狩川研究室のホームページです")

出力
高橋・狩川研究室

また次のようにすることでリンクを使い回すことが可能です。

[ここ][tk-link] と [この][tk-link] リンクは同じになります。
[tk-link] という書き方もできます。

[tk-link]: https://www.takahashi.qse.tohoku.ac.jp

出力
こことこのリンクは同じになります。
tk-link という書き方もできます。

画像見出し「画像」

画像も利用することが可能です。
画像は基本的には他のブログで使いまわすことがないので、整理の観点からblog.mdと同一のディレクトリに格納してください。

## タイトルありの画像を埋め込む
![代替テキスト](画像のパス "画像タイトル")

## タイトル無しの画像を埋め込む
![代替テキスト](画像のパス)

出力
研究室ロゴ
基本的には画像は要素いっぱいに拡大して表示されます。
サイズを指定したい場合にはHTMLを直接埋め込みます。

<img style="width: 80px;" src="/Logo2020_black.png">

出力

脚注見出し「脚注」

文章中に`[^1]`のように記述し、脚注のリンク[^1]を作成することができます。数字ではなく文字列でも可能です。

[^1]: 上付き文字がここへのリンクとなります。

結果
文章中に[^1]のように記述し、脚注のリンク¹を作成することができます。数字ではなく文字列でも可能です。

Note

脚注は必ずしも文末にまとめて書く必要はありません。どこに書いてもブログ上では最末尾に表示されます。

コード見出し「コード」

ブログの文中にコードを埋め込むことができます。

インラインコード見出し「インラインコード」

文章中にコードを表示するものです。強調と同じような使い方も可能です。
インラインにしたい部分を`(バッククオート)で囲みます。

`print("Hello, World!")`

出力
print("Hello, World!")

インラインコード内でバッククオートを利用したいときは、利用したいバッククオートとは異なる数の` で囲います

` `` ` や `` ` `` や ``` `` ``` など

出力
`` や ` や `` など

コードブロック見出し「コードブロック」

実はすでに上でいくつも登場していますが、コードプロックを挿入することも可能です。

```
`や~を利用して囲むことでコードブロックを挿入できます。
```

出力

`や~を利用して囲むことでコードブロックを挿入できます。

シンタックスハイライト見出し「シンタックスハイライト」

コードブロック内に記述している言語を指定することで、シンタックスハイライトを利用できます。

Note

~~現状なぜかインデントを反映することができません。コードを書く際にはしっかりインデントしましょう。~~
できるようになりました！

```c multiply.c
#include <stdio.h>

// 掛け算を行う関数
int multiply(int a, int b) {
    return a * b;
}

int main() {
    int num1, num2, result;

    // ユーザーから2つの整数を入力
    printf("Enter two integers: ");
    if (scanf("%d %d", &num1, &num2) != 2) {
        printf("Invalid input.\n");
        return 1; // エラーコードを返す
    }

    // 掛け算を行う関数を呼び出し
    result = multiply(num1, num2);

    // 結果を出力
    printf("The result of %d * %d is %d\n", num1, num2, result);

    return 0;
}
```

出力

#include <stdio.h>

// 掛け算を行う関数
int multiply(int a, int b) {
    return a * b;
}

int main() {
    int num1, num2, result;

    // ユーザーから2つの整数を入力
    printf("Enter two integers: ");
    if (scanf("%d %d", &num1, &num2) != 2) {
        printf("Invalid input.\n");
        return 1; // エラーコードを返す
    }

    // 掛け算を行う関数を呼び出し
    result = multiply(num1, num2);

    // 結果を出力
    printf("The result of %d * %d is %d\n", num1, num2, result);

    return 0;
}

編集差分の表示見出し「編集差分の表示」

言語を指定していた部分にdiffと記述し、半角スペースをあげて言語を指定することで、編集差分の表示を行うことができます。
行の先頭に+, -を書きます。

```diff lang="js"
- const nextPageUrl = '../slide23.html';
+ const nextPageUrl = '../slide23/index.html';
```

出力

const nextPageUrl = '../slide23.html';
const nextPageUrl = '../slide23/index.html';

水平線見出し「水平線」

任意の位置に線を入れることができます。

* * *
***
*****
- - -
--------------------------------------

出力

表(テーブル)見出し「表(テーブル)」

ブログ中に表を挿入することができます。
また:を利用することで、左寄せ・中央・右寄せを指定できます。

| 左寄せ              |          中央          |                 右寄せ |
| :------------------ | :--------------------: | ---------------------: |
| Aviation Safety     |     Cognitive bias     |      Driving simulator |
| Air Traffic Control | Risk taking propensity | Heart rate variability |
| Pilot               |   Danger sensitivity   |            Frustration |
| Human Factors       |   Social acceptance    |       Machine learning |
| Resilience          |     Nuclear power      |    Automatic operation |
| Safety II           |  Qualitative research  |                     AI |

左寄せ	中央	右寄せ
Aviation Safety	Cognitive bias	Driving simulator
Air Traffic Control	Risk taking propensity	Heart rate variability
Pilot	Danger sensitivity	Frustration
Human Factors	Social acceptance	Machine learning
Resilience	Nuclear power	Automatic operation
Safety II	Qualitative research	AI

ちなみに人間が見やすい以外のメリットはありませんが、このように見た目を揃えても出力には影響を与えません。
Table Image

こいつらいつ使うん埋め込み集見出し「こいつらいつ使うん埋め込み集」

HTMLに埋め込めるものは基本的にはブログ内で利用することができます。
こちらのブログに代表例をまとめましたので、確認してみてください!

上付き文字がここへのリンクとなります。 ↩

研究室ブログで利用できるマークダウンチートシート

テキストの装飾見出し「テキストの装飾」

見出し見出し「見出し」

これはh1タグです

これはh2タグです

これはh6タグです

強調・強勢見出し「強調・強勢」

打ち消し線見出し「打ち消し線」

折りたたみ見出し「折りたたみ」

補足・注意・警告見出し「補足・注意・警告」

高橋研オリジナル見出し「高橋研オリジナル」

色・アイコン・タイトルをカスタマイズできます！見出し「色・アイコン・タイトルをカスタマイズできます！」

利用できる色一覧見出し「利用できる色一覧」

利用できるアイコン一覧見出し「利用できるアイコン一覧」

ノート記法内でのMarkdown記法の使用見出し「ノート記法内でのMarkdown記法の使用」

リスト見出し「リスト」

順序なしリスト(箇条書きリスト)見出し「順序なしリスト(箇条書きリスト)」

順序ありリスト見出し「順序ありリスト」

説明付きリスト見出し「説明付きリスト」

チェックボックス見出し「チェックボックス」

リンク見出し「リンク」

画像見出し「画像」

脚注見出し「脚注」

コード見出し「コード」

インラインコード見出し「インラインコード」

コードブロック見出し「コードブロック」

シンタックスハイライト見出し「シンタックスハイライト」

編集差分の表示見出し「編集差分の表示」

水平線見出し「水平線」

表(テーブル)見出し「表(テーブル)」

こいつらいつ使うん埋め込み集見出し「こいつらいつ使うん埋め込み集」