diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
index 90842989..08221009 100644
--- a/.github/workflows/ci.yml
+++ b/.github/workflows/ci.yml
@@ -54,10 +54,10 @@ jobs:
         name: ${{ steps.create_tag.outputs.version }}
         tag: ${{ steps.create_tag.outputs.version }}
         body: |
-          [![](https://img.shields.io/badge/Open%20in-unpkg-blue)](https://uiwjs.github.io/npm-unpkg/#/pkg/@uiw/react-textarea-code-editor@${{steps.create_tag.outputs.versionNumber}}/file/README.md) [![npm bundle size](https://img.shields.io/bundlephobia/minzip/@uiw/react-textarea-code-editor)](https://bundlephobia.com/result?p=@uiw/react-textarea-code-editor@${{steps.create_tag.outputs.versionNumber}})
+          [![](https://img.shields.io/badge/Open%20in-unpkg-blue)](https://uiwjs.github.io/npm-unpkg/#/pkg/react-textarea-code-editor-2@${{steps.create_tag.outputs.versionNumber}}/file/README.md) [![npm bundle size](https://img.shields.io/bundlephobia/minzip/react-textarea-code-editor-2)](https://bundlephobia.com/result?p=react-textarea-code-editor-2@${{steps.create_tag.outputs.versionNumber}})
 
           ```bash
-          npm i @uiw/react-textarea-code-editor@${{steps.create_tag.outputs.versionNumber}}
+          npm i react-textarea-code-editor-2@${{steps.create_tag.outputs.versionNumber}}
           ```
 
           ${{ steps.changelog.outputs.compareurl }}
diff --git a/README.md b/README.md
index ef5f8b05..780f1487 100644
--- a/README.md
+++ b/README.md
@@ -2,7 +2,7 @@ React Textarea Code Editor
 ===
 <!--rehype:style=display:none;-->
 
-[![Build & Deploy](https://github.com/uiwjs/react-textarea-code-editor/actions/workflows/ci.yml/badge.svg)](https://github.com/uiwjs/react-textarea-code-editor/actions/workflows/ci.yml) [![Coverage Status](https://uiwjs.github.io/react-textarea-code-editor/coverage/badges.svg)](https://uiwjs.github.io/react-textarea-code-editor/coverage/lcov-report) [![Coverage Status](https://img.shields.io/npm/dm/@uiw/react-textarea-code-editor.svg?style=flat)](https://www.npmjs.com/package/@uiw/react-textarea-code-editor) [![Open in unpkg](https://img.shields.io/badge/Open%20in-unpkg-blue)](https://uiwjs.github.io/npm-unpkg/#/pkg/@uiw/react-textarea-code-editor/file/README.md) [![npm bundle size](https://img.shields.io/bundlephobia/minzip/@uiw/react-textarea-code-editor)](https://bundlephobia.com/package/@uiw/react-textarea-code-editor) [![npm version](https://img.shields.io/npm/v/@uiw/react-textarea-code-editor.svg)](https://www.npmjs.com/package/@uiw/react-textarea-code-editor)
+[![Build & Deploy](https://github.com/uiwjs/react-textarea-code-editor/actions/workflows/ci.yml/badge.svg)](https://github.com/uiwjs/react-textarea-code-editor/actions/workflows/ci.yml) [![Coverage Status](https://uiwjs.github.io/react-textarea-code-editor/coverage/badges.svg)](https://uiwjs.github.io/react-textarea-code-editor/coverage/lcov-report) [![Coverage Status](https://img.shields.io/npm/dm/react-textarea-code-editor-2.svg?style=flat)](https://www.npmjs.com/package/react-textarea-code-editor-2) [![Open in unpkg](https://img.shields.io/badge/Open%20in-unpkg-blue)](https://uiwjs.github.io/npm-unpkg/#/pkg/react-textarea-code-editor-2/file/README.md) [![npm bundle size](https://img.shields.io/bundlephobia/minzip/react-textarea-code-editor-2)](https://bundlephobia.com/package/react-textarea-code-editor-2) [![npm version](https://img.shields.io/npm/v/react-textarea-code-editor-2.svg)](https://www.npmjs.com/package/react-textarea-code-editor-2)
 
 A simple code editor with syntax highlighting. This library aims to provide a simple code editor with syntax highlighting support without any of the extra features, perfect for simple embeds and forms where users can submit code.
 
@@ -17,7 +17,7 @@ A simple code editor with syntax highlighting. This library aims to provide a si
 ## Install
 
 ```bash
-$ npm i @uiw/react-textarea-code-editor
+$ npm i react-textarea-code-editor-2
 ```
 
 ## Usage
@@ -26,7 +26,7 @@ $ npm i @uiw/react-textarea-code-editor
 [![Open in Github gh-pages](https://img.shields.io/badge/Open%20In-Github%20gh--pages-blue?logo=github)](https://uiwjs.github.io/react-textarea-code-editor/)
 
 ```jsx
-import CodeEditor from '@uiw/react-textarea-code-editor';
+import CodeEditor from 'react-textarea-code-editor-2';
 
 function App() {
   const [code, setCode] = React.useState(
@@ -57,7 +57,7 @@ Use examples in nextjs. [#31](https://github.com/uiwjs/react-textarea-code-edito
 
 ```bash
 npm install next-remove-imports
-npm install @uiw/react-textarea-code-editor@v1.4.4
+npm install react-textarea-code-editor-2@v1.4.4
 ```
 
 ```js
@@ -71,10 +71,10 @@ module.exports = removeImports({
 ```jsx
 import React from "react";
 import dynamic from "next/dynamic";
-import "@uiw/react-textarea-code-editor/dist.css";
+import "react-textarea-code-editor-2/dist.css";
 
 const CodeEditor = dynamic(
-  () => import("@uiw/react-textarea-code-editor").then((mod) => mod.default),
+  () => import("react-textarea-code-editor-2").then((mod) => mod.default),
   { ssr: false }
 );
 
@@ -106,6 +106,9 @@ export default HomePage;
 
 ## Props
 
+See [`refractor.register(syntax)`](https://github.com/wooorm/refractor#refractorregistersyntax) to understand
+what to pass to `syntax` prop.
+
 ```ts
 interface TextareaCodeEditorProps extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {
   prefixCls?: string;
@@ -121,6 +124,10 @@ interface TextareaCodeEditorProps extends React.TextareaHTMLAttributes<HTMLTextA
    * The minimum height of the editor. Default: `16`.
    */
   minHeight?: number;
+  /**
+   * A refractor syntax (Prism language definition) to be registered by refractor. Default: `undefined`.
+   */
+  syntax?: refractor.RefractorSyntax;
 }
 ```
 
diff --git a/package.json b/package.json
index 68187104..e41ccaef 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
-  "name": "@uiw/react-textarea-code-editor",
-  "version": "1.4.15",
+  "name": "react-textarea-code-editor-2",
+  "version": "1.4.17",
   "description": "A simple code editor with syntax highlighting.",
   "homepage": "https://uiwjs.github.io/react-textarea-code-editor/",
   "main": "cjs/index.js",
@@ -65,9 +65,10 @@
     "react-dom": ">=16.9.0"
   },
   "dependencies": {
-    "@babel/runtime": "7.16.7",
-    "@mapbox/rehype-prism": "0.8.0",
-    "rehype": "12.0.0"
+    "@babel/runtime": ">=7.10.0",
+    "@types/refractor": "^3.0.2",
+    "rehype": "12.0.0",
+    "rehype-prism-2": "^0.8.1"
   },
   "devDependencies": {
     "@kkt/less-modules": "7.0.4",
@@ -77,8 +78,8 @@
     "@types/react-dom": "17.0.11",
     "@types/react-test-renderer": "17.0.1",
     "@uiw/react-github-corners": "1.5.3",
-    "@uiw/react-markdown-preview": "3.4.6",
     "@uiw/react-loader": "4.9.7",
+    "@uiw/react-markdown-preview": "3.4.6",
     "code-example": "3.3.1",
     "compile-less-cli": "1.8.11",
     "husky": "7.0.4",
@@ -88,7 +89,7 @@
     "react": "17.0.2",
     "react-dom": "17.0.2",
     "react-test-renderer": "17.0.2",
-    "tsbb" :"3.5.4"
+    "tsbb": "3.5.4"
   },
   "eslintConfig": {
     "extends": [
diff --git a/src/index.tsx b/src/index.tsx
index 247250da..4810f288 100644
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -1,4 +1,5 @@
 import React, { useEffect, useImperativeHandle, useMemo, useRef, useState } from 'react';
+import refractor from 'refractor';
 import { processHtml, htmlEncode } from './utils';
 import shortcuts from './shortcuts';
 import * as styles from './styles';
@@ -20,6 +21,10 @@ export interface TextareaCodeEditorProps extends React.TextareaHTMLAttributes<HT
    * The minimum height of the editor. Default: `16`.
    */
   minHeight?: number;
+  /**
+   * A refractor syntax (Prism language definition) to be registered by refractor. Default: `undefined`.
+   */
+  syntax?: refractor.RefractorSyntax;
 }
 
 export default React.forwardRef<HTMLTextAreaElement, TextareaCodeEditorProps>((props, ref) => {
@@ -28,6 +33,7 @@ export default React.forwardRef<HTMLTextAreaElement, TextareaCodeEditorProps>((p
     value: _,
     padding = 10,
     minHeight = 16,
+    syntax = undefined,
     placeholder,
     language,
     className,
@@ -54,6 +60,7 @@ export default React.forwardRef<HTMLTextAreaElement, TextareaCodeEditorProps>((p
         `<pre aria-hidden=true><code ${language ? `class="language-${language}"` : ''} >${htmlEncode(
           String(value || ''),
         )}</code><br /></pre>`,
+        syntax,
       ),
     [value, language],
   );
diff --git a/src/utils.ts b/src/utils.ts
index 8968348e..28808955 100644
--- a/src/utils.ts
+++ b/src/utils.ts
@@ -1,11 +1,12 @@
 import { rehype } from 'rehype';
 // @ts-ignore
-import rehypePrism from '@mapbox/rehype-prism';
+import rehypePrism from 'rehype-prism-2';
+import refractor from 'refractor';
 
-export const processHtml = (html: string) => {
+export const processHtml = (html: string, syntax: refractor.RefractorSyntax | undefined) => {
   return rehype()
     .data('settings', { fragment: true })
-    .use(rehypePrism, { ignoreMissing: true })
+    .use(rehypePrism, { ignoreMissing: true, syntax: syntax })
     .processSync(`${html}`)
     .toString();
 };