Zenn
Closed6

mdx-deckまとめ

React
#
まとめ
#
mdxdeck
ohki_suguru.phpohki_suguru.php

公式

基本的な使い方

https://github.com/jxnblk/mdx-deck#theming
https://mdx-deck.jxnblk.com/

そもそもmdxとは？

https://mdxjs.com/

であるmdx.jsというライブラリが元となっている

デフォルトで使えるテーマの一覧

https://github.com/jxnblk/mdx-deck/blob/master/docs/themes.md

テーマの作成

https://github.com/jxnblk/mdx-deck/blob/master/docs/theming.md

始めるには

Node.jsのバージョンが古くないことを確認してから次のコマンドを順番に打っていけばOK
deck.mdxという名前のファイルをデフォルトでは拾うので、名前を変えるなら設定をいじることになるはず？

1. mdx-deckをインストールする

TerminalやiTerm2
mkdir mdx-deck-sample
cd mdx-deck-sample
yarn init -y
touch deck.mdx
yarn add --dev mdx-deck

自分はyarnを使っているが、npmを使っている人はyarn の部分のコマンドを読み替えて次のように実行すること

TerminalやiTerm2
mkdir mdx-deck-sample
cd mdx-deck-sample
npm init -y
touch deck.mdx
npm install -D mdx-deck

2. package.jsonにmdx-deckを立ち上げるためのスクリプトを追加

↓これは切り取りバージョン

package.json
"scripts": {
  "start": "mdx-deck deck.mdx"
}

全体はこちらのようになる

package.json
{
  "name": "mdx-deck",
  "version": "1.0.0",
  "main": "index.js",
  "license": "MIT",
  "devDependencies": {
    "mdx-deck": "^4.1.1"
  },
  "scripts": {
    "start": "mdx-deck deck.mdx"
  }
}

3. 立ち上げて初期のスライドを表示してみる

deck.mdxの中身を次のようにする。

deck.mdx
# Hello

---

## This is my deck

---

## The End

npm or yarn のいずれかで次のようなコマンドを実行

npm

TerminalやiTerm2
npm run start

yarn

TerminalやiTerm2
yarn start

4. 3を実行時点におけるディレクトリ構造

yarnを使っている前提。
npm を使っている人は yarn.lock が package.lock となるだけ。

iTerm2
suguruohki@SugurunoMacBook-Pro:~/workspace/mdx-deck > tree -L 1                                                                                                                    ttys028 [02/05 12:16:13]
.
├── deck.mdx
├── node_modules
├── package.json
└── yarn.lock

1 directory, 3 files

テーマの作成

前提

MDX Deck uses Theme UI and Emotion for styling, making practically any part of the presentation themeable.

とある通り、 ThemeUI と Emotion が利用されている。

手順

  1. themesディレクトリを作成

参考

https://marioyepes.com/mdx-deck-developer-presentations-part-1/

Nodeのバージョン切り替え自動の方が捗る

古い記事だけど。anyenvは時々バージョンの依存関係や動作が重くなるなど、おかしくなることもあるから導入は慎重に。便利だけども。

https://qiita.com/tonkotsuboy_com/items/5322d226b6783d25b5df

ohki_suguru.phpohki_suguru.php

トラブルシューティング

ポートが既に使われている場合のエラー

ポートを知らん人は調べること。
ポート自体は -p オプションでずらせる。

iTerm2
suguruohki@SugurunoMacBook-Pro:~/workspace/mdx-deck > yarn start                                                                                                                   ttys028 [02/05 12:12:14]
yarn run v1.22.10
warning ../../package.json: No license field
$ mdx-deck deck.mdx
info Deleting .cache, public, /Users/suguruohki/workspace/mdx-deck/node_modules/mdx-deck/node_modules/.cache/babel-loader,
/Users/suguruohki/workspace/mdx-deck/node_modules/mdx-deck/node_modules/.cache/terser-webpack-plugin
info Successfully deleted directories


Something is already running at port 8000
node:internal/modules/cjs/loader:1126
      throw new ERR_REQUIRE_ESM(filename, parentPath, packageJsonPath);
      ^

Error [ERR_REQUIRE_ESM]: Must use import to load ES Module: /Users/suguruohki/workspace/mdx-deck/node_modules/gatsby-recipes/node_modules/remark-mdx/index.js
require() of ES modules is not supported.
require() of /Users/suguruohki/workspace/mdx-deck/node_modules/gatsby-recipes/node_modules/remark-mdx/index.js from
/Users/suguruohki/workspace/mdx-deck/node_modules/gatsby-recipes/dist/graphql-server/server.js is an ES module file as it is a .js file whose nearest parent package.json contains "type": "module" which
defines all .js files in that package scope as ES modules.
Instead rename index.js to end in .cjs, change the requiring code to use import(), or remove "type": "module" from
/Users/suguruohki/workspace/mdx-deck/node_modules/gatsby-recipes/node_modules/remark-mdx/package.json.

    at new NodeError (node:internal/errors:363:5)
    at Object.Module._extensions..js (node:internal/modules/cjs/loader:1126:13)
    at Module.load (node:internal/modules/cjs/loader:989:32)
    at Function.Module._load (node:internal/modules/cjs/loader:829:14)
    at Module.require (node:internal/modules/cjs/loader:1013:19)
    at require (node:internal/modules/cjs/helpers:93:18)
    at Object.<anonymous> (/Users/suguruohki/workspace/mdx-deck/node_modules/gatsby-recipes/dist/graphql-server/server.js:52:17)
    at Module._compile (node:internal/modules/cjs/loader:1109:14)
    at Object.Module._extensions..js (node:internal/modules/cjs/loader:1138:10)
    at Module.load (node:internal/modules/cjs/loader:989:32) {
  code: 'ERR_REQUIRE_ESM'
}
ポートをずらす際のコマンド
yarn start -p 59000

59000 はデフォルト以外で使いたいポート番号。

deck.mdxがない際には出るエラー

mdxファイルをひとまずdeck.mdxにすればOK

iTerm2
suguruohki@SugurunoMacBook-Pro:~/workspace/mdx-deck > yarn start -p 9000                                                                                                           ttys028 [02/05 12:06:43]
yarn run v1.22.10
warning ../../package.json: No license field
$ mdx-deck deck.mdx -p 9000
info Deleting .cache, public, /Users/suguruohki/workspace/mdx-deck/node_modules/mdx-deck/node_modules/.cache/babel-loader,
/Users/suguruohki/workspace/mdx-deck/node_modules/mdx-deck/node_modules/.cache/terser-webpack-plugin
info Successfully deleted directories


Something is already running at port 9000
/Users/suguruohki/workspace/mdx-deck/node_modules/gatsby-recipes/dist/graphql-server/server.js:52
var remarkMdx = require('remark-mdx');
                ^

Error [ERR_REQUIRE_ESM]: require() of ES Module /Users/suguruohki/workspace/mdx-deck/node_modules/gatsby-recipes/node_modules/remark-mdx/index.js from
/Users/suguruohki/workspace/mdx-deck/node_modules/gatsby-recipes/dist/graphql-server/server.js not supported.
Instead change the require of index.js in /Users/suguruohki/workspace/mdx-deck/node_modules/gatsby-recipes/dist/graphql-server/server.js to a dynamic import() which is available in all CommonJS modules.
    at Object.<anonymous> (/Users/suguruohki/workspace/mdx-deck/node_modules/gatsby-recipes/dist/graphql-server/server.js:52:17) {
  code: 'ERR_REQUIRE_ESM'
}

Node.js v17.3.0


✔ Would you like to run the app at another port instead? … yes
success open and validate gatsby-configs - 0.035s
success load plugins - 0.122s
success onPreInit - 0.013s
success initialize cache - 0.003s
success copy gatsby files - 0.027s
success onPreBootstrap - 0.008s
success createSchemaCustomization - 0.006s
success Checking for changed pages - 0.001s
success source and transform nodes - 0.027s
success building schema - 0.076s

 ERROR #11325

The plugin "@mdx-deck/gatsby-plugin" created a page with a component that doesn't exist.

The path to the missing component is "/Users/suguruohki/workspace/mdx-deck/deck.mdx"

The page object passed to createPage:
{
    "path": "/",
    "matchPath": "/*",
    "component": "/Users/suguruohki/workspace/mdx-deck/deck.mdx"
}

See the documentation for the "createPage" action — https://www.gatsbyjs.org/docs/actions/#createPage

not finished createPages - 0.009s

Error: Command failed with exit code 1: gatsby develop --host localhost --port 9000 --open
    at makeError (/Users/suguruohki/workspace/mdx-deck/node_modules/execa/lib/error.js:59:11)
    at handlePromise (/Users/suguruohki/workspace/mdx-deck/node_modules/execa/index.js:114:26)
    at processTicksAndRejections (node:internal/process/task_queues:96:5)
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

リロードされまくる

https://gyazo.com/c672b3ab791def5b6db1ee1316e8ab36

これは正常な動作であるのかは不明。
ひとまずスライドは表示されていて、問題ない

このスクラップは2022/02/05にクローズされました