#8 Gatsby + WordPress REST APIでブログを作ろう【シンタックスハイライト(Prism)編】

#7で一応Gatsby.js＋WordPress編は一区切りでしたが、いじっていく中でつまずいて情報があまりなかったのでここで紹介しておきます

内容は「Gatsby.jsでWordPress REST APIでブログ記事を引っ張ってきていて、gatsby-remark-prismjsを使ってコードをハイライトしたいけど上手くいかない！！」の解決法です

gatsby-remark-prismjsはマークダウン用みたいなので当たり前ですよね笑

最適な解決法かはわかりませんが、一応ちゃんと動いていますので参考にしてみてください

prism.jsを入れる

yarn add prismjs
or
npm install prismjs

記事のコンポーネントで読み込む

記事が表示されるコンポーネントでprismのjsと好きなprismのテーマのcssを読み込む

import "prismjs/themes/prism-okaidia.css";
import Prism from "prismjs";

このブログに沿って制作している方は以下のようになっているかと思います

const BlogPostTemplate = ({ location, data, pageContext }) => {
  return(
    ~~~~
  )
}

それを以下に変えます

class BlogPostTemplate extends React.Component {
  componentDidMount() {
    Prism.highlightAll();
  }
  render() {
    const { relatedPosts } = this.props.pageContext
    const post = this.props.data.wordpressPost

    return(
      ~~~
    )
  }
}

componentDidMountでコンポーネントがマウントされた直後にPrismのhighlightAllを発動させます

*const post = this.props.data.wordpressPostも追加しているので、{post.title}でタイトルが表示されます。他のデータも同じです。

WordPress側での投稿

コードを載せる時にしたのタグで囲めばオッケーです

<pre>
<code class="language-言語名”>
  ここにコード
</code>
</pre>

＊中のコードはエスケープツールなどでエスケープしておかないと反映されません。

WordPressなのでAddQuickTagというプラグインで簡単にタグを追加できるように設定しておくと楽です^ ^

以上でちゃんとシンタックスハイライトがされるかと思います

gatsby公式の「gatsby-remark-prismjs」がマークダウンファイル用に作られているみたいで、WordPress REST APIで記事を引っ張ってきている場合はどうしても上手くいきませんでした

結局GatsbyJSもreactなので普通に記事のコンポーネントでPrismを読み込んで、コンポーネントがマウントされたタイミングでにPrismのハイライトを発火させているだけです

技術系ブログでシンタックスハイライトがないのは辛いのでできてよかったです^ ^

ではまた何かあればここで紹介していきますね〜〜