notion-blogの改造メモ(2)

Posted: February 22, 2021

改造メモ(1) の続き。

見出しなどのスタイル改造

上記の見出しがh2。h1は記事タイトルに使われてるのでとりあえず放置。

h3はこんな感じ

ちょっとみやすくなった。

code highlightの改善

素のnotion-blogだと、javascriptとcssくらいしかハイライトに対応してなかった。

調べてみると、これはprismjsをデフォルトのまま使っているせいだということが分かったので、notionが対応してるかつ使いそうな定義を追加してみた。

diff --git a/src/components/code.tsx b/src/components/code.tsx
index 7887e31..7243ee9 100644
--- a/src/components/code.tsx
+++ b/src/components/code.tsx
@@ -1,16 +1,32 @@
 import Prism from 'prismjs'
+import 'prismjs/components/prism-bash'
+import 'prismjs/components/prism-typescript'
+import 'prismjs/components/prism-rest'
 import 'prismjs/components/prism-jsx'
+import 'prismjs/components/prism-python'
+import 'prismjs/components/prism-diff'
+import 'prismjs/components/prism-rust'
+import 'prismjs/components/prism-java'
+import 'prismjs/components/prism-scala'
+import 'prismjs/components/prism-markdown'
+import 'prismjs/components/prism-yaml'
+import 'prismjs/components/prism-json'
+import 'prismjs/components/prism-sql'
+import 'prismjs/components/prism-go'
+import 'prismjs/components/prism-c'
+import 'prismjs/components/prism-cpp'
+import 'prismjs/components/prism-textile'

-const Code = ({ children, language = 'javascript' }) => {
+const Code = ({ children, language = 'textfile' }) => {
   return (
     <>
       <pre>
         <code
           dangerouslySetInnerHTML={{
             __html: Prism.highlight(
               children,
-              Prism.languages[language.toLowerCase()] ||
-                Prism.languages.javascript
+              Prism.languages[language] || Prism.languages.textfile
             ),
           }}
         />

こういうのはGistの埋め込みを使った方が見やすいのかもしれない...ということで、Gistも表示できるようにしてみた。

色々試した結果、super-react-gist がよかった。

diff --git a/src/pages/blog/[slug].tsx b/src/pages/blog/[slug].tsx
index 0138482..9d40700 100644
--- a/src/pages/blog/[slug].tsx
+++ b/src/pages/blog/[slug].tsx
@@ -12,6 +12,7 @@ import React, { CSSProperties, useEffect } from 'react'
 import getBlogIndex from '../../lib/notion/getBlogIndex'
 import getNotionUsers from '../../lib/notion/getNotionUsers'
 import { getBlogLink, getDateStr } from '../../lib/blog-helpers'
+import Gist from 'super-react-gist'

 // Get the data for each blog post
 export async function getStaticProps({ params: { slug }, preview }) {
@@ -234,6 +235,10 @@ const RenderPost = ({ post, redirect, preview }) => {
             case 'table_of_contents':
             case 'page':
               break
+            case 'gist':
+              const url = value.properties.source[0][0]
+              toRender.push(<Gist url={url} />)
+              break
             case 'divider':
               toRender.push(<hr className="article" />)
               break

Gistの表示はこんな感じ

...waiting for Gist...

Notion側との表示と一致していて管理しやすいのもいい感じ。

markdownを表示してみると...

...waiting for Gist...

ちょっと見づらいかな。今回はここまで。