Oxygen: Cara Mengubah Kode Blok di Tema

Di tulis oleh: Cara Cerdik
Ketegori:
Diperbaharui: 27 Mei 2021
Waktu baca: 1 menit

Jika Anda sering menambahkan kode CSS atau JS khusus di Oxygen, Anda mungkin sudah mengetahui bahwa tema editor Kode tidak terlihat bagus. Warnanya agak pudar, dengan 'merah' yang sangat mengganggu yang membuatnya sulit untuk dibaca, terutama setelah bekerja berjam-jam di malam hari;)

Secara kebetulan, mereka telah membuat skrip untuk membuat editor terlihat jauh lebih baik, seperti yang Anda lihat dari screenshot berikut:

Sebelum Mengubah Kode Block di Tema
Sebelum Mengubah Kode Block di Tema
sesudah Mengubah Kode Block di Tema
sesudah Mengubah Kode Block di Tema

Untuk mengubah Theme Editor Kode, cukup gunakan plugin Advanced Scripts dan tambahkan kode berikut. Pastikan untuk memilih jenis CSS: Compile SCSS Code dan masukkan oxygen enqueue ui scripts sebagai nama Hook.

/*
 Title:     Oxygen Code Editor Theme
 Type:      CSS > Compile SCSS Code
 Location:  Custom Hooks
 Hook name: oxygen_enqueue_ui_scripts
 Priority:  10
 */
 oxygen-ui {
 .cm-s-default {     &.CodeMirror {         background-color: #263238 !important;         color: rgba(233, 237, 237, 1) !important;         font-size:15px !important;     }     .CodeMirror-gutters {         background: #263238 !important;         color: rgb(83, 127, 126) !important;         border: none !important;     }     .CodeMirror-guttermarker,     .CodeMirror-guttermarker-subtle,     .CodeMirror-linenumber {         color: rgb(83, 127, 126);     }     .CodeMirror-cursor {         border-left: 1px solid #f8f8f0;     }     div.CodeMirror-selected,     &.CodeMirror-focused div.CodeMirror-selected,     .CodeMirror-line::selection,     .CodeMirror-line::-moz-selection,     .CodeMirror-line > span::selection,     .CodeMirror-line > span::-moz-selection,     .CodeMirror-line > span > span::selection,     .CodeMirror-line > span > span::-moz-selection {         background: rgba(255, 255, 255, 0.15) !important;     }     .CodeMirror-activeline-background {         background: rgba(0, 0, 0, 0.2);     }     .cm-keyword {         color: rgba(199, 146, 234, 1);     }     .cm-operator {         color: rgba(233, 237, 237, 1);     }     .cm-variable-2 {         color: #80cbc4;     }     .cm-variable-3,     .cm-type {         color: #82b1ff;     }     .cm-builtin {         color: #decb6b;     }     .cm-atom {         color: #f77669;     }     .cm-number {         color: #f77669;     }     .cm-def {         color: rgba(233, 237, 237, 1);     }     .cm-string {         color: #c3e88d;     }     .cm-string-2 {         color: #80cbc4;     }     .cm-comment {         color: #dcedc8;     }     .cm-variable {         color: #82b1ff;     }     .cm-tag {         color: #80cbc4;     }     .cm-meta {         color: #80cbc4;     }     .cm-attribute {         color: #ffcb6b;     }     .cm-property {         color: #80cbae;     }     .cm-qualifier {         color: #decb6b;     }     .cm-variable-3,     .cm-type {         color: #decb6b;     }     .cm-tag {         color: rgba(255, 83, 112, 1);     }     .cm-error {         color: rgba(255, 255, 255, 1);         background-color: #ec5f67;     } }
 }
https://oxygen4fun.supadezign.com/

Artikel Lainnya