หน้าแรก>แหล่งข้อมูลการสร้างเว็บไซต์>ทรัพยากรอื่นๆ
ดาวน์โหลด

รหัสอินพุต

Textareas ที่ปรับแต่งได้อย่างสมบูรณ์และแก้ไขได้อย่างสมบูรณ์ซึ่งสามารถวางไว้ในรูปแบบ HTML ใด ๆ [ดูการสาธิต]

การใช้รหัสอินพุตที่มีธีมต่าง ๆ มากมาย การสาธิตนี้ใช้ธีมจาก prism.js และ highlight.js สองโปรแกรมที่มีความสูงไวยากรณ์ซึ่งทำงานได้ดีและมีความเข้ากันได้ในตัวกับรหัสอินพุต

ห้องสมุด JavaScript ส่วนหน้าพร้อม:

มันทำอะไร?

code-input ช่วยให้คุณ เปลี่ยนชุดรูปแบบและโปรแกรมการส่องสว่างของไวยากรณ์ JavaScript ทั่วไปและโปรแกรมให้เป็น Textareas ไวยากรณ์ที่ปรับแต่งได้ โดยใช้องค์ประกอบ HTML ที่กำหนดเอง มันใช้วานิลลา CSS เพื่อเพิ่ม textarea บนบล็อก pre code จากนั้นจัดการการเยื้องเลื่อนและแก้ไขข้อบกพร่องที่เกิดขึ้นกับ JavaScript หากต้องการดูว่ามันทำงานเบื้องหลังได้อย่างไร (ไม่ใช่วิธีการใช้ห้องสมุดนี้) โปรดดูบทความ CSS-tricks ที่ฉันเขียน

ข้อดีของการใช้รหัสอินพุตคืออะไรและสามารถใช้อะไรได้บ้าง?

ซึ่งแตกต่างจากโครงการบรรณาธิการรหัสส่วนหน้าอื่น ๆ ความเรียบง่ายของวิธีการทำงาน code-input หมายความว่าสามารถ ปรับแต่งได้สูง เนื่องจากไม่ใช่ตัวแก้ไขที่มีคุณสมบัติครบถ้วนคุณสามารถ เลือกคุณสมบัติที่คุณต้องการให้รวมและใช้อัลกอริทึมและธีมที่มีไวยากรณ์ที่คุณชื่นชอบ

องค์ประกอบ <code-input> ทำงานเหมือน <textarea> ดังนั้นจึง ทำงานในรูปแบบ HTML5 และสนับสนุนโดยใช้ name value และตัวยึด placeholder เหตุการณ์เช่น onchange การรีเซ็ตแบบฟอร์มเพื่อตั้งชื่อไม่กี่ ... (ตัวอย่าง)

code-input ได้สะสม คุณสมบัติมากมายในปลั๊กอินเสริม จากการบริจาคโอเพนซอร์ซช่วยให้คุณสามารถเลือกคุณสมบัติใด ๆ ที่คุณต้องการ หากคุณสมบัติที่คุณต้องการไม่ปรากฏโปรดเปิดปัญหา / มีส่วนร่วม!

เริ่มต้นใช้ code-input (ใน 4 ขั้นตอนง่าย ๆ )

code-input ยังรองรับ TypeScript (คลิก)

คุณสามารถทำตามคำแนะนำด้านล่างหรือใช้รหัสเริ่มต้นที่นี่สำหรับไฮไลต์. js และที่นี่สำหรับ prism.js

code-input รับการออกแบบให้ ใช้งานง่ายและปรับแต่งได้ นี่คือวิธีการใช้เพื่อสร้าง textareas ที่มีไวยากรณ์สูง:

1. การนำ code-input

  • ขั้นแรกให้นำเข้าไฟล์ธีม JS และ CSS ของไวยากรณ์ที่คุณชื่นชอบ เพื่อเปลี่ยนการแก้ไข
  • จากนั้นนำเข้าไฟล์ CSS และ JS ของ code-input จากรีลีสที่ดาวน์โหลดหรือ CDN ไฟล์ที่ไม่ได้กำหนดมีประโยชน์สำหรับการใช้ระหว่างการพัฒนา
ดาวน์โหลดในพื้นที่ (คลิก) 
 <!--In the <head>-->
< script src =" path/to/code-input.min.js " > </ script >
< link rel =" stylesheet " href =" path/to/code-input.min.css " >
จาก JSDELIVR CDN (คลิก) 
 <!--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. การสร้างเทมเพลต

ขั้นตอนต่อไปคือการตั้ง template เพื่อเชื่อมโยง code-input กับไวยากรณ์สูงของคุณ หากคุณใช้ prism.js หรือ highlight.js คุณสามารถใช้เทมเพลตในตัวหรือคุณสามารถสร้างของคุณเองได้ ในตัวอย่างเหล่านี้ฉันกำลังลงทะเบียนเทมเพลตเป็น "syntax-highlighted" แต่คุณสามารถใช้ชื่อเทมเพลตใด ๆ ได้ตราบใดที่คุณมีความสอดคล้อง

  • Highlight.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) */ ) ) ;

  • กำหนดเอง: 

     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. การเพิ่มปลั๊กอิน

ปลั๊กอินช่วยให้คุณสามารถเพิ่มคุณสมบัติพิเศษให้กับเทมเพลตเช่นการเยื้องอัตโนมัติหรือสนับสนุนสำหรับการตรวจสอบภาษาไฮไลต์ของ js เพื่อใช้พวกเขาเพียงแค่:

  • นำเข้าไฟล์ JS ของปลั๊กอินหลังจากที่คุณนำเข้ารหัส code-input และก่อนที่จะลงทะเบียนเทมเพลต
  • วางอินสแตนซ์ของปลั๊กอินในอาร์เรย์ของอาร์กิวเมนต์ปลั๊กอินเมื่อลงทะเบียนเช่นนี้: 
 < 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 >

น่าเสียดายที่การวางปลั๊กอินหลายชนิดในประเภทเดียวกันในเทมเพลตสามารถทำให้เกิดข้อผิดพลาดและพฤติกรรมที่ไม่ได้กำหนดแม้ว่าการกำหนดค่าดังกล่าวจะสมเหตุสมผล นี่คือปัญหา #118 และจะได้รับการแก้ไขโดยเร็วที่สุด - หากคุณต้องการความช่วยเหลือและมีเวลายินดีต้อนรับ แต่ก็อยู่ที่ด้านบนสุดของรายการสิ่งที่ต้องทำของผู้ดูแล

หากต้องการดูรายการปลั๊กอินและฟังก์ชั่นทั้งหมดโปรดดูปลั๊กอิน/readme.md

4. การใช้ส่วนประกอบ

ตอนนี้คุณได้ลงทะเบียนเทมเพลตแล้วคุณสามารถใช้องค์ประกอบ <code-input> ที่กำหนดเองใน HTML หากคุณมีการลงทะเบียนเทมเพลตมากกว่าหนึ่งรายการคุณต้องเพิ่มชื่อเทมเพลตเป็นแอตทริบิวต์ template ด้วยองค์ประกอบการใช้แอตทริบิวต์ language จะเพิ่ม language-{value} คลาสลงในบล็อก pre code ตอนนี้คุณสามารถใช้แอตทริบิวต์และกิจกรรม HTML รวมถึงสไตล์ CSS เพื่อให้องค์ประกอบของคุณง่ายหรือโต้ตอบตามที่คุณต้องการราวกับว่ามันเป็นองค์ประกอบ textarea ! 

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

หรือ 

 < 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 >

ในขณะนี้คุณต้องตั้งค่าคุณสมบัติ --padding เสริมแทนที่จะ padding สำหรับ CSS องค์ประกอบของ code-input คุณสมบัติอื่น ๆ ทั้งหมดควรทำงานตามปกติ

การบริจาค

หากคุณมีคุณสมบัติใด ๆ ที่คุณต้องการเพิ่มลงใน code-input เป็นปลั๊กอินหรือฟังก์ชั่นหลักหรือพบข้อบกพร่องใด ๆ โปรดเปิดปัญหาหรือส้อมและส่งคำขอดึง! การมีส่วนร่วมทั้งหมดในโครงการโอเพ่นซอร์สนี้จะได้รับการชื่นชมอย่างมาก คุณสามารถดูข้อมูลเพิ่มเติมได้ในไฟล์ CONTRIBUTING.md ของเรา

... มีส่วนร่วมในการร้องขอการดึงมาจนถึงตอนนี้
(ที่มา: contrib.rocks)
ขยาย
ข้อมูลเพิ่มเติม
แอปที่เกี่ยวข้อง
แนะนำสำหรับคุณ
ข้อมูลที่เกี่ยวข้อง ทั้งหมด