Zenn
Open9

Next.js Blog

Next.js
pontaponta

ファイル名を[ ]で囲むことでNextにダイナミックルーティングを知らせる．

pages/post/[postname].js = localhost:3000/post/:postname

pontaponta

Next 9.4から
.../.../components/something => @components/something
と書けるようになった！importがキレイに書ける

jsconfig.json
{
  "compilerOptions": {
    "baseUrl": "./",
    "paths": {
      "@components/*": ["components/*"],
      "@utils/*": ["utils/*"]
    }
  }
}

とすればいい

pontaponta

Markdownでシンタックスハイライティングをしたい

利用ライブラリなどはZennを参考にしている．

  • markdown-it
  • markdown-it-highlight
  • highlight.js

を利用すれば，インラインコードの表示とシンタックスハイライティングが実現できる．

var md = require('markdown-it')({
    highlight: function (str, lang) {
      if (lang && hljs.getLanguage(lang)) {
        try {
          return hljs.highlight(lang, str).value;
        } catch (__) {}
      }
  
      return '<pre class="hljs"><code>' + md.utils.escapeHtml(str) + '</code></pre>'; // use external default escaping
    }
  })
  .use(markdonwItHighlight)

参考

pontaponta

Markdownで数式表示したい

  • markdown-it-katex

を使えば実現できる．

var md = require('markdown-it')({
    highlight: function (str, lang) {
      if (lang && hljs.getLanguage(lang)) {
        try {
          return hljs.highlight(lang, str).value;
        } catch (__) {}
      }
  
      return '<pre class="hljs"><code>' + md.utils.escapeHtml(str) + '</code></pre>'; // use external default escaping
    }
  })
  .use(markdonwItHighlight)
  .use(markdonwItKatex)

これだけでは数式のスタイルが適用されない．以下を追加して，CSSを読み込む必要がある．

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/KaTeX/0.5.1/katex.min.css">

参考

pontaponta

一時的にMarkdownのスタイルを適用しておきたい

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/github-markdown-css@3.0.1/github-markdown.min.css"></link>

を追加．その後，markdownで書いたコンテンツを，

<div className="markdown-body">
    <Content>
</div>

のように囲んでおけば適用される．

pontaponta

Markdownでの脚注を利用可能にする

  1. markdown-it-footnoteをインストール
npm install markdown-it-footnote --save
  1. .useでプラグインを追加
var md = require('markdown-it')()
            .use(require('markdown-it-footnote'));
pontaponta

画像サイズの指定を可能にする．

  1. (markdown-it-imsize)[https://github.com/tatsy/markdown-it-imsize]をインストール
npm install markdown-it-imsize
  1. .useでプラグインを追加
var md = require('MarkdownIt')({
    html: true,
    linkify: true,
    typography: true
  }).use(require('MarkdownItImsize'));

※注意

このまま使うとModule not found: Can't resolve 'fs'になる

試したこと

  1. (nable to make it work using browserify #8)[https://github.com/tatsy/markdown-it-imsize/issues/8]

node_modules/markdown-it-imsize/webpack.configに

  node: {
    fs: "empty"
  }

を追加しようと思ったが，すでにそうなっていた．

  1. package.jsonに
"browser": {
"fs": false
},

を追加
これで解決できた！