diff --git a/app/packages/remark-emoji-name/index.ts b/app/packages/remark-emoji-name/index.ts new file mode 100644 index 0000000..97e7249 --- /dev/null +++ b/app/packages/remark-emoji-name/index.ts @@ -0,0 +1,33 @@ +import type { Root } from "mdast"; +import type { Plugin } from "unified"; +import { visit } from "unist-util-visit"; + +type EmojiMap = { [key: string]: string }; + +const emojiMap: EmojiMap = { + ":heart:": "❤️", + ":ok_hand:": "👌", + ":thumbsup:": "👍", + ":clap:": "👏", + ":pray:": "🙏", + ":muscle:": "💪", + ":white_check_mark:": "✅", +}; + +const remarkEmojiName: Plugin<[], Root> = () => { + const regex = /:[a-zA-Z0-9_]+:/g; + return (tree) => { + visit(tree, "text", (node) => { + const matches = node.value.match(regex); + if (matches) { + for (const match of matches) { + if (emojiMap[match]) { + node.value = node.value.replace(match, emojiMap[match]); + } + } + } + }); + }; +}; + +export default remarkEmojiName; diff --git a/app/routes/posts/md-test.mdx b/app/routes/posts/md-test.mdx index 268a169..a0ab816 100644 --- a/app/routes/posts/md-test.mdx +++ b/app/routes/posts/md-test.mdx @@ -40,7 +40,7 @@ publishedAt: 2024/09/14 console.log("Hello, TypeScript!"); ``` -- こちらは、Mermaid のサンプルです。 +- こちらは、Mermaid のサンプルです:ok_hand: ```mermaid classDiagram diff --git a/vite.config.ts b/vite.config.ts index 7f04ef6..2805882 100644 --- a/vite.config.ts +++ b/vite.config.ts @@ -11,6 +11,7 @@ import remarkGfm from 'remark-gfm' import rehypeMomiji from './app/packages/rehype-momiji' import remarkMomijiCodeFilename from './app/packages/remark-momiji-filename' import rehypeMermaid from './app/packages/rehype-mermaid/rehypeMermaid' +import remarkEmojiName from './app/packages/remark-emoji-name' export default defineConfig(() => { return { @@ -23,7 +24,7 @@ export default defineConfig(() => { ssg({ entry: "./app/server.ts" }), mdx({ jsxImportSource: 'hono/jsx', - remarkPlugins: [remarkGfm, remarkBreaks, remarkFrontmatter, remarkMdxFrontmatter, remarkMomijiCodeFilename], + remarkPlugins: [remarkGfm, remarkBreaks, remarkFrontmatter, remarkMdxFrontmatter, remarkMomijiCodeFilename, remarkEmojiName], rehypePlugins: [[rehypeMomiji, { excludeLangs: ['mermaid'] }], rehypeMermaid], }) ],