技術ブログ

404 ページをカスタマイズする 404 ページがデフォルトのままで寂しかったからカスタマイズしました！ 作った 404 ページ Gatsby では、 src/pages/404.js を編集することで 404 時のページをカスタマイズすることが出来ます。 おあそび ただ 404 を表示するだけではおもしろくないかなぁ。 404 ページに来るほど勉強熱心な方にはもっと筋肉を知ってもらいたいなぁ。 という思いから！ 404 ページにはタイピングゲームをご用意しました！ 実装は以下のコードをご確認ください！

つくったもの 技術ブログを書いているときに、サンプルコードの指定行をハイライトしたいことがありました。 サンプルコードのどこを説明しているのか読みやすくしたいと思ったからです！ たとえば .mdx ファイルで line={1,4-6} と行を指定すると、 コードブロック部分は 1 行目と 4~6 行目がハイライトされます。 実装 ```で表示するコンポーネントを用意 マークダウン記法の ` ` ` を使って表示される見た目を、MDXProvider を使って変えたいと思います。 { code: <表示したいコンポーネント /> } を MDXProvider の state である components に渡すことで、 ` ` ` で表示される見た目を変えることが出来ます。 MDXProvider について詳細は以下の記事を参照ください。 自分の場合は、 CodeBlock コンポーネントの中で、 Highlight という色付けされたコード部分を表示するコンポーネントを使っています。 この Highlight…

MDXを使う準備 この記事ではMDXを使った前提で進めます。MDXは不要でシンプルなMarkdownで良い方は適宜読み替えていただけると幸いです。 MDXとは、Markdownで簡潔に記述し、かつより高度で再利用可能なJSXも埋め込めるものです。 インストール gatsby.configに追記 gatsby-node.jsでページを作成 詳細は割愛しますが、 CreatePages API の、 CreatePage アクション を使ってページを作成します。 テンプレートファイルに ./src/templates/blog-post/index.js を指定しているので、あとでこのファイルを見ていきます。 MDXProviderでコンポーネントの定義をマッピングする MDXProviderを使うことで、MDXコンテンツ内のタグのレンダリングを置き換えることができます。 例えば <h1> の色を変えたい場合、以下のようにMDXProviderにオブジェクトを渡します。 自分の場合は、 コンテンツのレンダリングの定義を src/components/MDXComponents/index…

つくったもの hover したらコードブロック内の同じ単語がハイライトされます！ ブログのサンプルコードなんかを読んでて、 ってことがよくあり、ハイライトされるとコードが追いやすくなって便利かなと思って作りました！ Qiita からヒントを得て！（パクリ w） 実装 シンタックスハイライト まず、シンタックスハイライトをするために当ブログでは prism-react-renderer というライブラリを使っています。 prism-react-renderer の詳細は割愛しますが、 Highlight コンポーネントの code という state に表示するコード文字列を渡し、 tokens という配列を操作しています。二次元の配列となっており、各行の中に各単語が入っています。 各単語それぞれに色付けをする必要があるので、各単語を <span> タグで囲って style を適用しています。 ホバーした文字列を state で管理する token.content で単語の文字列を取得できるので、空白を除去して state…