02. このサイトのMDXの記法まとめ

Hello, world!

これは、MDXのテストです。

このブログにおけるMDXの全機能を以下で実行していきます。

基本的なマークダウンの記法

## Header
### レベル3
#### レベル4
##### レベル5
###### レベル6

Header

レベル3

レベル4

レベル5

レベル6

EMタグ

*italic* or _italic_で「italic or italic 」となります。目立たせたいテキストに使用します。

残りの記法

**bold**と__bold__は「bold と bold」となり、これは<strong></strong>なので「注意が必要なとき」に使うそうです。<em></em>と<strogn></strogn>は、***italic and bold***と___italic and bold___とすることで併用することができます。表示は「italic and bold と italic and bold 」このようになります。

~~delete~~で、取り消し線（ delete ）を表示することができます。

リスト記法

通常のリストと

• Gatsby
  • docs
  • docs
  • docs
  • docs

• Gatsby
  • docs

• Gatsby
  • docs
  1. docs
  2. docs

ナンバリングされるリスト

1. One
2. Two
3. Three

これらは、以下の記法で書くことができます。

* Gatsby
  * docs
  * docs
  * docs
  * docs
- Gatsby
  - docs
+ Gatsby
  + docs
  1. docs
  1. docs

1. One
1. Two
1. Three

リンク

テキストリンクは、[テキストリンク](url)と記述します。サイト内の遷移の場合は、<Link to="/"></Link>などとしてLinkコンポーネントを使います。

画像を埋め込む

通常の画像

![alt text](./mdx-test/ruin.png)

alt属性なしの画像

![](./prevent-ruin-408x199.png)

引用する

blockquote

nested blockquote

I'm bold!

人の世が住みにくいと思うなら、人の世が少しでも生きやすいところとなるように工夫しなきゃならないだろう。

> blockquote
> > nested blockquote
>
> > **I'm bold!**
>
> 人の世が住みにくいと思うなら、人の世が少しでも生きやすいところとなるように工夫しなきゃならないだろう。

コードブロック

/**
 * Remove the default PrismJS theme background-color, border-radius, margin, * padding and overflow. * 1. Make the element just wide enough to fit its content.
 * 2. Always fill the visible space in .gatsby-highlight. * 3. Adjust the position of the line numbers
 */

let hoge = "piyo"
console.log(hoge)
let foo = "bar"
console.log(foo)
let kiku = "nantoka"
console.log(kiku)

区切り線

***と---で表示することができる。

テーブル

|header1|header2|header3|
|:--|--:|:--:|
|align left|align right|align center|
|a|b|c|
|テストでやんす|やんすよ|テスト|

コンポーネントを使用する

このサイトで使用することができるコンポーネント。

Linkコンポーネント

Linkのテスト。top pageへのリンク。 サイト内のSPAになる。

`Link`のテスト。<Link to="/">top page</Link>へのリンク。

RichLinkコンポーネント

同一サイト内のリンク。

10年間変わらない強み　書籍：Strength Finder

書籍「さあ、才能（自分）に目覚めよう　Strength Finder 2.0」のまとめと書評です。強みの診断結果をもとに導き出した筆者自身の強みと弱点を掲載しています。筆者本人が、後で内容をさっと確認する備忘録を兼ねています。

books/strength-finder

<RichLink slug="books/strength-finder" title="test" />

外部サイトは、あらかじめlinks.yamlにURLを登録しておく必要がある。 登録されているURLのOGPをもとに生成する。

Investment Tech Hack

投資歴8年目の兼業トレーダーが運営するサイト。資金管理やリスク管理、複利運用、破産の確率の解説。Pythonで行うバックテストの紹介や、プログラムの公開、自動売買作成の記録など。

investment.abbamboo.com

<RichLink href="https://investment.abbamboo.com/" />

独自のテキストを指定することもできる。

test

test

test

<RichLink
  href="https://investment.abbamboo.com/"
  title="test"
  description="test"
  domain="test"
/>

Tweet

TwitterのIDから、Tweetを埋め込む。

<Tweet id="1167578202505535488" />

複数のツイートを並べることもできる。

<Tweet id={["1167578202505535488","1167578202505535488"]} />

Youtube

同じくIDから、Youtubeを埋め込む。

<YouTube id="h2Tzd7MiOj8" />
<Youtube id="h2Tzd7MiOj8" />

Contaner

まとめに使う。箇条書きやテキストを入れる。

<Contaner>
// 1行あける
+ test
+ test
+ test
// 1行あける
</Contaner>

モーダル

事前に作成しておいたモーダルを挿入する。

<ModalTest />

タカハシ　ユウヤ

投資やプログラミング、動画コンテンツの撮影・制作・編集などが得意。元・日本料理の板前。更新のお知らせは、Twitterで。