ตัวแก้ไขรหัสง่ายตายพร้อมการเน้นไวยากรณ์และหมายเลขบรรทัด 3kb/z
Editor ทำงานทั้งสำหรับ Vue 2.x และ Vue 3.x และขณะนี้คุณอยู่ในสาขาที่รองรับ Vue 2.x ไปที่นี่สำหรับเวอร์ชันที่เข้ากันได้ของ Vue 3.x
prism-editor.netlify.com
ตัวแก้ไขรหัสที่ใช้เบราว์เซอร์หลายตัวเช่น ACE, Codemirror, Monaco ฯลฯ ให้ความสามารถในการฝังรหัสโปรแกรมแก้ไขเต็มรูปแบบในหน้าเว็บของคุณ อย่างไรก็ตามหากคุณต้องการตัวแก้ไขง่าย ๆ ที่มีการไฮไลต์ไวยากรณ์โดยไม่มีคุณสมบัติพิเศษใด ๆ พวกเขาสามารถ overkill ได้เนื่องจากพวกเขามักจะไม่มีรอยเท้าขนาดเล็ก ไลบรารีนี้มีจุดมุ่งหมายเพื่อให้โปรแกรมแก้ไขรหัสอย่างง่ายพร้อมการสนับสนุนการเน้นไวยากรณ์โดยไม่มีคุณสมบัติพิเศษใด ๆ เหมาะสำหรับการฝังและแบบฟอร์มที่ง่ายซึ่งผู้ใช้สามารถส่งรหัสได้
npm install vue-prism-editorหรือ
yarn add vue-prism-editorคุณต้องใช้ตัวแก้ไขกับห้องสมุดบุคคลที่สามซึ่งให้การไฮไลต์ไวยากรณ์ ตัวอย่างเช่นมันจะดูเหมือนกับ prismjs:
ลงทะเบียนส่วนประกอบในเครื่องและใช้งาน (แนะนำ)
< 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 >โปรดทราบว่าขึ้นอยู่กับปากกาเน้นข้อความไวยากรณ์ของคุณคุณอาจต้องรวม CSS เพิ่มเติมสำหรับไวยากรณ์ที่เน้นการทำงาน
หรือลงทะเบียนส่วนประกอบทั่วโลก
import { PrismEditor } from 'vue-prism-editor' ;
import 'vue-prism-editor/dist/prismeditor.min.css' ; // import the styles
Vue . component ( 'PrismEditor' , PrismEditor ) ;การใช้เบราว์เซอร์ (สำหรับ codepen ฯลฯ ):
< 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 > | ชื่อ | พิมพ์ | ค่าเริ่มต้น | ตัวเลือก | คำอธิบาย |
|---|---|---|---|---|
value V-model | string | "" | - | ค่าปัจจุบันของตัวแก้ไขเช่นรหัสที่จะแสดง |
| เน้น | string => string | - | - | การโทรกลับซึ่งจะได้รับข้อความเพื่อเน้น คุณจะต้องส่งคืนสตริง HTML ด้วยการเน้นไวยากรณ์โดยใช้ไลบรารีเช่น PRISMJS |
| อย่างอ่านอย่างเดียว | Boolean | false | - | อย่างอ่านอย่างเดียว |
| ผ้าลินิน | Boolean | false | - | ไม่ว่าจะแสดงหมายเลขบรรทัด ค่าเริ่มต้น false |
| autostylelinenumbers | Boolean | true | - | จับคู่หมายเลขข้อความสีกับธีม เริ่มต้น true |
| แท็บ | number | 2 | - | จำนวนอักขระที่จะแทรกเมื่อกดปุ่ม TAB ตัวอย่างเช่นสำหรับการเยื้อง 4 อวกาศ tabSize จะเป็น 4 และ insertSpaces จะเป็น true ค่าเริ่มต้น: 2 |
| ensertspaces | boolean | true | - | ไม่ว่าจะใช้พื้นที่สำหรับการเยื้อง ค่าเริ่มต้น: true หากคุณตั้งค่าเป็น false คุณอาจต้องการตั้ง tabSize เป็น 1 |
| ไม่รู้ | boolean | false | - | ไม่ว่าตัวแก้ไขควรเพิกเฉยต่อการกดปุ่มแท็บเพื่อให้ผู้ใช้แป้นพิมพ์สามารถแท็บผ่านตัวแก้ไขได้หรือไม่ ผู้ใช้สามารถสลับพฤติกรรมนี้โดยใช้ Ctrl+Shift+M (Mac) / Ctrl+M ด้วยตนเองเมื่อนี่เป็น false ค่าเริ่มต้น: false |
| ชื่อ | พารามิเตอร์ | คำอธิบาย |
|---|---|---|
| ป้อนข้อมูล | (code) | ไฟเมื่อมีการเปลี่ยนแปลงรหัส |
| คีย์ดาวน์ | (event) | เหตุการณ์นี้ถูกปล่อยออกมาเมื่อเหตุการณ์ Keydown เกิดขึ้นในบรรณาธิการ |
| การใส่กุญแจมือ | (event) | เหตุการณ์นี้ถูกปล่อยออกมาเมื่อเหตุการณ์ Keyup เกิดขึ้นในบรรณาธิการ |
| คลิก | (event) | เหตุการณ์นี้ถูกปล่อยออกมาเมื่อคลิกที่ใดก็ได้ในบรรณาธิการ |
| จุดสนใจ | (event) | เหตุการณ์นี้ถูกปล่อยออกมาเมื่อโฟกัส |
| เบลอ | (event) | เหตุการณ์นี้ถูกปล่อยออกมาเมื่อเบลอ |
ส่วนนี้นำมาจาก react-simple-code-editor
มันทำงานได้โดยการซ้อนทับไวยากรณ์ที่ไฮไลต์ <pre> บล็อกผ่าน <textarea> เมื่อคุณพิมพ์เลือกคัดลอกข้อความ ฯลฯ คุณโต้ตอบกับ <textarea> พื้นฐานดังนั้นประสบการณ์จึงรู้สึกเป็นพื้นเมือง นี่เป็นวิธีที่ง่ายมากเมื่อเทียบกับบรรณาธิการอื่น ๆ ที่ดำเนินการอีกครั้งพฤติกรรม
การไฮไลต์ไวยากรณ์สามารถทำได้โดยห้องสมุดบุคคลที่สามใด ๆ ตราบใดที่มันส่งคืน HTML และสามารถควบคุมได้อย่างสมบูรณ์โดยผู้ใช้
วานิลลา <textarea> ไม่รองรับการแทรกอักขระแท็บสำหรับการเยื้องดังนั้นเราจึงนำมาใช้ใหม่อีกครั้งโดยการฟังเหตุการณ์ keydown และอัปเดตข้อความโดยทางโปรแกรม ข้อแม้หนึ่งที่มีการอัปเดตข้อความโดยทางโปรแกรมคือเราสูญเสียการเลิกทำสแต็กดังนั้นเราจึงต้องรักษาสแต็กเลิกทำของเราเอง เป็นผลให้เรายังสามารถใช้พฤติกรรมการเลิกทำที่ดีขึ้นเช่นการยกเลิกคำทั้งหมดที่คล้ายกับบรรณาธิการเช่น VSCODE
เนื่องจากวิธีการทำงานมีข้อ จำกัด บางประการ:
<textarea> การเปลี่ยนสิ่งใดก็ตามที่มีผลต่อเค้าโครงสามารถปรับให้เข้ากันได้-webkit-text-fill-color: transparent ซึ่งทำงานในเบราว์เซอร์ที่ทันสมัยทั้งหมด บน IE 10+ เราใช้ color: transparent ซึ่งไม่ซ่อนเคอร์เซอร์ ข้อความอาจดูโดดเด่นยิ่งขึ้นในเบราว์เซอร์ที่ไม่ได้รับการสนับสนุน react-simple-code-editor
มิกซ์
