質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

87.58%

Gatsby+Contentful+KaTeXで数式がうまく表示できない

解決済

回答 1

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 228

score 64

やりたいこと

Contentful(CMS)のコンテンツを、マークダウン記法とKaTex記法を用いて執筆したいです。

困っていること

プラグインgatsby-remark-katexドキュメントを参考にコードを書き換えたのですが、うまく反映されません。

ネットで調べてmdxのプラグインを使う例なども見て試したりしましたが上手くいきません。ただ、Reactの知識もないので根本的なところで間違っている可能性もあります。そこで、後述のコードやプラグインで誤りや確認すべき点があれば、ご指摘いただけると助かります。

環境

  • Gatsby 3.3.0
  • gatsby-transformer-remark 4.1.0
  • gatsby-remark-katex 5.1.0
  • CMS:Contentful(ブログコンテンツは、Long text の Markdown に設定)
  • 確認用のブラウザ:Google Chrome

コード

gatsby-config.js, gatsby-blowser.js, ブログ記事テンプレートファイル(.js)の内容は以下の通りです。

gatsby-config.js

module.exports = {
  siteMetadata: {
    // *****(中略)*****
  },
  plugins: [
    // *****(中略)*****
    {
      resolve: `gatsby-transformer-remark`,
      options: {
        commonmark: true,
        footnotes: true,
        pedantic: true,
        gfm: true,
        plugins: [
          // *****(中略)*****
          {
            resolve: `gatsby-remark-katex`,
            options: {
              // Add any KaTeX options from https://github.com/KaTeX/KaTeX/blob/master/docs/options.md here
              strict: `ignore`
            }
          }
        ],
      },
    },
    `gatsby-plugin-sass`,
  ],
};


gatsby-blowser.js

require(`katex/dist/katex.min.css`)


src/templates/blogpost-template.js(ブログ記事のテンプレートファイル)

import React from "react"
import { graphql, Link } from "gatsby"

import Layout from "../components/layout"

// *****(中略)*****

export default function Blogpost ({ data, pageContext, location }) {
    const { contentfulBlogPost: post } = data
    return (
        <Layout>
          // *****(中略)*****
                    <div className="postbody"
                        dangerouslySetInnerHTML={{ __html: post.content.childMarkdownRemark.html }}
                    />
          // *****(中略)*****
        </Layout>
    )
}

export const query = graphql`
    query($id: String!) {
        contentfulBlogPost(id: { eq: $id }) {
            title
            slug
            publishDate
            publishDateJP: publishDate(formatString: "YYYY/MM/DD")
            updatedAt
            updatedAtJP: updatedAt(formatString: "YYYY/MM/DD")
            category {
                category
                categorySlug
            }
            content {
                childMarkdownRemark {
                  html
                }
            }
        }
    }
`

(5/5追記)気になること

Google Chromeのデベロッパーツールで確認すると、$$で囲った箇所にはclass="math math-display"が、$で囲った箇所にはclass="math math-inline"が付与されていました。

イメージ説明

しかし、node_modulesディレクトリにあるkatex/dist/katex.min.css内を検索しても、math-displaymath-inlineのクラスに関する記述は見当たりませんでした。

修正箇所

  • (5/9)ファイル名に誤りがあったので手元の環境で修正しました。
    誤:gatsby-blowser.js
    正:gatsby-browser.js
  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 1

check解決した方法

0

gatsby-remark-katexのバージョンがv5.0.0以上、もしくはgatsby-transformer-remarkのバージョンがv4.0.0以上の場合は問題が生じるようです。

(参考1)Githubのissue:upgrading to gatsby-remark-katex v5.0.0 and/or gatsby-transformer-remark v4.0.0 breaks katex math equation #30865
(参考2)Qiitaの記事:新卒プログラマーがGatsbyで個人サイト兼ブログを作ってみた

ただ、上述の記事を参考にして試しても手元の環境ではうまくいかず、こちらを参考にCDNでkatexを読み込むことにしました。

また、ページ遷移時は数式がレンダリングされず、リロードする必要があります。このような問題は残っていますが、ひとまずkatexの数式表示が反映されることは確認できたので、この質問はクローズにします。

なお、コーディング内容は次の通りです。

src/pages/index.js

import React from "react"
import Layout from "../components/layout"
import Seo from "../components/seo"

export default function Index ({ data }) {
  return (
    <Layout>
      <Seo />
      <div>
        $y = x^2$
      </div>
    </Layout>
  )
}

src/components/layout.js

import React from "react"
import Header from "../components/header"
import Footer from "../components/footer"
import "./layout.scss"

export default function Layout ({ children }) {
    return (
        <div>
            <Header />

            <div className="main-wrapper">
                {children}
            </div>

            <Footer />
        </div>
    )
}

src/components/seo.js

import React from "react"
import { Helmet } from "react-helmet"
import { useStaticQuery, graphql } from "gatsby"

export default function Seo ( props ) {
    // *****(中略)*****
    return (
        <Helmet>
            // *****(中略)*****
            <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.13.11/dist/katex.min.css" integrity="sha384-Um5gpz1odJg5Z4HAmzPtgZKdTBHZdw8S29IecapCSB31ligYPhHQZMIlWLYQGVoc" crossorigin="anonymous" />
            <script defer src="https://cdn.jsdelivr.net/npm/katex@0.13.11/dist/katex.min.js" integrity="sha384-YNHdsYkH6gMx9y3mRkmcJ2mFUjTd0qNQQvY9VYZgQd7DcN7env35GzlmFaZ23JGp" crossorigin="anonymous"></script>
            <script defer src="https://cdn.jsdelivr.net/npm/katex@0.13.11/dist/contrib/auto-render.min.js" integrity="sha384-vZTG03m+2yp6N6BNi5iM4rW4oIwk5DfcNdFfxkk9ZWpDriOkXX8voJBFrAO7MpVl" crossorigin="anonymous"
                onload="renderMathInElement(document.body, {
                    delimiters: [
                        {left: '$$', right: '$$', display: true},
                        {left: '$', right: '$', display: false},
                        {left: '\\(', right: '\\)', display: false},
                        {left: '\\[', right: '\\]', display: true}
                    ],
                });">
            </script>

            // *****(中略)*****
        </Helmet>
    )
}

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 87.58%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る