tag:crieit.net,2005:https://crieit.net/tags/rehype/feed
「rehype」の記事 - Crieit
Crieitでタグ「rehype」に投稿された最近の記事
2019-10-08T08:46:46+09:00
https://crieit.net/tags/rehype/feed
tag:crieit.net,2005:PublicArticle/15462
2019-10-08T08:32:43+09:00
2019-10-08T08:46:46+09:00
https://crieit.net/posts/gatsby-transformer-remark
gatsby-transformer-remarkで出力されるコンポーネントをカスタマイズする方法
<p><strong>オリジナルの記事は<a target="_blank" rel="nofollow noopener" href="https://www.mono7555e.com/customize-gatsby-transfer-remark/">こちら</a></strong></p>
<hr />
<p>こんにちは。mono(<a target="_blank" rel="nofollow noopener" href="https://twitter.com/mono7555e" target="_blank" rel="noopener">@mono7555e</a>)です。</p>
<p>このブログがGatsbyJSで作られていること、<a target="_blank" rel="nofollow noopener" href="https://www.gatsbyjs.org/packages/gatsby-transformer-remark/" target="_blank" rel="noopener">gatsby-transformer-remark</a>を使ってMakrdownを読み込んでいることは以前にもご紹介しましたが、今回はそこで出力されるHTML(コンポーネント)をカスタマイズする方法をご紹介したいと思います。</p>
<p>かなり簡単で、ずばり<a target="_blank" rel="nofollow noopener" href="https://github.com/rehypejs/rehype-react" target="_blank" rel="noopener">rehype-react</a>を使うとやりたいことが出来ます。</p>
<h2 id="既存コンポーネントを独自コンポーネントに置き換える"><a href="#%E6%97%A2%E5%AD%98%E3%82%B3%E3%83%B3%E3%83%9D%E3%83%BC%E3%83%8D%E3%83%B3%E3%83%88%E3%82%92%E7%8B%AC%E8%87%AA%E3%82%B3%E3%83%B3%E3%83%9D%E3%83%BC%E3%83%8D%E3%83%B3%E3%83%88%E3%81%AB%E7%BD%AE%E3%81%8D%E6%8F%9B%E3%81%88%E3%82%8B">既存コンポーネントを独自コンポーネントに置き換える</a></h2>
<p>まずは<code>h1</code>や<code>p</code>などの既存コンポーネントを置き換える方法についてです。</p>
<p>私が実際に使っているものを例にするとこんな感じになります。</p>
<pre><code class="tsx">import rehypeReact from "rehype-react"
import { Box, Typography } from "@material-ui/core"
// 中略
export const renderAst = new rehypeReact({
createElement: React.createElement,
components: {
'h2': (props: TypographyProps) => {
return (
<Box mt={4} mb={2} py={2} px={3} bgcolor="primary.400" color="common.white">
<Typography variant="h6" component="h2" {...props}></Typography>
</Box>
)
},
'h3': (props: TypographyProps) => {
return (
<Box mt={4} mb={2} py={1} px={2} borderLeft={4} borderColor="primary.500">
<Typography variant="h6" component="h3" {...props}></Typography>
</Box>
)
},
'h4': (props: TypographyProps) => {
return (
<Box mt={4} mb={2} py={1} px={1} borderBottom={1} borderColor="primary.500">
<Typography variant="body1" component="h4" {...props}></Typography>
</Box>
)
},
'p': (props: TypographyProps) => {
return (
<Typography variant="body2" component="p" style=<span>{</span><span>{</span> marginTop: `1rem`, marginBottom: `1rem`, lineHeight: 1.8 <span>}</span><span>}</span> {...props}></Typography>
)
},
// などなど
},
}).Compiler
</code></pre>
<p>全体的に<a target="_blank" rel="nofollow noopener" href="https://material-ui.com/" target="_blank" rel="noopener">Material-UI</a>を使っているので、そのコンポーネントに各既存コンポーネントを置き換えています。</p>
<p>あとは、GraphQLで取得するデータを<code>html</code>から<code>htmlAst</code>に変更し、定義した<code>renderAst</code>を使うように書き換えます。</p>
<p>具体的には</p>
<pre><code class="jsx"><div dangerouslySetInnerHTML=<span>{</span><span>{</span> __html: html <span>}</span><span>}</span> />
</code></pre>
<p>を↓に置き換える感じです。</p>
<pre><code class="jsx"><div>{renderAst(htmlAst)}</div>
</code></pre>
<p>ここまで来ればあとは自由にカスタマイズ可能です。</p>
<h2 id="独自コンポーネントを読み込む"><a href="#%E7%8B%AC%E8%87%AA%E3%82%B3%E3%83%B3%E3%83%9D%E3%83%BC%E3%83%8D%E3%83%B3%E3%83%88%E3%82%92%E8%AA%AD%E3%81%BF%E8%BE%BC%E3%82%80">独自コンポーネントを読み込む</a></h2>
<p>前述の例では、既存コンポーネントを独自コンポーネントに置き換える方法でしたが、独自コンポーネントを追加することも出来ます。</p>
<p>まずは読み込みたいコンポーネントを作ります。</p>
<p>```jsx:title=src/components/atoms/custom.tsx<br />
import React from 'react'</p>
<p>const Custom = () => {<br />
return(<br />
<div><br />
<p>独自コンポーネント</p><br />
</div><br />
)<br />
}<br />
export default Custom</p>
<pre><code><br />Markdownファイルのコンポーネントを読み込みたい場所にタグを追加します。
```md
↓コンポーネント読み込み↓
<custom></custom>
↑コンポーネント読み込み↑
</code></pre>
<p>※ちなみに<code><custom /></code>と書きたくなりますがこれだとダメでした</p>
<p>それが置き換えられるように<code>rehypeReact</code>を設定します。</p>
<pre><code class="jsx">import rehypeReact from "rehype-react"
import Custom from "../components/custom"
// 中略
export const renderAst = new rehypeReact({
createElement: React.createElement,
components: {
'custom': Custom,
},
}).Compiler
</code></pre>
<p>これで<code><custom></custom></code>と書かれたところ<code>Custom</code>コンポーネントになって出力されるようになります。</p>
<h2 id="まとめ"><a href="#%E3%81%BE%E3%81%A8%E3%82%81">まとめ</a></h2>
<p><code>gatsby-transformer-remark</code>を使っている際にカスタマイズをしたい場合<code>rehype-react</code>を使えば簡単なことであれば大体のことは出来ると思います。</p>
<p>もし、さらにより細かいカスタマイズを行いたい場合は今回のように置き換えるのではなくて、コンポーネント自体を読み込めるようになる<a target="_blank" rel="nofollow noopener" href="https://mdxjs.com/" target="_blank" rel="noopener">MDX</a>を使うと良さそうです。</p>
mono7555e