Next.js ベースのブログに移行した話

- hoge
  - fuga
    - piyo

[ko-da-k's blog](https://blog.ko-da-k.dev/)

\`\`\`go
package main

import (
	"fmt"
)

func main() {
	fmt.Println("Hello, playground")
}
\`\`\`

> これは引用文です

package main

import (
	"fmt"
)

func main() {
	fmt.Println("Hello, playground")
}

node: v14.15.3
npm: v6.14.10
next: v10.0.4

$ npx create-next-app --example blog-starter-typescript-app blog-starter-typescript-app` コマンドを利用してベース環境立ち上げ

$ npm i prismjs
$ npm i --save-dev @types/prismjs

import React from "react";
import {AppProps} from 'next/app'
import '../styles/index.css'
import 'prismjs/themes/prism-tomorrow.css'  // これが追加
export default function MyApp({Component, pageProps}: AppProps) {
  return <Component {...pageProps} />
}

import React, {useEffect} from "react";
import Prism from 'prismjs'
import 'prismjs/components/prism-jsx.min'
import 'prismjs/components/prism-go'
import 'prismjs/components/prism-css'
import 'prismjs/components/prism-tsx'
// (omitted)...
const Layout = ({preview, children}: Props) => {
  useEffect(() => {
    Prism.highlightAll();
  }, []);
  // (omitted)...
}

/* テンプレそのままだと a tag に色がつかない */
.markdown a {
  @apply text-blue-600;
}
/* 箇条書きの位置がおかしいので、tailwindcss の `list-inside を適用する */
.markdown ul {
  @apply list-disc list-inside;
}

/* nest した箇条書きを認識しないので見た目を整える */
.markdown ul ul {
  @apply list-disc list-inside m-0 pl-4;
}

/* 数字付き箇条書きが整わないので、list-decimal にする */
.markdown ol {
  @apply list-decimal list-inside;
}

/* inline code で色が何も変わらないので見た目を変える */
.markdown code:not([class]) {
  @apply bg-gray-800 text-gray-200;
}


/* 引用が機能しないので CSS で整える */
.markdown blockquote:not([class]) {
  @apply bg-gray-100 text-gray-600;
}