Unduh code input - Unduh Kode Sumber code input Kode

code input

Sumber daya lainnya

2.4.0

Unduh

input kode

Textarea yang sepenuhnya dapat disesuaikan, sintaksis yang dapat diedit yang dapat ditempatkan dalam bentuk HTML apa pun. [Lihat demo]

Menggunakan input kode dengan banyak tema yang berbeda Demonstrasi ini menggunakan tema dari prism.js dan sorot.js, dua program sintaksis-highlighting yang bekerja dengan baik dan memiliki kompatibilitas bawaan dengan input kode.

Perpustakaan JavaScript Frontend, dengan:

Apa yang dilakukannya?

code-input memungkinkan Anda mengubah tema highlight-highlight JavaScript biasa dan program menjadi sintaksis yang dapat disesuaikan dengan tekstarea yang disesuaikan menggunakan elemen kustom HTML. Ini menggunakan Vanilla CSS untuk mengeposkan textarea pada blok pre code , lalu menangani lekukan, menggulir dan memperbaiki bug yang dihasilkan dengan JavaScript. Untuk melihat cara kerjanya di belakang layar (bukan cara menggunakan perpustakaan ini), silakan lihat artikel CSS-Tricks ini yang saya tulis.

Untuk apa keuntungan menggunakan input kode, dan apa yang bisa digunakan?

Tidak seperti proyek editor kode front-end lainnya, kesederhanaan cara kerja code-input berarti sangat dapat disesuaikan . Karena ini bukan editor berfitur lengkap, Anda dapat memilih fitur apa yang Anda inginkan, dan menggunakan algoritma dan tema sintaksis sintaksis favorit Anda .

Elemen <code-input> berfungsi seperti <textarea> dan karenanya berfungsi dalam formulir HTML5 dan dukungan menggunakan name , value dan atribut placeholder , acara seperti onchange , formulir reset, untuk beberapa nama ... (demo)

code-input juga telah mengumpulkan banyak fitur di plugin opsional dari kontribusi open-source, memungkinkan Anda untuk memilih fitur apa pun yang Anda inginkan. Jika fitur yang Anda inginkan tidak ada, silakan buka masalah / berkontribusi!

Memulai dengan `code-input` (dalam 4 langkah sederhana)

`code-input` juga mendukung TypeScript (klik)

Anda dapat mengikuti instruksi di bawah ini, atau menggunakan kode starter yang tersedia di sini untuk sorotan.js dan di sini untuk prism.js.

code-input dirancang agar mudah digunakan dan dapat disesuaikan . Inilah cara menggunakannya untuk membuat sintaksis sintaks Textareas:

1. Impor `code-input`

Pertama, impor file tema JS dan CSS sintaks-highlighter favorit Anda agar dapat diedit.
Kemudian, impor file CSS dan JS dari code-input dari rilis yang diunduh atau CDN. File non-minified berguna untuk digunakan selama pengembangan.

Diunduh secara lokal (klik)

 <!--In the <head>-->
< script src =" path/to/code-input.min.js " > </ script >
< link rel =" stylesheet " href =" path/to/code-input.min.css " >

Dari jsdelivr cdn (klik)

 <!--In the <head>-->
< script src =" https://cdn.jsdelivr.net/gh/WebCoder49/[email protected]/code-input.min.js " > </ script >
< link rel =" stylesheet " href =" https://cdn.jsdelivr.net/gh/WebCoder49/[email protected]/code-input.min.css " >

2. Membuat template

Langkah selanjutnya adalah mengatur template untuk menautkan code-input ke sintaks-highlight Anda. Jika Anda menggunakan prism.js atau sorot.js, Anda dapat menggunakan template bawaan, atau Anda dapat membuat sendiri. Dalam contoh-contoh ini, saya mendaftarkan template sebagai "syntax-highlighted" , tetapi Anda dapat menggunakan nama templat apa pun selama Anda konsisten.

Sorote.js:

 codeInput . registerTemplate ( "syntax-highlighted" , codeInput . templates . hljs ( hljs , [ ] /* Array of plugins (see below) */ ) ) ;

Prism.js:

 codeInput . registerTemplate ( "syntax-highlighted" , codeInput . templates . prism ( Prism , [ ] /* Array of plugins (see below) */ ) ) ;

Kebiasaan:

 codeInput . registerTemplate ( "syntax-highlighted" , new codeInput . Template (
  function ( result_element ) { /* Highlight function - with `pre code` code element */
    /* Highlight code in result_element - code is already escaped so it doesn't become HTML */
  } ,

  true , /* Optional - Is the `pre` element styled as well as the `code` element?
         * Changing this to false uses the code element as the scrollable one rather
         * than the pre element */
        
  true , /* Optional - This is used for editing code - setting this to true sets the `code`
         * element's class to `language-<the code-input's lang attribute>` */

  false /* Optional - Setting this to true passes the `<code-input>` element as a second
         * argument to the highlight function to be used for getting data- attribute values
         * and using the DOM for the code-input */ ,

  [ ] // Array of plugins (see below)
) ) ;

3. Menambahkan plugin

Plugin memungkinkan Anda untuk menambahkan fitur tambahan ke templat, seperti lekukan otomatis atau dukungan untuk Autodeteksi Bahasa Sorote.js. Untuk menggunakannya, hanya:

Impor file JS plugin setelah Anda mengimpor code-input dan sebelum mendaftarkan templat.
Tempatkan contoh plugin di array argumen plugin saat mendaftar, seperti ini:

 < script src =" code-input.js " > </ script >
<!--...-->
< script src =" plugins/autodetect.js " > </ script >
< script src =" plugins/indent.js " > </ script >
<!--...-->
< script >
  codeInput . registerTemplate ( "syntax-highlighted" , 
    codeInput . templates . hljs (
      hljs , 
      [
        new codeInput . plugins . Autodetect ( ) , 
        new codeInput . plugins . Indent ( true , 2 ) // 2 spaces indentation
      ]
    )
  ) ;
</ script >

️ Sayangnya menempatkan beberapa plugin dari jenis yang sama dalam templat saat ini dapat menyebabkan kesalahan dan perilaku yang tidak ditentukan, bahkan jika konfigurasi seperti itu masuk akal secara logis. Ini adalah masalah #118 dan akan diperbaiki sesegera mungkin - jika Anda ingin membantu dan memiliki waktu yang Anda sambut, tetapi juga di bagian atas daftar tugas pemelihara.

Untuk melihat daftar lengkap plugin dan fungsinya, silakan lihat plugin/readme.md.

4. Menggunakan komponen

Sekarang Anda telah mendaftarkan templat, Anda dapat menggunakan elemen <code-input> khusus dalam HTML. Jika Anda memiliki lebih dari satu templat yang terdaftar, Anda perlu menambahkan nama templat sebagai atribut template . Dengan elemen, menggunakan atribut language akan menambahkan language-{value} kelas ke blok pre code . Anda sekarang dapat menggunakan atribut dan acara HTML, serta gaya CSS, untuk membuat elemen Anda sesederhana atau interaktif seperti yang Anda suka, seolah -olah itu adalah elemen textarea !

 < code-input language =" HTML " > </ code-input >

atau

 < code-input language =" HTML " placeholder =" Type code here " template =" syntax-highlighted " onchange =" console.log('Your code is', this.value) " > &lt; href='https://github.com/WebCoder49/code-input' > code-input&lt;/a > </ code-input >

️ Saat ini, Anda perlu mengatur-properti --padding daripada padding untuk CSS elemen code-input . Semua sifat lain harus bekerja seperti biasa.

Berkontribusi

Jika Anda memiliki fitur apa pun yang ingin Anda tambahkan ke code-input sebagai plugin atau fungsi inti, atau telah menemukan bug, buka masalah atau garpu dan kirimkan permintaan tarik! Semua kontribusi untuk proyek open-source ini akan sangat dihargai. Anda dapat melihat info lebih lanjut di file CONTRIBUTING.md kami.