diff --git a/apps/web/src/common/components/modals/UserAPIKeyModal.vue b/apps/web/src/common/components/modals/UserAPIKeyModal.vue
index 49f9ec2364..1d9d2af6ad 100644
--- a/apps/web/src/common/components/modals/UserAPIKeyModal.vue
+++ b/apps/web/src/common/components/modals/UserAPIKeyModal.vue
@@ -5,7 +5,7 @@ import { reactive, watch } from 'vue';
 import yaml from 'js-yaml';
 
 import {
-    PIconModal, PI, PPaneLayout, PDivider, PCollapsibleToggle, PButton, PLink, PTextEditor,
+    PIconModal, PI, PPaneLayout, PDivider, PCollapsibleToggle, PButton, PLink, PCodeEditor,
 } from '@cloudforet/mirinae';
 import { ACTION_ICON } from '@cloudforet/mirinae/src/navigation/link/type';
 
@@ -124,7 +124,7 @@ watch(() => props.visible, async (visible) => {
                     >
                         {{ state.isAPICollapsed ? $t('IDENTITY.USER.API_KEY.SHOW') : $t('IDENTITY.USER.API_KEY.HIDE') }}
                     </p-collapsible-toggle>
-                    <p-text-editor v-if="!state.isAPICollapsed"
+                    <p-code-editor v-if="!state.isAPICollapsed"
                                    class="m-4"
                                    :code="state.clientSecretCode"
                                    folded
@@ -168,7 +168,7 @@ watch(() => props.visible, async (visible) => {
                     >
                         {{ state.isSpacectlCollapsed ? $t('IDENTITY.USER.API_KEY.SHOW') : $t('IDENTITY.USER.API_KEY.HIDE') }}
                     </p-collapsible-toggle>
-                    <p-text-editor v-if="!state.isSpacectlCollapsed"
+                    <p-code-editor v-if="!state.isSpacectlCollapsed"
                                    class="m-4"
                                    :code="state.yamlItem"
                                    folded
diff --git a/apps/web/src/services/alert-manager/components/AlertDetailTabsPushedEvent.vue b/apps/web/src/services/alert-manager/components/AlertDetailTabsPushedEvent.vue
index 6eb4d9149f..0cfd6fb984 100644
--- a/apps/web/src/services/alert-manager/components/AlertDetailTabsPushedEvent.vue
+++ b/apps/web/src/services/alert-manager/components/AlertDetailTabsPushedEvent.vue
@@ -8,7 +8,7 @@ import { QueryHelper } from '@cloudforet/core-lib/query';
 import { SpaceConnector } from '@cloudforet/core-lib/space-connector';
 import { ApiQueryHelper } from '@cloudforet/core-lib/space-connector/helper';
 import {
-    PButton, PButtonModal, PI, PTextEditor, PToolbox, PEmpty,
+    PButton, PButtonModal, PI, PCodeEditor, PToolbox, PEmpty,
 } from '@cloudforet/mirinae';
 
 import type { ListResponse } from '@/schema/_common/api-verbs/list';
@@ -154,7 +154,7 @@ const onCopyClick = () => {
         >
             <template #body>
                 <div class="content-wrapper">
-                    <p-text-editor :code="state.selectedItem"
+                    <p-code-editor :code="state.selectedItem"
                                    class="code-block"
                                    read-only
                                    folded
diff --git a/apps/web/src/services/asset-inventory/components/MetricExplorerQueryFormSidebar.vue b/apps/web/src/services/asset-inventory/components/MetricExplorerQueryFormSidebar.vue
index 701b89b6d4..1a72c81bf7 100644
--- a/apps/web/src/services/asset-inventory/components/MetricExplorerQueryFormSidebar.vue
+++ b/apps/web/src/services/asset-inventory/components/MetricExplorerQueryFormSidebar.vue
@@ -5,7 +5,7 @@ import { useRoute, useRouter } from 'vue-router/composables';
 
 import { SpaceConnector } from '@cloudforet/core-lib/space-connector';
 import {
-    PFieldGroup, PTextInput, PTextEditor, PButton, POverlayLayout,
+    PFieldGroup, PTextInput, PCodeEditor, PButton, POverlayLayout,
 } from '@cloudforet/mirinae';
 
 
@@ -229,7 +229,7 @@ watch(() => metricExplorerPageState.showMetricQueryFormSidebar, (visible) => {
                                :label="$t('INVENTORY.METRIC_EXPLORER.CUSTOM_METRIC.QUERY_OPTION')"
                                required
                 >
-                    <p-text-editor :code="code"
+                    <p-code-editor :code="code"
                                    :read-only="metricExplorerPageState.metricQueryFormMode === 'VIEW'"
                                    @update:code="setForm('code', $event)"
                     />
diff --git a/apps/web/src/services/asset-inventory/components/ServiceAccountAddClusterScriptField.vue b/apps/web/src/services/asset-inventory/components/ServiceAccountAddClusterScriptField.vue
index c9de3cedcc..ea9982d1fa 100644
--- a/apps/web/src/services/asset-inventory/components/ServiceAccountAddClusterScriptField.vue
+++ b/apps/web/src/services/asset-inventory/components/ServiceAccountAddClusterScriptField.vue
@@ -3,7 +3,7 @@
 import { reactive } from 'vue';
 import type { TranslateResult } from 'vue-i18n';
 
-import { PButton, PTextEditor, PTextHighlighting } from '@cloudforet/mirinae';
+import { PButton, PCodeEditor, PTextHighlighting } from '@cloudforet/mirinae';
 
 import { copyAnyData } from '@/lib/helper/copy-helper';
 
@@ -64,7 +64,7 @@ const handleClickCopyButton = (script: any) => {
         <div class="script-wrapper"
              :style="{'height': props.scriptHeight}"
         >
-            <p-text-editor read-only
+            <p-code-editor read-only
                            :code="props.script"
                            :options="state.options"
             />
diff --git a/apps/web/src/services/asset-inventory/components/ServiceAccountAttachedGeneralAccounts.vue b/apps/web/src/services/asset-inventory/components/ServiceAccountAttachedGeneralAccounts.vue
index 2161ce4808..4ca99f0dfc 100644
--- a/apps/web/src/services/asset-inventory/components/ServiceAccountAttachedGeneralAccounts.vue
+++ b/apps/web/src/services/asset-inventory/components/ServiceAccountAttachedGeneralAccounts.vue
@@ -17,7 +17,7 @@ import {
     PButton,
     PI,
     PButtonModal,
-    PTextEditor,
+    PCodeEditor,
     PTooltip,
     PStatus,
     PDivider,
@@ -384,7 +384,7 @@ watch(() => state.trustedAccountId, async (ta) => {
                         @confirm="handleCloseErrorModal"
         >
             <template #body>
-                <p-text-editor :code="state.lastSyncJob?.error_message" />
+                <p-code-editor :code="state.lastSyncJob?.error_message" />
             </template>
             <template #footer-extra>
                 {{ $t('MANAGEMENT.COLLECTOR_HISTORY.JOB.FINISHED') }}: {{ dayjs(state.lastSyncJob.finished_at).tz(state.timezone).format('YYYY-MM-DD HH:mm:ss') }}
diff --git a/apps/web/src/services/asset-inventory/components/ServiceAccountCredentialsForm.vue b/apps/web/src/services/asset-inventory/components/ServiceAccountCredentialsForm.vue
index df8ae93e2e..1181409225 100644
--- a/apps/web/src/services/asset-inventory/components/ServiceAccountCredentialsForm.vue
+++ b/apps/web/src/services/asset-inventory/components/ServiceAccountCredentialsForm.vue
@@ -9,7 +9,7 @@ import { isEmpty } from 'lodash';
 import { SpaceConnector } from '@cloudforet/core-lib/space-connector';
 import { ApiQueryHelper } from '@cloudforet/core-lib/space-connector/helper';
 import {
-    PFieldGroup, PRadio, PTextEditor, PSelectDropdown, PLink, PCopyButton, PI, PTab, PJsonSchemaForm,
+    PFieldGroup, PRadio, PCodeEditor, PSelectDropdown, PLink, PCopyButton, PI, PTab, PJsonSchemaForm,
 } from '@cloudforet/mirinae';
 import { ACTION_ICON } from '@cloudforet/mirinae/src/navigation/link/type';
 import type { SelectDropdownMenuItem } from '@cloudforet/mirinae/types/controls/dropdown/select-dropdown/type';
@@ -383,7 +383,7 @@ watch([() => storeState.secretSchema, () => state.isTrustedAccount], () => {
                                    :invalid="!checkJsonStringAvailable(formState.credentialJson)"
                                    :invalid-text="$t('IDENTITY.SERVICE_ACCOUNT.ADD.JSON_INVALID')"
                     >
-                        <p-text-editor :code.sync="formState.credentialJson"
+                        <p-code-editor :code.sync="formState.credentialJson"
                                        :disable-auto-reformat="true"
                         />
                     </p-field-group>
diff --git a/apps/web/src/services/cost-explorer/components/DataSourceManagementTabDataCollectionHistoryModal.vue b/apps/web/src/services/cost-explorer/components/DataSourceManagementTabDataCollectionHistoryModal.vue
index 731d8bbdd9..422fb2ad57 100644
--- a/apps/web/src/services/cost-explorer/components/DataSourceManagementTabDataCollectionHistoryModal.vue
+++ b/apps/web/src/services/cost-explorer/components/DataSourceManagementTabDataCollectionHistoryModal.vue
@@ -5,7 +5,7 @@ import type { TranslateResult } from 'vue-i18n';
 import dayjs from 'dayjs';
 
 import {
-    PButtonModal, PTextEditor, PFieldTitle, PToggleButton, PTextInput, PDatetimePicker, PScopedNotification,
+    PButtonModal, PCodeEditor, PFieldTitle, PToggleButton, PTextInput, PDatetimePicker, PScopedNotification,
 } from '@cloudforet/mirinae';
 
 import { i18n } from '@/translations';
@@ -208,7 +208,7 @@ const handleConfirmButton = async () => {
                         {{ props.selectedJobItem.error_code }}
                     </span>
                 </p>
-                <p-text-editor read-only
+                <p-code-editor read-only
                                :code="props.selectedJobItem.error_message"
                 />
             </div>
diff --git a/apps/web/src/services/dashboards/components/dashboard-detail/DashboardShareWithCodeModal.vue b/apps/web/src/services/dashboards/components/dashboard-detail/DashboardShareWithCodeModal.vue
index ab62e4f864..b9bf258d7b 100644
--- a/apps/web/src/services/dashboards/components/dashboard-detail/DashboardShareWithCodeModal.vue
+++ b/apps/web/src/services/dashboards/components/dashboard-detail/DashboardShareWithCodeModal.vue
@@ -3,7 +3,7 @@ import { computed, reactive, watch } from 'vue';
 
 import { SpaceConnector } from '@cloudforet/core-lib/space-connector';
 import {
-    PButtonModal, PTextEditor, PButton,
+    PButtonModal, PCodeEditor, PButton,
 } from '@cloudforet/mirinae';
 
 import type { ListResponse } from '@/schema/_common/api-verbs/list';
@@ -120,7 +120,7 @@ watch(() => props.visible, async (visible) => {
     >
         <template #body>
             <div class="code-wrapper">
-                <p-text-editor :code="state.sharedDashboard"
+                <p-code-editor :code="state.sharedDashboard"
                                readonly
                                folded
                                :loading="state.loading"
diff --git a/apps/web/src/services/iam/components/RoleManagementTabDetail.vue b/apps/web/src/services/iam/components/RoleManagementTabDetail.vue
index 93545abb3f..324d6e87c7 100644
--- a/apps/web/src/services/iam/components/RoleManagementTabDetail.vue
+++ b/apps/web/src/services/iam/components/RoleManagementTabDetail.vue
@@ -7,7 +7,7 @@ import { find } from 'lodash';
 
 import { SpaceConnector } from '@cloudforet/core-lib/space-connector';
 import {
-    PHeading, PI, PTextEditor, PEmpty, PDataTable,
+    PHeading, PI, PCodeEditor, PEmpty, PDataTable,
 } from '@cloudforet/mirinae';
 import type { DataTableField } from '@cloudforet/mirinae/types/data-display/tables/data-table/type';
 
@@ -262,7 +262,7 @@ watch(() => state.selectedRole.role_id, async (roleId) => {
                         </span>
                     </div>
                     <div v-else>
-                        <p-text-editor :code="state.permissionsCode"
+                        <p-code-editor :code="state.permissionsCode"
                                        class="content-wrapper"
                                        read-only
                         />
diff --git a/apps/web/src/services/iam/components/RoleUpdateFormPolicy.vue b/apps/web/src/services/iam/components/RoleUpdateFormPolicy.vue
index 70e7964b49..6520acb465 100644
--- a/apps/web/src/services/iam/components/RoleUpdateFormPolicy.vue
+++ b/apps/web/src/services/iam/components/RoleUpdateFormPolicy.vue
@@ -3,7 +3,7 @@ import { computed, reactive, watch } from 'vue';
 import type { TranslateResult } from 'vue-i18n';
 
 import {
-    PHeading, PI, PRadioGroup, PRadio, PTextEditor,
+    PHeading, PI, PRadioGroup, PRadio, PCodeEditor,
 } from '@cloudforet/mirinae';
 
 import { ROLE_TYPE } from '@/schema/identity/role/constant';
@@ -97,7 +97,7 @@ watch(() => props.initialPermissions, (value) => {
                 {{ $t('IAM.ROLE.FORM.DEFAULT_API_POLICY_HELP_TEXT') }}
             </span>
         </div>
-        <p-text-editor v-else
+        <p-code-editor v-else
                        :code="state.code"
                        class="content-wrapper"
                        @update:code="handleCodeUpdate"