Editor Kode Sederhana Mati dengan Snortax Sorot dan Nomor Baris. 3KB/z
Editor berfungsi baik untuk Vue 2.x dan Vue 3.x dan Anda saat ini berada di cabang yang mendukung Vue 2.x. Buka di sini untuk versi kompatibel Vue 3.x
prism-editor.netlify.com
Beberapa editor kode berbasis browser seperti ACE, Codemirror, Monako dll. Memberikan kemampuan untuk menyematkan editor kode berfitur lengkap di halaman web Anda. Namun, jika Anda hanya memerlukan editor sederhana dengan sintaksis sintaks tanpa fitur tambahan, mereka bisa berlebihan karena biasanya tidak memiliki jejak ukuran bundel kecil. Perpustakaan ini bertujuan untuk menyediakan editor kode sederhana dengan dukungan sorot sintaks tanpa fitur tambahan, sempurna untuk sematan dan formulir sederhana di mana pengguna dapat mengirimkan kode.
npm install vue-prism-editoratau
yarn add vue-prism-editorAnda perlu menggunakan editor dengan perpustakaan pihak ketiga yang menyediakan penyorotan sintaksis. Misalnya, itu akan terlihat seperti mengikuti prismjs:
Daftarkan komponen secara lokal dan gunakan (disarankan)
< template >
< prism-editor class =" my-editor " v-model =" code " :highlight =" highlighter " line-numbers > </ prism-editor >
</ template >
< script >
// import Prism Editor
import { PrismEditor } from 'vue-prism-editor' ;
import 'vue-prism-editor/dist/prismeditor.min.css' ; // import the styles somewhere
// import highlighting library (you can use any library you want just return html string)
import { highlight , languages } from 'prismjs/components/prism-core' ;
import 'prismjs/components/prism-clike' ;
import 'prismjs/components/prism-javascript' ;
import 'prismjs/themes/prism-tomorrow.css' ; // import syntax highlighting styles
export default {
components : {
PrismEditor ,
} ,
data : ( ) => ( { code : 'console.log("Hello World")' } ) ,
methods : {
highlighter ( code ) {
return highlight ( code , languages . js ) ; // languages.<insert language> to return html with markup
} ,
} ,
} ;
</ script >
< style >
/* required class */
.my-editor {
/* we dont use `language-` classes anymore so thats why we need to add background and text color manually */
background: #2d2d2d;
color: #ccc;
/* you must provide font-family font-size line-height. Example: */
font-family: Fira code, Fira Mono, Consolas, Menlo, Courier, monospace;
font-size: 14px;
line-height: 1.5;
padding: 5px;
}
/* optional class for removing the outline */
.prism-editor__textarea:focus {
outline: none;
}
</ style >Perhatikan bahwa tergantung pada stabilo sintaks Anda, Anda mungkin harus menyertakan CSS tambahan untuk menyorot sintaks untuk berfungsi.
Atau daftarkan komponen secara global
import { PrismEditor } from 'vue-prism-editor' ;
import 'vue-prism-editor/dist/prismeditor.min.css' ; // import the styles
Vue . component ( 'PrismEditor' , PrismEditor ) ;Penggunaan browser (untuk codepen dll.):
< script src =" https://unpkg.com/[email protected].* " > </ script >
<!-- Prism Editor -->
< script src =" https://unpkg.com/vue-prism-editor " > </ script >
< link rel =" stylesheet " href =" https://unpkg.com/vue-prism-editor/dist/prismeditor.min.css " />
<!-- custom highlighter: -->
< script src =" https://unpkg.com/prismjs/prism.js " > </ script >
< link rel =" stylesheet " href =" https://unpkg.com/prismjs/themes/prism-tomorrow.css " />
< style >
.height-200{
height: 200px
}
.my-editor {
/* we dont use `language-` classes anymore so thats why we need to add background and text color manually */
background: #2d2d2d;
color: #ccc;
/* you must provide font-family font-size line-height. Example:*/
font-family: Fira code, Fira Mono, Consolas, Menlo, Courier, monospace;
font-size: 14px;
line-height: 1.5;
padding: 5px;
}
/* optional class for removing the outline */
.prism-editor__textarea:focus {
outline: none;
}
</ style >
< div id =" app " >
< prism-editor class =" my-editor height-200 " v-model =" code " :highlight =" highlighter " line-numbers > </ prism-editor >
</ div >
< script >
new Vue ( {
el : "#app" ,
data : ( ) => ( {
code : "console.log('hello world')"
} ) ,
methods : {
highlighter ( code ) {
// js highlight example
return Prism . highlight ( code , Prism . languages . js , "js" ) ;
}
} ,
} )
</ script > | Nama | Jenis | Bawaan | Opsi | Keterangan |
|---|---|---|---|---|
value V-Model | string | "" | - | Nilai editor saat ini yaitu kode yang akan ditampilkan |
| menyorot | string => string | - | - | Callback yang akan menerima teks untuk disorot. Anda harus mengembalikan string html dengan sintaksis sintaksis menggunakan pustaka seperti prismjs. |
| readonly | Boolean | false | - | Readonly |
| linenumbers | Boolean | false | - | Apakah akan menunjukkan nomor baris. false default |
| Autostylelinenumbers | Boolean | true | - | Cocokkan nomor baris warna teks dengan tema. Default true |
| Tabsize | number | 2 | - | Jumlah karakter yang akan dimasukkan saat menekan tombol tab. Misalnya, untuk 4 indentasi ruang, tabSize akan menjadi 4 dan insertSpaces akan menjadi true . Default: 2 |
| insertspaces | boolean | true | - | Apakah akan menggunakan spasi untuk lekukan. Default: true . Jika Anda mengaturnya ke false , Anda mungkin juga ingin mengatur tabSize ke 1 |
| Ignoretabkey | boolean | false | - | Apakah editor harus mengabaikan tombol tab tekan sehingga pengguna keyboard dapat melampaui editor. Pengguna dapat beralih perilaku ini menggunakan Ctrl+Shift+M (Mac) / Ctrl+M secara manual saat ini false . Default: false |
| Nama | Parameter | Keterangan |
|---|---|---|
| masukan | (code) | Api saat kode diubah. |
| keydown | (event) | Acara ini dipancarkan saat acara Keydown terjadi di editor |
| keyup | (event) | Acara ini dipancarkan saat acara Keyup terjadi di editor |
| klik | (event) | Acara ini dipancarkan saat mengklik di mana saja di editor |
| fokus | (event) | Acara ini dipancarkan saat fokus |
| mengaburkan | (event) | Acara ini dipancarkan saat kabur |
Bagian ini diambil dari react-simple-code-editor
Ini bekerja dengan overlay sintaks yang disorot <pre> blok di atas <textarea> . Saat Anda mengetik, memilih, menyalin teks dll., Anda berinteraksi dengan yang mendasari <textarea> , sehingga pengalaman terasa asli. Ini adalah pendekatan yang sangat sederhana dibandingkan dengan editor lain yang mengimplementasikan kembali perilaku tersebut.
Sorot sintaks dapat dilakukan oleh perpustakaan pihak ketiga mana pun selama mengembalikan HTML dan sepenuhnya dapat dikendalikan oleh pengguna.
Vanilla <textarea> tidak mendukung memasukkan karakter tab untuk indentasi, jadi kami mengimplementasikannya kembali dengan mendengarkan acara keydown dan secara terprogram memperbarui teks. Salah satu peringatan dengan memperbarui teks secara terprogram adalah bahwa kita kehilangan tumpukan undo, jadi kita perlu mempertahankan tumpukan undo kita sendiri. Akibatnya, kami juga dapat menerapkan peningkatan perilaku undo seperti membatalkan seluruh kata yang mirip dengan editor seperti VScode.
Karena cara kerjanya, ia memiliki keterbatasan tertentu:
<textarea> , mengubah apa pun yang mempengaruhi tata letak dapat menyalurkannya.-webkit-text-fill-color: transparent , yang berfungsi di semua browser modern (bahkan yang non-Webkit seperti Firefox and Edge). Pada IE 10+, kami menggunakan color: transparent yang tidak menyembunyikan kursor. Teks mungkin tampak lebih berani di browser yang tidak didukung. react-simple-code-editor
Mit
