さりんじゃー's Tech Blog

Cover Image for 自作ブログでの Markdown 記法テスト
Home  /  Other

自作ブログでの Markdown 記法テスト

さりんじゃー
さりんじゃー

はじめに

本記事について

　自作ブログの Markdown 変換処理確認のための記事です。本ブログの環境構築と作成の流れに関しては 「React + Next.js で自作ブログの作成 (1 .環境構築編)」 と 「React + Next.js で自作ブログの作成 (2.テンプレートの改修)」 に記載しています。コードに関しては https://github.com/DS-Salinger/salinger-tech-blog に掲載しているので必要に応じて参照してください。Markdown から HTML への変換には Remark と Rehype を利用しています。変換処理部分は主に markdownToHtml.ts に記載してます。CSS は markdown-style.module.css、index.css、tailwind.config.js に記載しています。

　画像リンクなどの一部サンプルテキストについては ZennのMarkdown記法一覧 から記載内容をお借りしています。

Markdown 変換のために用意した機能

  • 見出し
  • リスト
  • テキストリンク
  • 画像
  • テーブル
  • コードブロック
  • 数式
  • 引用
  • 区切り線
  • インラインスタイル
  • GFM (GitHub Flavored Markdown)
  • 絵文字

見出し

# 見出し1
## 見出し2
### 見出し3
#### 見出し4

リスト

順序なし

- Hello!
- Hola!
  - Bonjour!
  * Hi!
  • Hello!
  • こんにちわ!
    • こんばんわ
    • おはよう

*もしくは- でリストにできる。スペースで字下げ可能。

順序あり

1. First
2. Second
   1. Second - First
      * hogehoge
  1. First
  2. Second
    1. Second - First
      • hogehoge

数字ありなし自由に混ぜられる。

テキストリンク

[アンカーテキスト](リンクのURL)

アンカーテキスト

画像

記事への埋め込み

![altテキスト](https://画像のURL)

altテキスト

このような形で埋め込まれる。

同ディレクトリの画像は [アットマーク2つ]image[アットマーク2つ]/hogehoge.png で記事中に埋め込める。 /assets/images/posts/20230711-markdown-test/hogehoge.png に画像がビルド時に自動コピーされURLが適切な形に置換される。

画像のリンク化

以下のようにすることで画像に対してリンクを貼ることもできます。

[![altテキスト](画像のURL)](リンクのURL)

altテキスト

テーブル

| Head | Head | Head     |
| ---- | ---- | -------- |
| Text | Text | TextText |
| Text | Text | TextText |
Head Head Head
Text Text Text
Text Text Text

コードブロック

コードは「```」で挟むことでブロックとして挿入できます。以下のように言語を指定するとコードへ装飾（シンタックスハイライト）が適用されます。

```javascript

```

const great = () => {
  console.log("Awesome");
};

シンタックスハイライトには highlight.js + rehype-highlight を使用しています。

📄 対応言語の一覧 →

ファイル名を表示する

言語:ファイル名と:区切りで記載することで、ファイル名がコードブロックの上部に表示されるようになります。

```js:ファイル名

```

fooBar.js
const great = () => {
  console.log("Awesome")
}

数式

MathJax による数式表示に対応しています。

📄 とほほのMathJax入門

数式のブロックを挿入する

$$で記述を挟むことで、数式のブロックが挿入されます。

$$
e^{i\theta} = \cos\theta + i\sin\theta
$$

は以下のように表示される。

$$の前後は空の行でないと正しく埋め込まれないことがある。

インラインで数式を挿入する

$a\\ne0$というように$ひとつで挟むことで、のようにインライン表示できる。

引用

> 引用文
> 引用文

引用文 引用文

区切り線

---

インラインスタイル

*イタリック*
**太字**
~~打ち消し線~~
インラインで`code`を挿入する

イタリック
太字
打ち消し線
インラインでcodeを挿入する

インラインのコメント

自分用のメモをしたいときは HTML のコメント記法を使用できます。

<!-- TODO: ◯◯について追記する -->

この形式で書いたコメントは公開されたページ上では表示されない。

remarkGfm による GitHub Flavored Markdown 対応

自動URLリンク化

www.example.com, https://example.com, and contact@example.com.

脚注

A note1

取り消し線

one or two tildes.

Tasklist

  • to do
  • done

remark-emoji による絵文字対応

絵文字一覧

:dog:
:+1:
:arrow_right:

🐶
👍
🆎

Footnotes

  1. Big note. ↩