Add changes for footnote feature

content/posts/sample.mdx

@@ -42,10 +42,16 @@ export const SampleComponent = ({ children }: Props) => {
 
 This is a `code` inline.
 
+## footnote
+
+This is a sample post. [^1]
+
+[^1]: This is a footnote.
+
 ## Table
 
 | Name | Age | Sex |
-| ---- | --- | --- |
+| :---- | :---: | ---: |
 | John | 20  | M   |
 | Jane | 22  | F   |
 
@@ -83,12 +89,6 @@ _italic_
 
 ---
 
-## footnote
-
-This is a sample post.
-
-[^1]: This is a footnote.
-
 ## Line Break
 
 This line includes a line<br/>break.

contentlayer.config.js

@@ -3,6 +3,8 @@ import rehypeSlug from 'rehype-slug';
 import rehypePrism from 'rehype-prism-plus';
 import rehypeCodeTitles from 'rehype-code-titles';
 import readingTime from 'reading-time';
+import remarkFootnotes from 'remark-footnotes';
+import remarkGfm from 'remark-gfm';
 
 /** @type {import('contentlayer/source-files').ComputedFields} */
 const computedFields = {
@@ -61,6 +63,12 @@ export default makeSource({
   contentDirPath: './content',
   documentTypes: [Post, Page],
   mdx: {
+    remarkPlugins: [
+      // remark-gfm 4.0.0 has an issue to render table.
+      // @see https://github.com/remarkjs/remark-gfm/issues/57
+      remarkGfm,
+      [remarkFootnotes, { inlineNotes: true }],
+    ],
     rehypePlugins: [
       rehypeSlug,
       rehypeCodeTitles,

package.json

@@ -41,6 +41,8 @@
     "rehype-code-titles": "^1.2.0",
     "rehype-prism-plus": "^2.0.0",
     "rehype-slug": "^6.0.0",
+    "remark-footnotes": "^4.0.1",
+    "remark-gfm": "^3.0.1",
     "tailwind-merge": "^2.2.1",
     "tailwindcss": "3.3.2",
     "tailwindcss-animate": "^1.0.7",