diff --git a/modules/cms-kit/src/Volo.CmsKit.Admin.Web/Pages/CmsKit/GlobalResources/Index.cshtml b/modules/cms-kit/src/Volo.CmsKit.Admin.Web/Pages/CmsKit/GlobalResources/Index.cshtml
index b67a147baa..615ef31477 100644
--- a/modules/cms-kit/src/Volo.CmsKit.Admin.Web/Pages/CmsKit/GlobalResources/Index.cshtml
+++ b/modules/cms-kit/src/Volo.CmsKit.Admin.Web/Pages/CmsKit/GlobalResources/Index.cshtml
@@ -2,6 +2,7 @@
 
 @using Microsoft.AspNetCore.Mvc.Localization
 @using Volo.Abp.AspNetCore.Mvc.UI.Layout
+@using Volo.Abp.AspNetCore.Mvc.UI.Packages.Codemirror
 @using Volo.CmsKit.Admin.Web.Pages.CmsKit.GlobalResources
 @using Volo.CmsKit.Admin.Web.Menus
 @using Volo.CmsKit.Localization
@@ -17,8 +18,15 @@
     PageLayout.Content.MenuItemName = CmsKitAdminMenus.GlobalResources.GlobalResourcesMenu;
 }
 
+@section styles{
+    <abp-style type="typeof(CodemirrorStyleContributor)" />
+}
+
 @section scripts {
     <abp-script-bundle>
+        <abp-script type="typeof(CodemirrorScriptContributor )"/>
+        <abp-script src="/libs/codemirror/mode/css/css.js"/>
+        <abp-script src="/libs/codemirror/mode/javascript/javascript.js"/>
         <abp-script src="/client-proxies/cms-kit-common-proxy.js"/>
         <abp-script src="/client-proxies/cms-kit-admin-proxy.js"/>
         <abp-script src="/Pages/CmsKit/GlobalResources/index.js"/>
diff --git a/modules/cms-kit/src/Volo.CmsKit.Admin.Web/Pages/CmsKit/GlobalResources/index.js b/modules/cms-kit/src/Volo.CmsKit.Admin.Web/Pages/CmsKit/GlobalResources/index.js
index 72fb11e8dc..c58447b22d 100644
--- a/modules/cms-kit/src/Volo.CmsKit.Admin.Web/Pages/CmsKit/GlobalResources/index.js
+++ b/modules/cms-kit/src/Volo.CmsKit.Admin.Web/Pages/CmsKit/GlobalResources/index.js
@@ -3,11 +3,26 @@ $(function (){
     
     var service = volo.cmsKit.admin.globalResources.globalResourceAdmin;
 
+    var scriptEditor = CodeMirror.fromTextArea(document.getElementById("ScriptContent"),{
+        mode:"javascript",
+        lineNumbers:true
+    });
+
+    var styleEditor = CodeMirror.fromTextArea(document.getElementById("StyleContent"),{
+        mode:"css",
+        lineNumbers:true
+    });
+
+    $('.nav-tabs a').on('shown.bs.tab', function() {
+        scriptEditor.refresh();
+        styleEditor.refresh();
+    });
+
     $('#SaveResourcesButton').on('click','',function(){
         service.setGlobalResources(
             {
-                style: $('#StyleContent').val(),
-                script: $('#ScriptContent').val()
+                style: styleEditor.getValue(),
+                script: scriptEditor.getValue()
             }
         ).then(function () {
             abp.message.success(l("SavedSuccessfully"));
diff --git a/npm/packs/cms-kit.admin/package.json b/npm/packs/cms-kit.admin/package.json
index 528bdb3ac0..524583a187 100644
--- a/npm/packs/cms-kit.admin/package.json
+++ b/npm/packs/cms-kit.admin/package.json
@@ -8,7 +8,8 @@
     "@abp/jstree": "~5.2.0-rc.1",
     "@abp/slugify": "~5.2.0-rc.1",
     "@abp/tui-editor": "~5.2.0-rc.1",
-    "@abp/uppy": "~5.2.0-rc.1"
+    "@abp/uppy": "~5.2.0-rc.1",
+    "@abp/codemirror": "~5.2.0-rc.1"
   },
   "gitHead": "bb4ea17d5996f01889134c138d00b6c8f858a431"
 }
diff --git a/npm/packs/codemirror/abp.resourcemapping.js b/npm/packs/codemirror/abp.resourcemapping.js
index 71731c389b..d7f349b54a 100644
--- a/npm/packs/codemirror/abp.resourcemapping.js
+++ b/npm/packs/codemirror/abp.resourcemapping.js
@@ -1,5 +1,8 @@
 module.exports = {
     mappings: {
-        "@node_modules/codemirror/lib/*.*": "@libs/codemirror/"
+        "@node_modules/codemirror/lib/*.*": "@libs/codemirror/",
+        "@node_modules/codemirror/mode/**/*.*": "@libs/codemirror/mode/",
+        "@node_modules/codemirror/theme/**/*.*": "@libs/codemirror/theme/",
+        "@node_modules/codemirror/addon/**/*.*": "@libs/codemirror/addon/"
     }
 }
\ No newline at end of file