Portfolio

# VuePress のチートシート

# 目次

# はじめに

自分用にテキトーに作ったため順番がバラバラです。

# 行

# 改行

foo

bar

<p>foo</p>
<p>bar</p>

foo

bar

# 行間をあける

foo
<br>
bar

foo
bar

# 水平線

---

↓


# 文字修飾

# 強調

**foo**

<strong>foo</strong>

foo

# イタリック

*foo*

<em>foo</em>

foo

# 強調 + イタリック

***foo***

<em><strong>foo</strong></em>

foo

# 打消し

~~foo~~

<s>foo</s>

foo

# 見出し

# h1
### h3

<h1 id="h1">h1</h1>
<h3 id="h3">h3</h3>

# h1

# h3

# リスト

# 箇条書き

- foo
    - bar

<ul>
  <li>
    foo
    <ul>
      <li>
        bar
      </li>
    </ul>
  </li>
</ul>
  • foo
    • bar

# 番号付きの箇条書き

1. foo
1. bar
1. baz

<ol>
  <li>
    foo
  </li>
  <li>
    bar
  </li>
  <li>
    baz
  </li>
</ol>
  1. foo
  2. bar
  3. baz

# 定義リスト

<dl>
  <dt>名前</dt>
  <dd>〇〇</dd>
  <dt>職業</dt>
  <dd>学生</dd>
</dl>
名前
〇〇
職業
学生

# 引用

> foo

<blockquote>
  <p>foo</p>
</blockquote>

foo

# 引用の入れ子

> foo
>> bar

<blockquote>
  <p>foo</p>
  <blockquote>
    <p>bar</p>
  </blockquote>
</blockquote>

foo

bar

# リンク

[Portfolio](https://guinpen98.github.io/VuePress/)

Portfolio (opens new window)

# 画像

![画像](filepath/foo.png)

<img src="filepath/foo.png" alt="画像">

画像

# テーブル

|1|2|
|---|---|
|foo|bar|

<table>
  <thead>
    <tr>
      <th>1</th>
      <th>2</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>foo</td>
      <td>bar</td>
    </tr>
  </tbody>
</table>
1 2
foo bar

# コード

# インライン

`foo`

<code>foo</code>

foo

# ブロック

```　
foo
```　

<pre class="language-text">
  <code>
    foo
  </code>
</pre>

foo

# コードのハイライト

``` {2}　
int main(){
    std::cout << "Hello";
}
```　

 


int main(){
    std::cout << "Hello";
}

# ファイル形式の表示

```cpp　
int main(){
    std::cout << "Hello";
}
```　

int main(){
    std::cout << "Hello";
}

言語一覧 (opens new window)

# 目次

[[toc]]

# 絵文字

:smile:

😄

絵文字リスト (opens new window)

# カスタムコンテナ

::: tip
This is a tip
:::

::: warning
This is a warning
:::

::: danger
This is a dangerous warning
:::

::: details
This is a details block
:::

TIP

This is a tip

WARNING

This is a warning

DANGER

This is a dangerous warning

DETAILS

This is a details block

# コードグループとコードブロック

<code-group>
<code-block title="Windows">
```bash
dir
```　
</code-block>

<code-block title="Mac">
```bash
ls
```　
</code-block>
</code-group>

# Badgeコンポーネント

Badge <Badge text="beta" type="warning" vertical="middle"/>

Badge <Badge text="エラー" type="error"/>

Badge warning

Badge error

  • text : 文字
  • type : tip, warning, error, デフォルトはtip
  • vertical : top, middle, デフォルトはtop

# アコーディオン

<details><summary>foo</summary>
bar
</details>
foo bar

# Twitter 埋め込み

<blockquote class="twitter-tweet"><p lang="en" dir="ltr">New patch release v1.8.1 just dropped!<a href="https://t.co/lHeIclEoFo">https://t.co/lHeIclEoFo</a></p>&mdash; VuePress (@vuepressjs) <a href="https://twitter.com/vuepressjs/status/1359871849493114882?ref_src=twsrc%5Etfw">February 11, 2021</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

# Youtube 埋め込み

<iframe width="560" height="315" src="https://www.youtube.com/embed/lIv1ItUzktc" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
Last Updated: 2年前