diff --git a/apps/website/src/lib/tiptap/marks/code.ts b/apps/website/src/lib/tiptap/marks/code.ts
new file mode 100644
index 000000000..2b4684037
--- /dev/null
+++ b/apps/website/src/lib/tiptap/marks/code.ts
@@ -0,0 +1,39 @@
+import { Mark, mergeAttributes } from '@tiptap/core';
+import { css } from '$styled-system/css';
+
+declare module '@tiptap/core' {
+  // eslint-disable-next-line @typescript-eslint/consistent-type-definitions
+  interface Commands<ReturnType> {
+    code: {
+      toggleCode: () => ReturnType;
+    };
+  }
+}
+
+export const Code = Mark.create({
+  name: 'code',
+
+  parseHTML() {
+    return [{ tag: 'code' }];
+  },
+
+  renderHTML({ HTMLAttributes }) {
+    return ['code', mergeAttributes(HTMLAttributes, { class: css({ fontFamily: 'mono' }) }), 0];
+  },
+
+  addCommands() {
+    return {
+      toggleCode:
+        () =>
+        ({ commands }) => {
+          return commands.toggleMark(this.name);
+        },
+    };
+  },
+
+  addKeyboardShortcuts() {
+    return {
+      'Mod-e': () => this.editor.commands.toggleCode(),
+    };
+  },
+});
diff --git a/apps/website/src/lib/tiptap/marks/index.ts b/apps/website/src/lib/tiptap/marks/index.ts
index 194ec966e..78777fd26 100644
--- a/apps/website/src/lib/tiptap/marks/index.ts
+++ b/apps/website/src/lib/tiptap/marks/index.ts
@@ -1,4 +1,5 @@
 export * from './bold';
+export * from './code';
 export * from './font-color';
 export * from './font-family';
 export * from './font-size';
diff --git a/apps/website/src/routes/editor/[permalink]/TextEditToolbar.svelte b/apps/website/src/routes/editor/[permalink]/TextEditToolbar.svelte
index 2d74b91d3..85ba74b98 100644
--- a/apps/website/src/routes/editor/[permalink]/TextEditToolbar.svelte
+++ b/apps/website/src/routes/editor/[permalink]/TextEditToolbar.svelte
@@ -6,6 +6,7 @@
   import IconBold from '~icons/tabler/bold';
   import IconCheck from '~icons/tabler/check';
   import IconChevronDown from '~icons/tabler/chevron-down';
+  import IconCode from '~icons/tabler/code';
   import IconItalic from '~icons/tabler/italic';
   import IconSettings from '~icons/tabler/settings';
   import IconStrikethrough from '~icons/tabler/strikethrough';
@@ -237,6 +238,14 @@
       on:click={() => editor?.chain().focus().toggleUnderline().run()}
     />
   </ToolbarButtonTooltip>
+
+  <ToolbarButtonTooltip message="코드로 표시">
+    <ToolbarButton
+      aria-pressed={editor?.isActive('code')}
+      icon={IconCode}
+      on:click={() => editor?.chain().focus().toggleCode().run()}
+    />
+  </ToolbarButtonTooltip>
 </div>
 
 <hr class={css({ border: 'none', width: '1px', height: '12px', backgroundColor: 'gray.150' })} />