diff --git a/src/renderer/components/MonacoEditor.vue b/src/renderer/components/MonacoEditor.vue
index c90e5d55..d38e5458 100644
--- a/src/renderer/components/MonacoEditor.vue
+++ b/src/renderer/components/MonacoEditor.vue
@@ -9,6 +9,7 @@ import { getDefaultOptions } from '@fe/services/editor'
 import { toUri } from '@fe/services/document'
 import { triggerHook } from '@fe/core/hook'
 import { MONACO_EDITOR_NLS } from '@fe/support/args'
+import { isMarkdownFile } from '@share/misc'
 
 export default defineComponent({
   name: 'monaco-editor',
@@ -49,7 +50,13 @@ export default defineComponent({
         model!.setValue(value)
       }
 
-      editor.setModel(model!)
+      const currentModel = model!
+
+      if (isMarkdownFile(uri.path) && currentModel.getLanguageId() !== 'markdown') {
+        monaco.editor.setModelLanguage(currentModel, 'markdown')
+      }
+
+      editor.setModel(currentModel)
     }
 
     function initMonaco () {
diff --git a/src/renderer/others/file-extensions.ts b/src/renderer/others/file-extensions.ts
index fa7c8a1a..138f3722 100644
--- a/src/renderer/others/file-extensions.ts
+++ b/src/renderer/others/file-extensions.ts
@@ -56,6 +56,7 @@ const extensions = [
   '.less',
   '.lua',
   '.md',
+  '.mdx',
   '.markdown',
   '.mdown',
   '.mkdn',
diff --git a/src/share/__tests__/misc.ts b/src/share/__tests__/misc.ts
index 2ad62cc6..0d133328 100644
--- a/src/share/__tests__/misc.ts
+++ b/src/share/__tests__/misc.ts
@@ -36,13 +36,18 @@ describe('misc utilities', () => {
   describe('isMarkdownFile', () => {
     test('should return true for .md files', () => {
       expect(isMarkdownFile('test.md')).toBe(true)
+      expect(isMarkdownFile('test.mdx')).toBe(true)
+      expect(isMarkdownFile('test.markdown')).toBe(true)
       expect(isMarkdownFile('/path/to/file.md')).toBe(true)
+      expect(isMarkdownFile('/path/to/file.mdx')).toBe(true)
+      expect(isMarkdownFile('/path/to/file.markdown')).toBe(true)
       expect(isMarkdownFile('nested/folder/document.md')).toBe(true)
+      expect(isMarkdownFile('nested/folder/document.mdx')).toBe(true)
+      expect(isMarkdownFile('nested/folder/document.markdown')).toBe(true)
     })
 
     test('should return false for non-.md files', () => {
       expect(isMarkdownFile('test.txt')).toBe(false)
-      expect(isMarkdownFile('test.markdown')).toBe(false)
       expect(isMarkdownFile('test')).toBe(false)
       expect(isMarkdownFile('test.md.txt')).toBe(false)
     })
diff --git a/src/share/misc.ts b/src/share/misc.ts
index 5981a03c..c33ae179 100644
--- a/src/share/misc.ts
+++ b/src/share/misc.ts
@@ -1,6 +1,8 @@
 import { Language, translate } from './i18n'
 
 export const MARKDOWN_FILE_EXT = '.md'
+export const MARKDOWN_X_FILE_EXT = '.mdx'
+export const MARKDOWN_LONG_FILE_EXT = '.markdown'
 export const ENCRYPTED_MARKDOWN_FILE_EXT = '.c.md'
 
 export const DOC_HISTORY_MAX_CONTENT_LENGTH = 102400
@@ -24,7 +26,9 @@ export const HOMEPAGE_URL = 'https://yank-note.com'
 export const GUIDE_URL = 'https://help.yank-note.com'
 
 export function isMarkdownFile (path: string) {
-  return path.endsWith(MARKDOWN_FILE_EXT)
+  return path.endsWith(MARKDOWN_FILE_EXT) ||
+    path.endsWith(MARKDOWN_X_FILE_EXT) ||
+    path.endsWith(MARKDOWN_LONG_FILE_EXT)
 }
 
 export function isEncryptedMarkdownFile (path: string) {
diff --git a/test/md/markdown-basic.markdown b/test/md/markdown-basic.markdown
new file mode 100644
index 00000000..af236246
--- /dev/null
+++ b/test/md/markdown-basic.markdown
@@ -0,0 +1,8 @@
+# Markdown Basic
+
+This `.markdown` file should be treated like Markdown in the editor and preview.
+
+1. first
+2. second
+
+> blockquote
diff --git a/test/md/mdx-basic.mdx b/test/md/mdx-basic.mdx
new file mode 100644
index 00000000..9ad3a4a2
--- /dev/null
+++ b/test/md/mdx-basic.mdx
@@ -0,0 +1,10 @@
+# MDX Basic
+
+This `.mdx` file should be treated like Markdown in the editor and preview.
+
+- item one
+- item two
+
+```js
+console.log('mdx')
+```