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

Posted on May 2nd, 2021Updated on May 2nd, 2021
02. このサイトのMDXの記法まとめ

Hello, world!

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

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

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

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

レベル3

レベル4
レベル5
レベル6

EMタグ

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

残りの記法

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

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

リスト記法

通常のリストと

  • Gatsby
    • docs
    • docs
    • docs
    • docs
  • Gatsby
    • docs
  • Gatsby
    • docs
    1. docs
    2. docs

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

  1. One
  2. Two
  3. Three

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

MD
* 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

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

alt属性なしの画像

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

引用する

blockquote

nested blockquote

I'm bold!

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

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

コードブロック

/src/pages/index.js
/**
 * 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)

区切り線

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



テーブル

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

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

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

Linkコンポーネント

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

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

RichLinkコンポーネント

同一サイト内のリンク。

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

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

books/strength-finder

10年間変わらない強み 書籍:Strength Finder
MD
<RichLink slug="books/strength-finder" title="test" />

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

Investment Tech Hack

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

investment.abbamboo.com

Investment Tech Hack
MD
<RichLink href="https://investment.abbamboo.com/" />

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

test

test

test

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

Tweet

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

MD
<Tweet id="1167578202505535488" />

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

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

Youtube

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

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

Contaner

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

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

モーダル

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

MD
<ModalTest />
同じタグの記事
著者

タカハシ ユウヤ

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

  • 記事をシェア
© Investment Tech Hack 2021.