การใช้งานเบื้องต้น ReactPrismEditor

เนื่องจากผมมีการใช้งาน ReactPrismEditor ในโปรเจ็คที่ทำอยู่ ผมเลยอยากเขียนบทความสรุปขึ้น เพื่อให้เพื่อนๆ เข้าใจการใช้งาน ReactPrismEditor มากขึ้น ผมสรุปตามความเข้าใจของทางผมเอง ถ้าหากมีข้อผิดพลาดประการใด ของอภัยมาก ณ ที่นี้ด้วยครับ

ทำความเข้าใจก่อนเลย ReactPrismEditor คืออะไร ?

• ReactPrismEditor เป็นไลบรารีที่ถูกสร้างขึ้นบน React สำหรับการแสดงโค้ดอย่างสวยงามและมีสีสัน โดยใช้ PrismJS เป็นเครื่องมือในการ highlight โค้ดต่าง ๆ

วิธีการติดตั้ง ReactPrismEditor มีวิธีการติดตั้งอยู่ 2 วิธี ( npm / yarn)

npm install react-prism-editor

or

yarn add react-prism-editor

การใช้ ReactPrismEditor สั้นๆ แบบ Basic

• ในการใช้ ReactPrismEditor คุณสามารถใส่โค้ดที่คุณต้องการแสดงลงไปใน value prop ของ ReactPrismEditor ได้อย่างง่ายดายๆ

รายละเอียด Props Value ต่างๆ ของ ReactPrismEditor

• readOnly <String> = อยู่ในโหมดอ่านเท่านั้น

• language <String> = ภาษาที่ใช้ได้ เช่น json,javascript,jsx,tsx,typescript
  html,vue,angular,css,sass,markup
  java,php,csharp,c,cpp,sql,xml
• theme <String> = ธีมที่ใช้ได้ เช่น default, coy, dark, funky, okaidia, solarizedlight, tomorrow, twilight

• code <String> = props value state
• lineNumber <Boolean> = แสดงจำนวนบรรทัด

• clipboard <Boolean> = สามารถ Copy Clipboard ได้
• changecode = (code) = จะทำงานก็ต่อเมื่อ มีการเปลี่ยนแปลงข้อความ

สรุปการใช้ของ ReactPrismEditor

ข้อดี = สามารถใช้งานได้ง่าย โดยแค่การ Install สร้าง Component แล้วส่งค่า props value ที่ต้องการ

ข้อเสีย = ถ้าอยากได้อะไรใหม่ๆที่ทาง Lib ไม่มีมาให้ จะ Custom ค่อนข้างลำบาก

แหล่งที่มา : react-prism-editor